HTML/CSS布局实例（模仿淘宝网首页导航布局）
本次布局主要是为了融会贯通所学过的布局基础知识，重点在字体库的使用和CSS选择器，模仿淘宝网布局案例如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘宝网导航条实例</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/fontawesome.min.css"> </head> <body> <div> <div> <div> <a href="">中国大陆 <i class=" fa fa-angel-down"></i></a> <a href="" style="color: #FF5000;">亲,请登录</a> <a href="">免费注册</a> <a href="">手机逛淘宝</a> </div> <div> <a href="">我的淘宝 <i class=" fa fa-angel-down"></i></a> <a href="">购物车<i class=" fa fa-angel-down"></i></a> <a href="">收藏夹<i class=" fa fa-angel-down"></i></a> <a href="">商品分类</a> <a href="">卖家中心<i class=" fa fa-angel-down"></i></a> <a href="">联系客服<i class=" fa fa-angel-down"></i></a> <a href="">网站导航<i class=" fa fa-angel-down"></i></a> </div> </div> </div> </body> </html>
* {
margin: 0px;
padding: 0px
}
a{
text-decoration: none; /*取消下划线*/
color: #000;
}
.clear {
clear: both;
}
.header {
width: 100%;
height: 40px;
background-color: #F5F5F5;
}
.content {
width: 1200px;
height: 40px;
margin: 0px auto;
line-height: 40px;
}
.content a:hover{
color: #FF5000;
}
.content_left {
width: 400px;
height: 40px;
float: left;
}
.content_left a{
margin-right: 5px;
}
.content_right {
width: 600px;
height: 40px;
/* background-color: pink;*/
float: right;
}
.left_a{
display: inline-block;
height: 40px;
width: 90px;
text-align: center;
}
.left_a:hover{
background-color: #fff;
}PS：在使用浮动特性的时候要注意，因为浮动不占用页面空间，所以不能撑起外部宽高，所以需要清除both,或者单独给出宽高。