HTML＋CSS网页布局练习

HTML+CSS网页布局实战

最新推荐文章于 2024-03-18 11:28:08 发布

原创

最新推荐文章于 2024-03-18 11:28:08 发布 · 373 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

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

<!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{
   background-color:#ffffff;
   width:1920px;
   height:180px;
   margin:auto;
   padding-top:20px;
}
.sousuo .logo{