课上1
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>QQ会员页面导航</title> <style> #father{ background: gray; width:1120px; height:72px ; } #logo{ display: inline-block; width:112px; height:72px; margin-left: 50px; } img { vertical-align: middle; } #list{ display: inline-block; width:660px; } nav{ padding-left: 60px; } a{ font-size: 14px; color:white; text-decoration: none; margin-right: 25px; } a:hover{ color:blue; } #login{ display: inline-block; width:220px ; margin-left: 23px; } .a1{ width:80px; height:30px; border:1px #f1ff66 solid; border-radius: 20px; background: gray; display: inline-block; line-height:30px ; text-align: center; padding-top: 2px; font-size: 14px; color:#f1ff66; text-decoration: none; margin: 0; } .a1:hover{ color:orange; } .a2{ width:120px; height:30px; border:1px #f1ff66 solid; border-radius: 20px; background: #f1ff66; display: inline-block; line-height:30px ; text-align: center; padding-top: 2px; font-size: 14px; font-weight: bold; color: #c6802b; text-decoration: none; margin-right: 0; } .a2:hover{ color:#A50713; } </style> </head> <body> <header> <div id="father"> <div id="logo"><img src="image/logo.png" width="116px" height="72px"/></div> <div id="list"> <nav> <a href="">功能特权</a> <a href="">游戏特权</a> <a href="">生活特权</a> <a href="">会员活动</a> <a href="">成长体系</a> <a href="">年费专区</a> <a href="">超级会员</a> </nav> </div> <div id="login"> <a class="a1" href="">登录</a> <a class="a2" href="">开通超级会员</a> </div> </div> </header> </body> </html>
课上2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>热门活动</title> <style> body{ padding-top:15px; width:700px; margin: 0 auto; } .title{ font-size:20px; font-weight: bold; float: left; } .more{ color:gray; float: right; font-size:19px; font-weight: bold; } .x { padding-top: 35px; } li{ list-style: none; font-size: 12px; } .l1{ float: left; } .l2{ float: left; padding-left: 40px; display: inline-block; } .l3{ float: left; padding-top: 25px; } .l4{ float: left; padding-left: 40px; display: inline-block; padding-top: 25px; } </style> </head> <body> <div> <div class="title">热门活动</div> <div class="more">更多</div> <div class="x"> <ul> <li class="l1"> <img src="image/img1.png" alt="图片1" title="图片1"/><br/>推荐活动 | 原创音乐现金榜T榜 </li> <li class="l2"> <img src="image/img2.png" alt="图片2" title="图片2"/><br/>推荐节目|《TAImusic》爆笑来袭 </li> <li class="l3"> <img src="image/img3.png" alt="图片3" title="图片3"/><br/>推荐歌单 | 继续宠爱张国荣 </li> <li class="l4"> <img src="image/img4.png" alt="图片4" title="图片4"/><br/>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间 </li> </ul> </div> </div> </body> </html>
课上3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>电视剧详情列表</title> <style> body{ padding-top:15px; width:350px; margin: 0 auto; } .c1{ background: url("image/1.gif") 10px no-repeat; padding-left:38px; font-size: 12px; font-weight: bold; border:1px #A4FFF3 solid; height:27px; line-height:27px; margin-bottom: 20px; } .c2{ float:left; border:1px #A4FFF3 solid; padding: 2px; } .c3{ float: left; font-size: 13px; font-weight: bold; margin-left: 5px; margin-top: 15px; } .c4{ color:#55565F; float: left; font-size: 13px; margin-left: 5px; margin-top: 12px; width: 220px; border:1px white solid; line-height: 26px; } li{ list-style: none; font-size: 13px; } .c5{ float: left; padding: 1px; } .c6{ float: right; } .c5 a{ text-decoration: none; color:#55565F; } .c6 a{ color:gray; text-decoration: none; } a:hover { text-decoration: underline; color: blue; } </style> </head> <body> <header> <div class="c1">明星荐片</div> </header> <section> <div class="c2"><img src="image/3.gif"/></div> <div class="c3">周秀娜荐片:让子弹飞</div> <div class="c4"> 导演：姜文<br/> 主演：姜文 周润发 葛优<br/> 点评：我最喜欢的要算《让子弹飞》了,超喜欢...[详情] </div> <ul class="c5"> <li><a href="">《巴别塔》：好的故事引人深思</a><br/><br/></li> <li><a href="">《洛杉矶之战》：外星人那么弱智？</a><br/><br/></li> <li><a href="">《让子弹飞》：武侠里也可以有爱情</a><br/><br/></li> <li><a href="">《剑雨》：好的故事引人深思</a><br/><br/></li> <li><a href="">《春风沉醉的夜晚》：非常真实</a><br/><br/></li> <li><a href="">《克洛伊》：故事简单却细致</a></li> </ul> <ul class="c6"> <li><a href=""> 阿朵</a><br/><br/></li> <li><a href="">丁子俊</a><br/><br/></li> <li><a href="">周秀娜</a><br/><br/></li> <li><a href="">叶年生</a><br/><br/></li> <li><a href="">如小果</a><br/><br/></li> <li><a href="">刘若英</a></li> </ul> </section> </body> </html>
课上4
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>京东登录页</title> <style> header div{ background: url("image/logo2.png") 180px no-repeat; padding-left:370px; font-size: 24px; height:80px; line-height:80px; color: #55565F; } .content{ background-color: #e93650; } .wrap{ width: 990px; margin: 0 auto; } .login-box{ background: url("image/banner.png") no-repeat; height:475px; } h2{ color:gray; font-size: 21px; padding-left:20px; line-height: 20px; height:20px; margin-top: 24px; margin-bottom: 0; font-weight: 400; } h2 a{ background: url("image/icon5.jpg") 10px no-repeat; float: right; width:80px; padding-left:30px; color: #e9063c; font-size: 14px; height:18px; line-height: 18px; } .login-form{ width:340px; height:273px; border:1px #A4FFF3 solid; float:right; margin-top: 40px; background: white; } #loginForm{ padding:30px 0; } .f1{ height: 38px; border:1px rgba(163, 163, 163, 0.56) solid; float: left; padding: 0 ; margin-bottom: 0; margin-left: 20px; } .f2{ height: 38px; border:1px rgba(163, 163, 163, 0.56) solid; float: left; padding: 0 ; margin-top: 0; margin-left: 20px; } .kong{ height: 25px; } #name,#pwd { border-left: none; height:32px; padding:3px 0 ; float: left; border-bottom:1px rgba(163, 163, 163, 0.56) solid; border-top:1px rgba(163, 163, 163, 0.56) solid; border-right:1px rgba(163, 163, 163, 0.56) solid; width:260px; color: gray; font-size:14px ; } .kong2{ margin-top: 60px; width: 300px; margin-left: 20px; padding-top: 10px; height: 20px; } #auto-login{ float:left; height: 20px; } p span:nth-of-type(1){ font-size: 12px; color:gray; height: 20px; line-height: 20px; } p span:nth-of-type(2){ display:inline-block; float:right; font-size: 12px; height: 20px; line-height: 20px; } #submit{ background-color: #f03c3d; color:white; width: 300px; text-align: center; height: 35px; line-height: 30px; font-size: 17px; margin-left: 20px; border:1px white solid; } footer{ text-align: center; color:gray; font-size: 12px; } a{ color:gray; text-decoration: none; } a:hover{ text-decoration:underline; color:red; } </style> </head> <body> <header> <div>欢迎登录</div> </header> <article class="content"> <div class="wrap"> <div class="login-box"> <div class="login-form"> <h2>京东会员<a href="">立即注册</a></h2> <form action="" method="post" id="loginForm"> <div class="f1"><input type="image" src="image/icon1.jpg"></div> <input name="name" placeholder=" 邮箱/用户名/已验证手机" type="text" id="name"> <p class="kong"></p> <div class="f2"><input type="image" src="image/icon2.jpg"></div> <input name="pwd" type="password" id="pwd"> <p class="kong2"> <input type="checkbox" name="auto-login" id="auto-login"><span>自动登录</span> <span><a href="">忘记密码?</a></span> </p> <input type="submit" id="submit" name="submit" value="登 录"> </form> </div> </div> </div> </article> <footer> <div> <p><a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">人才招聘</a> | <a href="">商家入驻</a> | <a href="">广告服务</a> | <a href="">手机京东</a> | <a href="">友情链接</a> | <a href="">销售联盟</a> | <a href="">京东社区</a> | <a href="">京东公益</a> | <a href="">English Site</a></p> <p>Copyright©2004-2017 京东JD.com 版权所有</p> </div> </footer> </body> </html>
课后3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>摄影社区热门小镇</title> <style> body{ width:760px; height: 230px; margin: 50px auto; border:1px #A4FFF3 solid; } .title{ color:#656565; font-size: 14px; font-weight: bold; width:120px; margin: 10px; } li{ list-style: none; width:240px; float: left; margin-top: 10px; } span{ border:1px #A4FFF3 solid; float: left; border-radius: 4px; padding: 3px 3px 0; } p{ float: left; margin-top: 0; margin-left: 10px; color:grey; font-size: 13px; line-height: 20px; } a{ color:deepskyblue; text-decoration: none; font-size: 14px; line-height: 27px; } a:hover{ text-decoration: none; color:red; } </style> </head> <body> <div class="title">摄影社区热门小镇</div> <div class="content"> <ul> <li> <span><img src="image/pic_01.jpg"/></span> <p> <a href="">风景狙击手</a><br/> 成员：80<br/> 作品：276 </p> </li> <li> <span><img src="image/pic_02.jpg"/></span> <p> <a href="">叙事感</a><br/> 成员：235<br/> 作品：116</p> </li> <li> <span><img src="image/pic_03.jpg"/></span> <p> <a href="">定焦视界</a><br/> 成员：56<br/> 作品：456 </p> </li> <li> <span><img src="image/pic_04.jpg"/></span> <p> <a href="">中画幅乐园</a><br/> 成员：130<br/> 作品：239 </p> </li> <li> <span><img src="image/pic_05.jpg"/></span> <p> <a href="">《卡啪》先锋...</a><br/> 成员：78<br/> 作品：125 </p> </li> <li> <span><img src="image/pic_06.jpg"/></span> <p> <a href="">植物的无声世界</a><br/> 成员：235<br/> 作品：1258 </p> </li> </ul> </div> </body> </html>
课后4
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>名人名言</title> <style> body{ padding-top:15px; width:910px; margin: 0 auto; } .c1{ font-size: 30px; font-weight: bolder; margin-bottom: 10px; padding-left:40px; } .c2{ font-size: 12px; font-style: italic; color: grey; padding-left:40px; } ul{ margin-top: 25px; height: 36px; border-bottom:1px #bfc5be solid; } li{ list-style: none; float:left; border-top:1px #bfc5be solid; border-left:1px #bfc5be solid; width: 45px; height: 35px; text-align: center; font-size: 12px; line-height: 35px; } li:last-child{ border-right:1px #bfc5be solid; } a{ text-decoration: none; color: grey; } a:hover{ text-decoration: underline; color:red; } .l1{ width: 45px; } .l2 { width: 70px; } .l3 { width: 110px; } .p1{ width:480px; font-size: 16px; color:#212121; font-weight: bold; margin-top: 5px; margin-bottom: 0; margin-right: 0; padding-top: 0; padding-right:0; } .p2{ width:480px; font-size: 12px; color: #636363; margin-top: 0; margin-bottom:5px; padding-bottom: 0; padding-right:0; margin-right: 0; } .c3{ width:482px; border:1px #bfc5be solid; margin-left: 25px; padding-left: 10px; padding-right:0; margin-right:0; } .p3{ width:500px; font-size: 12px; color: #212121; font-weight: bold; margin-bottom: 0; line-height:20px; padding-left: 25px; } .p4{ width:500px; font-size: 12px; color: #636363; margin: 0; padding-left: 25px; } .c5{ width:474px; font-size: 16px; border:1px #bfc5be solid; color:#212121; padding: 6px 10px; margin-left:25px; font-weight: bold; } .p5{ width:500px; font-size: 12px; color: #212121; font-weight: bold; margin: 0; line-height:20px; padding-left: 25px; } .p6{ width:500px; font-size: 12px; color: #636363; margin: 0; padding-left: 25px; } .c7{ width:484px; font-size: 14px; border:1px #bfc5be solid; font-style: italic; color: black; line-height: 35px; margin-left:25px; padding-left: 10px; padding-bottom: 0; padding-top: 6px; margin-bottom: 30px; } .c8{ font-size: 14px; font-style: italic; color: black; line-height: 30px; margin-left:15px; padding-left: 0; padding-bottom: 0; padding-top: 18px; margin-bottom: 0; width:250px; } .s9{ width:258px; font-size: 12px; color: gray; margin-left:15px; margin-bottom: 0; padding-left: 0; font-style: italic; line-height: 18px; } .left{ float: left; margin-top: 15px; } .right{ float: right; border:1px #bfc5be solid; width:295px; margin-top: 15px; height: 440px; margin-right: 28px; } footer{ border-top:1px #bfc5be solid; text-align: center; color:gray; font-size: 12px; display: block; float: right; width:900px; } </style> </head> <body> <header> <div class="c1">名人名言</div> <div class="c2">分享名人名言，开始一段触动心灵的智慧之旅跳到内容</div> <div class="menu"> <nav> <ul> <li class="l1"><a href="">登录</a></li> <li class="l1"><a href="">关于</a></li> <li class="l2"><a href="">名人名言</a></li> <li class="l3"><a href="">英文名言(English)</a></li> <li class="l2"><a href="">心理杂志</a></li> <li class="l2"><a href="">心理书籍</a></li> <li class="l2"><a href="">专题活动</a></li> <li class="l1"><a href="">发表</a></li> </ul> </nav> </div> </header> <article> <div class="left"> <div class="c3"> <p class="p1">心理学经典名言的智慧</p> <p class="p2">洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。</p> </div> <div class="c4"> <p class="p3"> 创造力(creativity)有两个词根：Crera拉丁语的意思是"去创造"。Krainir希腊语的意思是"去实现"。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。 </p> <p class="p4"> 创造力(creativity)有两个词根：Crera拉丁语的意思是"去创造"。Krainir希腊语的意思是"去实现"。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。</br> 发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论 </p> </div> <div class="c5"> 作者简介 </div> <div class="c6"> <p class="p5">如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</p> <p class="p6"> 如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</br> 发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论 </p> </div> <div class="c7"> 赞助广告</br> <img src="image/ad_2.jpg"/> </div> </div> <div class="right"> <div class="c8"> 赞助广告<br> <img src="image/ad.jpg" width="200px" height="200px"/><br> 搜索 <form method="post" action=""> <input name="name" type="search" placeholder="点击搜索"> </form> 标签 </div> <div class="s9"> 60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录 历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录 </div> </div> </article> <footer> <p>©All Rights Reserved by Psytopic.来自Psytopic.com的礼物</p> </footer> </body> </html>
课后5
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>彩妆热卖产品列表</title> <style> p, ul, li { margin:0; padding:0; } ul, li { list-style-type:none; } body { background-color:#eee7e1; font-size:12px; } #beauty { width:260px; background-color:#FFF; } .title { font-size:14px; font-weight:bold; color:#FFF; background-color:#e9185a; height:35px; line-height:35px; padding-left:10px; } #beauty li { border-bottom:1px #a8a5a5 dashed; padding:5px 2px; } #beauty a { color:#666666; text-decoration:none; } #beauty a:hover { color:#e9185a; } #beauty 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; } #beauty a:hover span { background: #e9185a; } #beauty li div{ display: none; text-align: center; } #beauty a:hover div{ display: block; } </style> </head> <body> <div id="beauty"> <p class="title">大家都喜欢的彩妆</p> <ul> <li> <a href="#"><span>1</span>Za姬芮新能真皙美白隔离霜 35g <div><img src="image/icon-1.jpg"/> <p>￥62.00 最近69122人购买</p> </div></a> </li> <li> <a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml <div><img src="image/icon-2.jpg"/> <p>￥89.00 最近13610人购买</p> </div></a> </li> <li> <a href="#"><span>3</span>菲奥娜水漾CC霜40g <div><img src="image/icon-3.jpg"/> <p>￥59.90 最近13403人购买</p> </div></a> </li> <li> <a href="#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml <div><img src="image/icon-4.jpg"/> <p>￥169.00 最近16757人购买</p> </div></a> </li> </ul> </div> </body> </html>
仅供参考（作者不负任何责任）