HTML＋CSS网页布局练习

Cherry_linyun

于 2021-10-22 16:18:19 发布

阅读量355

点赞数

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/Cherry_linyun/article/details/120908215

版权

这是一个HTML+CSS的网页布局示例，展示了如何使用CSS进行网页元素的样式设计和布局。包括顶部导航栏、搜索区域、 banner 图片、商品展示盒和页脚等部分，通过浮动、宽度设置和背景颜色等实现不同区块的样式和位置布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
<style>>*{
   margin: 0;
   padding: 0;
}
li{
   list-style: none;
}
body{
   background-color:#f2f2f2;
}
.top{
   height: 50px;
   font-family:'微软雅黑';
   font-weight: 400;
   font-size: 14px;
   background-color: gray;
}
.top ul li{
   margin-left:100px ;
   float: left;
   width: 60px;
   text-align: center;
   margin-top: 15px;
}
.top ul .sichuan{
   margin-left:40px ;
}
.top .top2 ul li{
   margin-right:40px ;
   float: left;
   width: 60px;
   text-align: center;
   margin-top: 15px;
}
.sousuo{
   ba