1.清除浮动的方法有哪几种？分别如何实现？
（1）浮动元素后面加空div
（2）设置父元素的高度
（3）父级添加overflow属性
（4）父级添加伪类
2使用display：inline-block或float布局网页有什么区别？需要注意什么？
（1）display：inline-bloak可以让元素排在一行，并且支持宽度和高度，代码实现起来方便。添加该属性的原素在标准文档流中，不需要清除浮动。
（2）floak可以人元素排在一行并且支持宽度和高度，可以决定排列方向。
（3）display：inline-block位置方向不可控制，会解析空格。
（4）float浮动以后元素脱离文档流，会对周围元素产生影响，必须在他父级上添加清除浮动的样式。
3制作热门小镇页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摄影社区热门小镇</title>
<style>
ul li{
list-style-type: none;
float: left;
}
.text1{
display: inline-block;
}
img{
border: 1px solid gray;
padding: 2px;
border-radius:5px ;
display: inline-block;
margin: 20px 20px 10px 0px;
}
img,p{
vertical-align: middle;
}
p{
display: inline-block;
margin-right: 50px;
}
body div{
border: 1px solid gray;
width:760px;
height:270px;
margin: 0 auto;
}
h3{
margin-left: 20px;
}
</style>
</head>
<body>
<div>
<h3>摄影社区热门小镇</h3>
<ul>
<li><img src="img/pic_01.jpg"/>
<p>风景狙击手<br />
成员：80<br />
作品：276
</p>
</li>
<li ><img src="img/pic_02.jpg"/>
<p>事感<br />
成员：235<br />
作品：116
</p>
</li>
<li style="margin-left:30px;"><img src="img/pic_03.jpg"/>
<p>定焦视界<br/>
成员：56<br />
作品：456
</p>
</li>
<li ><img src="img/pic_04.jpg"/>
<p>中国幅乐园<br/>
成员：130<br />
作品：239
</p>
</li>
<li><img src="img/pic_05.jpg"/>
<p>《卡啪》先锋..<br />
成员：78<br />
作品：125
</p>
</li>
<li><img src="img/pic_06.jpg"/>
<p>植物的无声世界<br/>
成员：235<br />
作品：1258
</p>
</li>
</ul>
</div>
</body>
</html>
4.制作名人名言页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>名人名言</title>
<style>
body div{
height: 1000px;
width: 1050px;
margin: 0 auto;
}
.text1{
border: 1px solid darkgray;
height: 100px;
width: 630px;
margin-top: 30px;
}
h2{
border: 1px solid darkgray;
width: 620px;
padding: 5px;
}
h1{
margin: 10px 10px 20px 30px;
}
.text2{
border: 1px solid darkgray;
width: 330px;
float: right;
padding: 40px 20px 40px 10px;
margin-top: 30px;
}
.text3{
width: 630px;
float: left;
}
.text4{
border: 1px solid darkgray;
width: 630px;
float: left;
margin-top:0px;
}
a{
text-decoration: none;
}
a:hover{
color: blue;
text-decoration: underline;
}
nav a{
border: 1px solid darkgray;
padding: 10px;
float: left;
}
ul li{
list-style: none;
}
</style>
</head>
<body>
<div>
<header style="border: 1px solid darkgrey; height: 130px;border-style: none none solid none; ">
<h1>名人名言</h1>
<em style="margin: 5px 10px 50px 30px;">分享名人名言，开始一段触动心灵的智慧之旅跳到内容 </em>
<nav>
<ul>
<li><a href="">登陆</a></li>
<li><a href="">关于</a></li>
<li><a href="">名人名言</a></li>
<li><a href="">英文名言(English)</a></li>
<li><a href="">心里杂志</a></li>
<li><a href="">心理书籍</a></li>
<li><a href="">专题活动</a></li>
<li><a href="">发表</a></li>
</ul>
</nav>
</header>
<article class="text3">
<div class="text1">
<h3><strong>心理学经典名言的智慧</strong></h3>
<p style="line-height: 20px;">洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥
香，它总是能给人们带来心灵的滋养。
</p>
</div>
<strong>
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去
实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现
的能力。
</strong>
<p>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去
实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现
的能力。<br />
发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论
</p>
<h2>作者简介</h2>
<strong>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人
生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣;
如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的
方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。
</strong>
<p>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人
生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；
如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的
方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。<br />
发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论
</p>
</article>
<section class="text2">
<em>赞助广告</em><br />
<img src="img/ad.jpg" />
<form method="post" action="">
<p>
<em>搜索</em><br />
<input type="search"placeholder="点击搜索" />
</p>
</form>
<em>标签</em><br />
<p style="line-height: 25px;font-style: italic; color: darkgray;">
<a href="">60年语录 </a> <a href="">《犯罪心理》</a> <a href="">世间百态</a> <a href="">二十四史传统名人</a>
<a href=""> 体育人物</a> <a href="">卡斯特罗</a> <a href="">卡斯特罗名言</a> <a href="">卡斯特罗语录</a>
<a href="">历史</a> <a href="">友谊爱情</a> <a href="">古代格言</a> <a href="">名人名言</a>
<a href="">名人随语</a> <a href="">教子立人</a> <a href="">新闻事件 </a> <a href="">李白</a>
<a href="">爱情语录 </a> <a href="">韩寒语录 </a>
</p>
</section>
<footer class="text4">
<p>
<em>赞助广告</em><br />
<img src="img/ad_2.jpg" />
</p>
</footer>
</div>
</body>
</html>
5.制作彩妆热卖产品页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彩妆热卖产品列表</title>
<style>
body, p, ul, li {
margin:0;
padding:0;
}
ul, li {
list-style-type:none;
background-color: white;
}
body{
background-color:pink;
font-size:12px;
width: 270px;
}
a{
text-decoration: none;
color:gray;
}
a span{
color:white;
font-weight:bold;
margin-right: 10px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: grey;
line-height: 20px;
text-align: center;
}
li{
border-bottom:1px gray dashed;
line-height:30px;
padding-left:2px;
}
.title{
font-size:14px;
font-weight:bold;
color:white;
background-color:red;
height:35px;
line-height:35px;
padding-left:10px;
}
li div{
display: none;
width:270px;
background-color:white;
text-align: center;
}
a:hover div{
display: block;
color:pink;
}
a:hover span{
background: pink;
}
a:hover strong{
color: pink;
}
</style>
</head>
<body>
<div id="cosmetics">
<p class="title">大家都喜欢的彩妆</p>
<ul>
<li><a href=""><span>1</span><strong>Za姬芮新能真皙美白隔离霜 35g</strong>
<div><img src="img/icon-1.jpg"alt="Za姬芮新能真皙美白隔离霜"/>
<p>￥62.0 最近69122人购买</p>
</div>
</a></li>
<li><a href=""><span>2</span><strong>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml</strong>
<div><img src="img/icon-2.jpg" alt="2 美宝莲精纯矿物奇妙新颜乳霜BB霜"/>
<p>￥89.00 最近13610人购买</p>
</div>
</a></li>
<li><a href=""><span>3</span><strong>菲奥娜水漾CC霜 40g </strong>
<div><img src="img/icon-3.jpg" alt="菲奥娜水漾CC霜" />
<p>￥59.90 最近13403人购买</p>
</div>
</a></li>
<li><a href=""><span>4</span><strong>DHC 蝶翠诗橄榄卸妆油 200ml</strong>
<div><img src="img/icon-4.jpg" alt="DHC 蝶翠诗橄榄卸妆油"/>
<p>￥169.00 最近16757人购买</p>
</div>
</a></li>
</ul>
</div>
</body>
</html>
