1.html代码
使w1200的div标签的左右内边距都为100px，margin左右为自适应边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header id="header" class="header">
<div class="w1200">
<ul class="header-list">
<li><a href="#">分类</a></li>
<li><a href="#">赞助VIP</a></li>
<li><a href="#">邀请比赛</a></li>
<li><a href="#">qq群部落</a></li>
</ul>
</div>
</header><!-- /header -->
</body>
</html>2.css代码
*{
margin:0;
padding:0;
}
body{
width: 100%;
min-width: 1200px;
font-family: "微软雅黑";
}
.header-list{
list-style: none; /*去掉列表前面的标记*/
width: 100%;
overflow: hidden;
}
.header-list li{
float: left;
line-height: 62px;
margin:0 50px;
}
.header-list li:hover{
background: #fff;
}
.header-list li a:hover{
color: #000;
}
.header-list li a{
text-decoration: none; /*清楚超链接的下划线*/
color: #fff;
padding: 0 10px;
display:block; /*使整体变成可点击区域 使a和li成为一个整体*/
}
header{
width: 100%;
height: 62px;
background: #333;
min-width: 1200px;
font-size: 14px;
}
.w1200{
width: 1200px;
height: 100%;
padding:0 100px;
margin:0 auto;
box-sizing:border-box;
position: relative;
}
实现效果：
鼠标经过时：
学习的要点
1.理解盒子模型
margin是外边距
padding是内边距
多想想为什么要这样写？
.w1200{
width: 1200px;
height: 100%;
padding:0 100px;
margin:0 auto;
box-sizing:border-box;
position: relative;
}使w1200的div标签的左右内边距都为100px，margin左右为自适应边距
box--sizing布局 https://www.jianshu.com/p/e2eb0d8c9de6
理解为什么使用box-sizing更好。
2.理解dispaly
display:block; /*使整体变成可点击区域 使a和li成为一个整体*/