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