课后作业
清除浮动的方法有哪几种？分别如何实现？
1.给父元素div定义高度height
2. 结尾处加空div标签 clear:both
3. 父级div定义 伪类:after 和 zoom
4. 给div加上overflow：hidden-属性
使用display:inline-block或float布局页面有什么区别？需要注意什么？
display是设置这一个元素的显示方式，但是这不同的显示方式会有不同的排列方式
而float是设置元素的排列方式，这就需要看相邻的元素使用的样式优先权限
制作摄影社区热门小镇页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摄影社区热门小镇</title>
<style type="text/css">
#nav {
border: 1px solid #BDBDBD;
width: 725px;
}
h3 {
margin-bottom: 8px;
font-size: 16px;
margin-left: 10px;
margin-top: 10px;
font-weight: 600;
}
.div-box {
display: inline-block;
margin-right: 70px;
}
.div-box2{
display: inline-block;
margin-right: 20px;
}
.div-box3{
display: inline-block;
}
.login {
margin-left: 10px;
border: 1px solid #BDBDBD;
padding: 5px;
width: 60px;
height: 60px;
border-radius: 5px;
display: inline-block;
}
ul {
line-height: 20px;
padding-top: -5px;
margin-left: -30px;
list-style-type: none;
display: inline-block;
}
a {
color: #2E75BC;
text-decoration: none;
}
.li {
margin-top: 8px;
}
li {
margin-bottom: 2px;
font-size: 13px;
color: #BDBDBD;
}
</style>
</head>
<body>
<div id="nav">
<h3>摄影社区热门小镇</h3>
<div class="div-box">
<div class="login">
<img src="img/pic_01.jpg" />
</div>
<ul>
<span><a href="#">风景狙击手</a></span>
<li class="li">成员：80</li>
<li>作品：276</li>
</ul>
</div>
<div class="div-box">
<div class="login">
<img src="img/pic_02.jpg" />
</div>
<ul>
<span><a href="#">叙事感</a></span>
<li class="li">成员：235</li>
<li>作品：116</li>
</ul>
</div>
<div class="div-box">
<div class="login">
<img src="img/pic_03.jpg" />
</div>
<ul>
<span><a href="#">定焦视界</a></span>
<li class="li">成员：50</li>
<li>作品：456</li>
</ul>
</div>
<div class="div-box">
<div class="login">
<img src="img/pic_04.jpg" />
</div>
<ul>
<span><a href="#">中画幅乐园</a></span>
<li class="li">成员：130</li>
<li>作品：239</li>
</ul>
</div>
<div class="div-box2">
<div class="login">
<img src="img/pic_05.jpg" />
</div>
<ul>
<span><a href="#">《卡啪》先锋...</a></span>
<li class="li">成员：78</li>
<li>作品：125</li>
</ul>
</div>
<div class="div-box3">
<div class="login">
<img src="img/pic_06.jpg" />
</div>
<ul>
<span><a href="#">植物的无声世界</a></span>
<li class="li">成员：235</li>
<li>作品：1258</li>
</ul>
</div>
</div>
</body>
</html>
4.制作名人名言页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>名人名言</title>
<style type="text/css">
.div {
margin-left: 400px;
width: 1260px;
border-right: 1px solid #CFCFCF;
}
h2 {
margin-left: 65px;
margin-bottom: 10px;
}
em {
margin-left: 65px;
}
ul {
margin-left: 25px;
}
ul li {
margin-top: 15px;
display: inline-block;
list-style-type: none;
border: 1px solid #CFCFCF;
border-right: none;
border-bottom: none;
margin-right: -4px;
padding: 12px;
}
.li {
border-right: 1px solid #CFCFCF;
;
}
.div-box {
margin-top: 35px;
border: 1px solid #CFCFCF;
width: 580px;
margin-left: 45px;
height: 70px;
}
.h4 {
margin: 5px 0 2px 10px;
}
.span {
margin: 5px 0 0 10px;
font-size: 14px;
}
.div2 {
font-size: 14px;
margin-left: 45px;
margin-top: 10px;
line-height: 20px;
}
.div3 {
font-size: 14px;
margin-left: 45px;
margin-top: 5px;
}
.div-box2 {
padding-left: 10px;
border: 1px solid #CFCFCF;
width: 570px;
margin-left: 45px;
line-height: 1px;
}
.div-box4 {
padding-left: 10px;
padding-bottom: 10px;
padding-top: 15px;
border: 1px solid #CFCFCF;
width: 570px;
margin-left: 45px;
}
.em {
margin-left: 0px;
}
img {
margin-top: 10px;
display: block;
}
nav {
position:absolute;
top: 195px;
right: 400px;
}
.div-box5 {
width: 370px;
padding: 35px 0 25px 15px;
border: 1px solid #CFCFCF;
}
.img {
margin-bottom: 15px;
}
input {
display: block;
margin-top: 10px;
margin-bottom: 15px;
}
.div4 {
margin-left: 0px;
margin-top: 10px;
line-height: 25px;
color: #989898;
}
.div-box6{
width: 1200px;
padding-top:10px;
text-align: center;
margin-top: 35px;
border-top:1px solid #CFCFCF;
font-size: 14px;
color: gray;
}
.box{
width: 1200px;
border-top:1px solid #CFCFCF ;
margin-top: -15px;
}
</style>
</head>
<body>
<div class="div ">
<header>
<h2>名人名言</h2>
<em>分享名人名言，开始一段触动心灵的智慧之旅跳到内容</em>
<ul>
<li>登录</li>
<li>关于</li>
<li>名人名言</li>
<li>英文名言(English)</li>
<li>心理杂志</li>
<li>心理书籍</li>
<li>专题活动</li>
<li class="li">发表</li>
</ul>
</header>
<div class="box">
<article>
<div class="div-box">
<h4 class="h4">心理学经典名言的智慧</h4>
<span class="span">洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥</span><br /><span class="span">香，它总是能给人们带来心灵的滋养。</span>
</div>
<div class="div2"><strong>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去<br />实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现<br />的能力。 </strong></div>
<div class="div3">
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实<br />现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的<br />能力。<br /> 发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论
</div>
<div class="div-box2">
<h4>作者简介</h4>
</div>
<div class="div2">
<strong>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人<br />生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴<br />趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他<br />们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一<br />点。 </strong>
</div>
<div class="div3">
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人<br />生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴<br />趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他<br />们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一<br />点。
<br /> 发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论
</div>
<div class="div-box4">
<em class="em">赞助广告</em>
<img src="img/ad_2.jpg" />
</div>
</article>
<nav>
<div class="div-box5">
<em class="em">赞助广告</em>
<img src="img/ad.jpg" class="img" />
<em class="em">
搜索
</em>
<input type="search" placeholder="点击搜索" />
<em class="em">标签</em>
<div class="div4">
<em class="em">60年语录 《犯罪心理》 世间百态 二十四史传统<br />名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗<br />语录 历史 友谊爱情 古代格言 名人名言 名人随语<br /> 教子立人 新闻事件 李白 爱情语录 韩寒语录 </em>
</div>
</div>
</nav>
</div>
<footer>
<div class="div-box6">
©All Rights Reserved by Psytopic. 来自Psytopic.com的礼物
</div>
</footer>
</div>
</body>
</html>
制作彩妆热卖产品列表页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彩妆热卖产品列表</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body{
background: #EEE7E1;
}
.nav {
background: white;
width: 325px;
}
.title {
font-weight: 600;
font-family: "微软雅黑";
font-size: 16px;
background: #E9185A;
line-height: 40px;
padding-left: 12px;
height: 40px;
color: white;
}
ul li {
list-style-type: none;
}
a {
text-decoration: none;
font-family: "微软雅黑";
font-size: 14px;
color: gray;
}
li {
margin-top: 5px;
border-bottom: 1px dashed gray;
line-height: 30px;
}
span {
font-size: 14px;
font-family: "微软雅黑";
color: white;
font-weight: bold;
display: inline-block;
margin-right: 10px;
margin-left: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #373B3C;
line-height: 20px;
text-align: center;
}
.nav li div {
display: none;
text-align: center;
}
.nav a:hover div {
display: block;
}
a:hover {
color: #E9185A;
}
a:hover span {
background: #E9185A;
}
</style>
</head>
<body>
<div class="nav">
<p class="title">大家都喜欢的彩妆</p>
<ul>
<li>
<a href="#">
<span>1</span>Za姬芮新能真皙美白隔离霜 35g
<div>
<img src="img/icon-1.jpg" alt="1 Za姬芮新能真皙美白隔离霜 35g " />
<p>￥62.00 最近69122人购买</p>
</div>
</a>
</li>
<li>
<a href="#">
<span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
<div>
<img src="img/icon-2.jpg" alt="美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml " />
<p>￥89.00 最近13610人购买</p>
</div>
</a>
</li>
<li>
<a href="#">
<span>3</span>菲奥娜水漾CC霜40g
<div>
<img src="img/icon-3.jpg" alt="菲奥娜水漾CC霜40g " />
<p>￥59.90 最近13403人购买</p>
</div>
</a>
</li>
<li>
<a href="#">
<span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml
<div>
<img src="img/icon-4.jpg" alt="DHC 蝶翠诗橄榄卸妆油 200ml " />
<p>￥169.00 最近16757人购买</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>