1，
制作摄影社区热门小镇页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摄影社区热门小镇</title>
<style>
*{padding: 0px;margin: 0px}
p{
margin: 10px 10px;
font-size: 15px;
color: #4F5153;
}
div:after{
content: "";
display: block;
clear: both;
}
img{
border: 3px solid #E0E0E8;
}
dl dd{
margin: 10px 50px 20px 10px;
float: left;
}
dd ul{
margin-left: 15px;
font-size: 12px;
color: gray;
}
ul li{
list-style-type: none;
}
ul li:first-of-type{
font-size: 14px;
color: #4987C5;
margin-bottom: 6px;
}
dl dd:nth-of-type(3){
margin-left: 48px;
}
</style>
</head>
<body>
<div style=" width: 750px;margin: 50px auto;">
<div style="border: 1px solid gray">
<p>摄影社区热门小镇</p>
<dl class="info" >
<dd style="">
<img src="images/homework3/pic_01.jpg" style="float: left">
<ul style="display: inline-block">
<li>风景狙击手</li>
<li>成员：80</li>
<li>作品：276</li>
</ul>
</dd>
<dd >
<img src="images/homework3/pic_02.jpg" style="float: left">
<ul style="display: inline-block">
<li>叙事感</li>
<li>成员：235</li>
<li>作品：116</li>
</ul>
</dd>
<dd >
<img src="images/homework3/pic_03.jpg" style="float: left">
<ul style="display: inline-block">
<li>定焦视界</li>
<li>成员：56</li>
<li>作品：456</li>
</ul>
</dd>
<dd >
<img src="images/homework3/pic_04.jpg" style="float: left">
<ul style="display: inline-block">
<li>中画幅乐园</li>
<li>成员：130</li>
<li>作品：239</li>
</ul>
</dd>
<dd>
<img src="images/homework3/pic_05.jpg" style="float: left">
<ul style="display: inline-block">
<li>《卡啪》先锋...</li>
<li>成员：78</li>
<li>作品：125</li>
</ul>
</dd>
<dd>
<img src="images/homework3/pic_06.jpg" style="float: left">
<ul style="display: inline-block">
<li>植物的无声世界</li>
<li>成员：235</li>
<li>作品：1258</li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>名人名言</title>
<style>
body{font-size: 14px}
ul li{
float: left;
border-left: gray solid 1.0px;
border-top: gray solid 1.0px;
list-style-type: none;
padding: 5px;
}
h1{
font-size: 24px;
}
em{
font-size: 14px;
}
a{text-decoration: none;color: gray}
</style>
</head>
<body style="width: 1200px;margin: 0px auto;">
<header style="width: 1200px;height: 130px">
<h1>名人名言</h1>
<p><em>分享名人名言，开始一段触动心灵的智慧之旅跳到内容</em></p>
<ul style="height: 20px;padding-left: 0px">
<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 style="border-right:1px solid gray "><a href="#">发表</a></li>
</ul>
<div style="width: 1300px;margin: -5px -50px;border-top:1px solid gray "></div>
</header>
<section style="width: 1200px;height: 735px">
<div style="width: 560px;display: inline-block">
<p style="width: 550px;border: 1px solid gray;padding:5px 5px">
<span>心理学经典名言的智慧</span><br/>
洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。
</p>
<p style="line-height: 25px;font-weight: bold;width: 550px">
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创
造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。
</p>
<p style="line-height: 25px;width: 550px;margin-bottom: 0px">
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创
造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。<br>
发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论
</p>
<div style="width: 550px;border: 1px solid gray;padding: 5px">
<span style="font-size:16px;font-weight: bold ">作者简介</span>
</div>
<p style="line-height: 25px;font-weight: bold;width: 550px">
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到
不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张
起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个
人交流时证实这一点。
</p>
<p style="line-height: 25px;width: 550px;margin-bottom: 0px">
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到
不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张
起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个
人交流时证实这一点。<br>
发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论
</p>
<div style="border: 1px solid gray">
<p>赞助广告</p>
<img src="images/homework4/ad_2.jpg" >
</div>
</div>
<div style="width:350px;height: 500px;float: right;margin-right:150px ">
<div style="border: 1px solid gray;font-size: 16px;margin:0px 0px 0px 20px;padding: 20px">
<p><em>赞助广告</em></p>
<div><img src="images/homework4/ad.jpg"></div>
<p><em>搜索</em></p>
<div><input type="search" placeholder="点击搜索"></div>
<p><em>标签</em></p>
<p style="color: gray;width: 300px"><em>60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录
历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录 </em></p>
</div>
</div>
</section>
<footer style="text-align: center;margin-top: 20px">
<div style="border-bottom: 1px gray solid;width: 1300px;margin: -5px -50px;"></div>
<p>
©All Rignts Reserved by Psytopic.来自Psytopic.com的礼物
</p>
</footer>
</body>
3，制作彩妆热卖页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彩妆热卖产品列表</title>
<style>
ul{
list-style: none;border: 1px solid gray;
border-bottom: none;
}
ul li .a{display: none;}
ul a:hover .a{display: block;}
div{padding: 10px;font-size: 20px;margin: 0px auto;}
span{background: #333333;border-radius: 50%;color: white;
width: 20px;height: 20px;display: inline-block;text-align: center;
}
a:hover{color: red;}
a{text-decoration: none}
li{border-bottom: dashed;color: #333333;margin: 0px;}
</style>
</head>
<body>
<div style="width: 330px;height:30px;background: black;color: white;">
大家都喜欢买的美容品
</div>
<ul style="width: 350px;height: 171px;background: white;margin: 0 auto;padding: 0px;">
<li style="padding: 10px;">
<span>1</span>
<a href="">Za姬芮新能真皙美白隔离霜 35g
<div class="a"><img src="../案列七picture/c1.jpg"/>
<p>￥62.00 最近69122人购买</p>
</div>
</a>
</li>
<li style="padding: 10px;"><span>2</span>
<a href="">美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
<div class="a"><img src="../案列七picture/c1.jpg"/>
<p>￥89.00 最近13610人购买</p>
</div>
</a>
</li>
<li style="padding: 10px;"><span>3</span>
<a href="">菲奥娜水漾CC霜 40g
<div class="a"><img src="../案列七picture/c2.jpg"/>
<p>￥59.90 最近13403人购买</p>
</div>
</a>
</li>
<li style="padding: 10px;"><span>4</span>
<a href="">DHC 蝶翠诗橄榄卸妆油 200ml
<div class="a"><img src="../案列七picture/c3.jpg"/>
<p>￥169.00 最近16757人购买</p>
</div>
</a>
</li>
</ul>
</body>
</html>