顶部:
头部:查看要求--观察页面头部是上下分还是左右分,明显是左右分
左边分为3小部分 右边分5小部分
查看图片的大小 和偏移量:
鼠标放上去显示绿色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>OPPO</title>
</head>
<body>
<!-- 页面的顶部 -->
<div id="top">
<div class="container"></div>
</div>
<!-- 页面的头部 -->
<div id="header">
<div class="container">
<!-- 左边有三项 -->
<!-- /*实现整体 浮动*/ -->
<div class="header_left left">
<div class="xlwb"></div>
<div class="txwb"></div>
<div class="tel">4001-666-888</div>
</div>
<!-- 右边的相同样式就是文字不同 列表适合一点 有五项-->
<ul class="right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">积分兑换</a></li>
<li><a href="#">帮助中心</a></li>
<li class="shop_car">
<span></span>
<a href="#">购物车</a>
</li>
</ul>
</div>
</div>
<!-- 页面的导航栏 -->
<div id="nav">
<div class="container"></div>
</div>
<!-- 页面的横幅 -->
<div id="banner">
<div class="container"></div>
</div>
<!-- 页面的明星机型部分 -->
<div id="star">
<div class="container"></div>
</div>
<!-- 页面的精选配件 -->
<div id="accessory">
<div class="container"></div>
</div>
<!-- 页面的搜素opple部分 -->
<div id="world">
<div class="container"></div>
</div>
<!-- 页面的服务部分 -->
<div id="service">
<div class="container"></div>
</div>
<!-- 页面的售后服务 -->
<div id="alter_sale">
<div class="container"></div>
</div>
<!-- 页面的底部 -->
<div id="footer">
<div class="container"></div>
</div>
</body>
</html>
/*初始化样式*/
/*将默认的样式清零*/
*{
padding: 0;
margin: 0;
}
/*清除列表前面的标识 */
ol,ul{
list-style-type: none;
}
/*清除超链接的默认样式*/
a{
color: #666;/*灰色*/
text-decoration: none;/*去除下划线*/
}
/*将左右浮动写在类里面*/
.left{
float: left;
}
.right{
float: right;
}
/*测试部分*/
#top,#header,#nav,#banner,#star,#accessory,#world,#service,#alter_sale,#footer{
height: 100px;
width: 100%;
border: 1px solid #000;
}
/*页面的顶部样式*/
#top{
height: 5px;
background-color: #00925f;
}
/*页面的头部样式*/
#header{
height: 30px;
background-color: #2d2d2d;
}
#header .xlwb{
width: 22px;
height: 19px;
background: url("../img/icons.png") no-repeat -48px -98px; /*偏移量量一下*/
}
#header .txwb{
width: 17px;
height: 24px;
background: url("../img/icons.png") no-repeat -28px -93px; /*偏移量量一下*/
}
#header .tel{
color: #17925f;
font-size: 14px;
}
/*实现一行显示 浮动*/
#header .header_left div{
float: left;
margin:6px 10px 0px;
}
#header ul li{
float: left;
line-height: 30px;
}
#header li a{
color: #b2b2b2;
font-size: 14px;
border-right: 1px solid #b2b2b2;
padding:0px 10px;/*文字与边框的距离*/
}
#header li a:hover{
color: #00925f;
}
#header .shop_car span{
width: 19px;
height: 16px;
margin-left: 10px;
display: inline-block;
/* span是行内元素 无法设置行内宽度 改变显示方式*/
background: url("../img/icons.png") no-repeat 0px -96px;
}
#header .shop_car a{
border: none;
}
.container{
width: 1280px;
border: 1px solid #f00;
margin: 0 auto; /*内容部分居中*/
}