实例
<!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;
}
.image {
width: 1000px;
height: 350px;
margin: 5px auto;
}
.taitou {
width: inherit;
height: 350px;
}
.container {
width: 1000px;
height: 600px;
margin: 5px auto;
background-color: lightgray;
}
.wrap {
width: inherit;
min-height: 600px;
background-color: lightgrey;
}
.left{
width: 200px;
min-height: 600px;
background-color: lightseagreen;
}
.wrap,.left{
float: left;
}
.left {
margin-left: -100%;
}
/*挤得是子元素main*/
.main {
padding-left: 200px;
}
.zhimi {
width: 300px;
height: 200px;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.main {
margin-left: 20px;
margin-right: 20px;
}
.biaoti {
text-align: center;
}
.gongsi,.lianxi {
width: inherit;
height: 200px;
background-color:lightseagreen;
}
.lianxi {
float:left;
margin-top:182px;
}
.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>
</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="image">
<img src="static/images/fendou.jpg" class="taitou" alt="">
</div>
<div class="container">
<!--双飞翼：必须先有一个容器，然后优先渲染主体部分。-->
<div class="wrap">
<div class="main">
<h2 class="biaoti">公司简介</h2>
<hr color="black">
<img src="static/images/zhimi.jpg" class="zhimi" alt="">
<p class="neitong1"> 智米科技正式成立于2014年6月，是一家专注于智能生活电器产品设计与研发的智能硬件公司，同时也是一家专注于智能产品设计创新及交互体验的企业。其产品类型覆盖空调、空气净化器、新风系统、加湿器、电暖器、风扇、空气检测仪和防雾霾口罩等产品。</p>
<p class="neitong2"> 智米的理念是“做感动人心的家用电器”，主张利用优秀的产品设计和更加平易近人的价格让更多民众体会到科技乐趣的同时，又能够满足提升生活***的需求。</p>
<p class="neitong3"> 仅在成立的第二年，智米科技的销售额就突破了10亿大关，同时估值也达到10亿美金，成为小米生态链中的独角兽公司。 作为智米科技的第一款产品，小米/米家空气净化器已经连续两年成为中国***中同类产品销量最高的产品，截至目前，该产品的销量已经超过了800万台。</p>
<p class="neitong4"> 2017年11月，智米科技研发***的智米全直流变频空调成为***优良设计大奖金奖设立60年以来首次获得该奖项的中国大陆产品。在随后的时间中，智米科技的多款产品已经斩获了德国红点设计大奖和美国工业设计大奖在内的众多奖项，让世界见识了中国工业设计水平的提升。</p>
</div>
</div>
<div class="left">
<div class="gongsi">
<h3 align="center">这里有句话</h3>
<p align="center">加油！！！！</p>
</div>
<div class="lianxi">
<h3 align="center">联系方式</h3>
<p align="center">0518-5166454</p>
</div>
</div>
</div>
<div class="footer">
<p>
<a href="">dsfadf</a>
<a href="">05181645644</a>
<a href="">fdgagafgafg</a>
</p>
</div>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：通过这一周的学习，我对前端布局这一块儿有了基本的了解，但是对于某些点还是不能理解透彻，比如：margin和padding的内容还是有些模糊，另外，双飞翼的布局和圣杯的布局还比较生疏，以后还得勤加练习，希望自己在javascript的学习能更进一步。
