1，制作摄影社区热门小镇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摄影社区热门小镇</title>
<style>
div{
width: 800px;
border: 1px solid grey;
margin: auto;
margin-top: 40px;
}
li{
list-style: none;
font-size: 14px;
}
.wo{
color: #00c3ff;
font-size: 16px;
}
.no{
margin-left: -30px;
}
</style>
</head>
<body>
<div>
<h4 style="text-indent: 2.5em">摄影社区热门小镇</h4>
<ul style="display:inline-block"><img src="imgs2/pic_01.jpg"/></ul>
<ul style="display:inline-block" class="no">
<li class="wo">风景狙击手</li>
<li>成员：80</li>
<li>作品：276</li>
</ul>
<ul style="display:inline-block"><img src="imgs2/pic_02.jpg"/></ul>
<ul style="display:inline-block" class="no">
<li class="wo">叙事感</li>
<li>成员：235</li>
<li>作品：116</li>
</ul>
<span style="margin-left: 40px">
<ul style="display:inline-block"><img src="imgs2/pic_03.jpg"/></ul>
<ul style="display:inline-block" class="no">
<li class="wo">定焦视界</li>
<li>成员：56</li>
<li>作品：456</li>
</ul>
</span>
<br/>
<ul style="display:inline-block"><img src="imgs2/pic_04.jpg"/></ul>
<ul style="display:inline-block" class="no">
<li class="wo">中画幅乐园</li>
<li>成员：130</li>
<li>作品：239</li>
</ul>
<ul style="display:inline-block"><img src="imgs2/pic_05.jpg"/></ul>
<ul style="display:inline-block" class="no">
<li class="wo">《卡啪》先锋...</li>
<li>成员：78</li>
<li>作品：125</li>
</ul>
<ul style="display:inline-block"><img src="imgs2/pic_06.jpg"/></ul>
<ul style="display:inline-block" class="no">
<li class="wo">植物的无声世界</li>
<li>成员：235</li>
<li>作品：1258</li>
</ul>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>名人名言</title>
<style>
li{
display: inline-block;
border: 1px solid grey;
margin: 0px 1.3px -0.9px -6px;
padding: 4px;
}
.ni{
padding: 6px;
margin-left: 20px;
}
.no{margin-left: 20px;}
p{
font-size: 12px;
}
.bo{
width: 300px;
border: 1px solid;
padding: 10px;
position: absolute;
left: 600px;
top: 153px;
}
</style>
</head>
<body>
<header>
<h3 style="text-indent: 2em">名人名言</h3>
<p style="font-size: 12px;text-indent: 3em;font-style: italic">分享名人名言,开始一段触动心灵的智慧之旅跳到内容</p>
<ul style="display: inline-block;border-bottom: 1px solid;width:900px">
<li>登录</li>
<li>关于</li>
<li>名人名言</li>
<li>英文名言(English)</li>
<li>心理杂志</li>
<li>心理书籍</li>
<li>专题活动</li>
<li>发表</li>
</ul>
</header>
<section>
<div style="width: 500px;font-size: 12px;border: 1px solid"class="ni">
<span style="font-weight: bold;font-size: 14px">
心理学经典名言的智慧
</span><br/>
洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。
</div>
<div style="width: 500px" class="no">
<p style="font-weight: bold;">
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。
</p>
<p >
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。
</p>
<p>发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</p>
</div>
<div style="width: 500px;font-weight: bolder;border: 1px solid" class="ni">作者简介</div>
<div style="width: 500px" class="no">
<p style="font-weight: bold;">
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。 </p>
<p >
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。 </p>
<p>发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</p>
</div>
<div style="width: 500px;border: 1px solid"class="ni">
<p style="font-style: italic">赞助广告</p>
<img src="imgs3/ad_2.jpg">
</div>
<div class="bo">
<p style="font-style: italic">赞助广告</p>
<img src="imgs3/ad.jpg">
<p style="font-style: italic">搜索</p>
<input type="text"value="点击搜索"/>
<p style="font-style: italic">标签</p>
<p style="font-style: italic">
60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录 历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录
</p>
</div>
</section>
<footer style="border-top: 1px solid;margin-top: 50px;width: 900px">
</footer>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彩妆热卖产品列表</title>
<style>
span{
width: 20px;
height: 20px;
background: black;
border-radius: 50%;
display: inline-block;
text-align: center;
color: white;
}
li{
margin: 6px 0px 6px 0px;
padding: 6px 0px 6px 0px;
width: 330px;
list-style: none;
border-bottom: 1.3px dashed black ;height: 25px;
}
a{text-decoration: none;
color: rgba(0, 0, 0, 0.37);
}
a:hover{
color:#e9185a;
}
a:hover span{
background: #e9185a;
}
a:hover div{
display: block;
border: 1px dashed grey;
}
li div{
display: none;
text-align: center;
}
.duan{
width: 320px;height: 30px;background: #ff0b4f;color: white;font-weight: bold;padding-left: 13px;padding-top: 8px;
position: relative;
left: 37px;
}
</style>
</head>
<body>
<div style="width: 320px;background: white;">
<p class="duan">大家都喜欢的彩妆</p>
<ul>
<li >
<a href="#">
<span>1</span>
Za姬芮新能真皙美白隔离霜 35g
<div>
<img src="imgs4/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="imgs4/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="imgs4/icon-3.jpg" alt="菲奥娜水漾CC霜40g"/>
<p>￥59.90 最近13403人购买</p>
</div>
</a>
</li>
<li>
<a href="#">
<span>3</span>DHC 蝶翠诗橄榄卸妆油 200ml
<div >
<img src="imgs4/icon-4.jpg" alt="DHC 蝶翠诗橄榄卸妆油 200ml "/>
<p>￥169.00 最近16757人购买</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>