第一题：制作摄影社区热门小镇页面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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; } a b{ margin: 10px 50px 20px 10px; float: left; } b 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; } a b:nth-of-type(3){ margin-left: 48px; } </style> </head> <body> <div> <div style=" width: 750px;margin: 50px auto;"> <div style="border: 1px solid gray"> <p>摄影社区热门小镇</p> < a class="info" > <b style=""> <img src="../picture/pic_01.jpg" style="float: left"> <ul style="display: inline-block"> <li>风景狙击手</li> <li>成员：80</li> <li>作品：276</li> </ul> </b> <b > <img src="../picture/pic_02.jp" style="float: left"> <ul style="display: inline-block"> <li>叙事感</li> <li>成员：235</li> <li>作品：116</li> </ul> </b> <b > <img src="../picture/pic_03.jp" style="float: left"> <ul style="display: inline-block"> <li>定焦视界</li> <li>成员：56</li> <li>作品：456</li> </ul> </b> <b > <img src="../picture/pic_04.jpg" style="float: left"> <ul style="display: inline-block"> <li>中画幅乐园</li> <li>成员：130</li> <li>作品：239</li> </ul> </b> <b> <img src="../picture/pic_05.jp" style="float: left"> <ul style="display: inline-block"> <li>《卡啪》先锋...</li> <li>成员：78</li> <li>作品：125</li> </ul> </b> <b> <img src="../picture/pic_06.jp" style="float: left"> <ul style="display: inline-block"> <li>植物的无声世界</li> <li>成员：235</li> <li>作品：1258</li> </ul> </b> </a> </div> </div> </div> </body> </html>
第二题：制作名人名言页面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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 } #b{ width: 1200px;margin: 0px auto; } #c{ width: 1200px;height: 130px } </style> </head > <body id="b"> <header id="c"> <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/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/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> </html>
第三题：制作彩妆热卖产品列表页面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div,h1,ul { padding: 0px; margin: 0px; } h1{ font-size: 16px; font-weight: bold; color: #e4f1fa; background-color: #FF1493; text-indent: 1em; line-height: 30px; } div{ width:350px; border:1px #f3f4df solid; padding:0px 0px 10px 0px; background-color:white; } ul li{ font-size: 15px; list-style: none; border-bottom: 1px #666666 dashed; padding: 8px; } ul li a{ color: black; text-decoration: none; } ul li a:hover{ color: #FF1493; } ul li a span{ color:#FFF; font-weight:bold; margin-right:10px; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #373b3c; line-height: 20px; text-align: center; } </style> </head> <body> <div> <div> <h1>大家都喜欢的彩妆</h1> <ul> <li><a href="#"><span>1</span> Za姬芮新能真皙美白隔离霜 35g </a></li> <div><img src="../images/icon-1.jpg" alt="Za姬芮新能真皙美白隔离霜 35g"> <p>￥62.00 最近69122人购买</p> </div> <li><a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml </a></li> <div><img src="../images/icon-2.jpg" alt="美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml"> <p>￥89.00 最近13610人购买</p> </div> <li><a href="#"><span>3</span> 菲奥娜水漾CC霜40g </a></li> <div><img src="../images/icon-3.jpg" alt="菲奥娜水漾CC霜40g"> <p>￥59.90 最近13403人购买</p> </div> <li><a href="#"><span>4</span> DHC 蝶翠诗橄榄卸妆油 200ml </a></li> <div><img src="../images/icon-4.jpg" alt=" DHC 蝶翠诗橄榄卸妆油 200ml "> <p> ￥169.00 最近16757人购买</p> </div> </ul> </div> </div> </body> </html>