实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.header {
background-color: black;
}
.header .content {
width: 1000px;
height: 60px;
margin: 0 auto;
background-color:black;
}
.header .content .nav .item {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
/*要先清除样式，才能浮动*/
.header .content .nav .item {
list-style-type: none;
}
.header .content .nav .item a {
float: left;
/*给一个最小宽度和最小高度，不至于因字短缩的没有了*/
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: white;
/*还要去掉下划线*/
text-decoration-line: none;
padding: 0 15px;
text-align: center;
}
.header .content .nav .item a:hover {
background-color: red;
font-size: 1.1rem;
}
.container {
width: 1000px;
height: 650px;
margin: 5px auto;
background-color: lightgray;
}
.wrap {
width: inherit;
min-height: 600px;
background-color: lightgreen;
}
.left,.right {
width: 200px;
min-height: 600px;
}
.left {
background-color: lightcoral;
}
.right {
background-color: lightseagreen;
}
.wrap,.left,.right {
float: left;
}
.left {
position: relative;
top: -600px;
}
.right {
position: relative;
top: -600px;
right: -600px;
}
/*挤得是子元素main*/
.main {
padding-left: 200px;
padding-right: 200px;
}
.footer {
background-color:black;
}
.footer p {
width: 1000px;
height: 60px;
margin: 0 auto;
background-color:black;
text-align: center;
line-height: 60px;
}
.footer p a {
padding-left: 20px;
text-decoration: none;
}
.footer p a:hover {
color: white;
}
</style>
<title>Title</title>
</head>
<body>
<!--头部-->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">公司新闻</a></li>
<li class="item"><a href="">最新产品</a></li>
<li class="item"><a href="">关于我们</a></li>
<li class="item"><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div class="container">
<!--双飞翼：必须先有一个容器，然后优先渲染主体部分。-->
<div class="wrap">
<div class="main"></div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<p>
<a href="">dsfadf</a>
<a href="">05181645644</a>
<a href="">fdgagafgafg</a>
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：margin和padding的用法还是不明白，得多加练习，看里边的区别在哪里，双飞翼的布局也要多加练习，还是很生疏，里边的一些细节还是不理解，还有一些格式的设置也要多加练习，比如：hover、清除浮动、清除列表样式等。
