上机1
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>百度音乐标签页面</title> ???<link href="css/上机练习1.css" rel="stylesheet" type="text/css"/></head><body><h2>全部歌手</h2><p><span>A</span> A Fine Frenzy ?Air Supply ?Akon ?Alan Silvestri ??Apink ?安又琪 ?安在旭 ?安室奈美惠</p><p><span>B</span> Babyface ?Backstreet .. ??Bandari ?Barbra Streisand ?Basshunter ?Bee Gees ??北京天使合唱团 ?宝儿 ?宝宝的音乐花园 ?巴哈尔古丽 ?巴桑 ?布仁巴雅尔</p><p><span>C</span> Chris Garneau ?Christina Aguilera ?Christina Perri ??草原兄妹 ??蔡卓妍 ?蔡国庆 ??陈雅森 ?陈雷 ?陈韵若</p><p><span>D</span> Darby Devon ?Darren ?Darren Hayes ?Daughtry ?David Archuleta ??Dido ??东城卫 ?东方传奇 ??刀郎 ??刁寒 ?动力火车 ??邓丽欣</p><p><span>E</span> Emmylou Harris ?Enigma ?Ennio Morricone ??Eric Clapton ??eminem ?二手玫瑰 ?二胡 ?额尔古纳乐队</p><p><span>F</span> Fergie ?Finger eleven ?Flo Rida ?Florence + The M.. ??付笛声 ?付辛博 ?佛涯组合 ??凤凰传奇 ??飞儿乐团</p><p><span>G</span> Gretchen Wilson ?Greyson Chance ?Groove Coverage ?关牧村 ?关菊英 ?古天乐 ?古巨基 ?龚琳娜 ?龚诗嘉</p><p><span>H</span> High School Music.. ?Hilary Duff ?>Hit-5 ?Hollywood Undead ?Hope组合 ?胡松华 ?胡歌 ?黄宗泽 ?黄家驹 ?黄晓明 ??黑鸭子 ?黑龙</p><p><span>I</span> I Me ?IU ?Icona Pop ?Il Divo ?Imagine Dragons ?Infinite ?Ingrid Michaelson ?Isgaard</p><p><span>J</span> Janet Jackson ?Jason Chen ?Jason Derulo ?Jason Mraz ?Jason Wade ?吉杰 ?吉田亚纪子 ?蒋大为 ?蒋蒋 ?蒋雪儿 ?解小东 ?酒井法子</p><p><span>K</span> Kimberley ?Kiss组合 ?kanye west ?katie melua ?柯有伦 ?柯有纶 ?柯震东 ?筷子兄弟</p><p><span>L</span> Lana Del Rey ?Led Zeppelin ?Lee Ssang ?Lene Marlin ?刘德华 ??刘德海 ?李克勤 ??李双江 ?林忆莲 ??林志炫 ??林志玲</p><p><span>M</span> MC Hotdog ?Michael Bolton ?Michael Buble ?Michael Jackson ?孟非 ?麦田守望者 ?麻吉</p><p><span>N</span> Nat King Cole ?Natasha Bedingfield ?Naughty Boy ?牛朝阳 ?牛牛 ?那英</p><p><span>O</span> Oasis ?Oceanlab ?Olivia Ong ?Olly Murs ?欧得洋 ?欧阳菲菲</p><p><span>P</span> Pharrell ?Phil Collins ?Phillip Phillips ?彭芳 ?彭野新儿歌 ?潘长江 ?蒲提</p><p><span>Q</span> 邱泽 ?青山 ?青山黛玛 ?青春美少女 ?青蛙乐队 ?青鸟飞鱼</p><p><span>R</span> Rammstein ?Ray Charles ?Red Hot Chili Pep.. ?Regina Spektor ??容祖儿 ?容韵琳 ?荣联合 ?饶天亮</p><p><span>S</span> Sara Bareilles ?Sarah Brightman ?Sarah Connor ?Something Corpor.. ?Sophie Zelmani ?司徒兰芳 ?少女时代 ?少女时代-太蒂徐 ?尚雯婕</p><p><span>T</span> Tears For Fears ?The Band Perry ?The Beatles ?The Black Eyed P.. ?The Cardigans ?谭杰希 ?谭欣懿 ?谭维维 ?谭耀文 ?陶钰玉</p><p><span>U</span> UVERworld ?Usher ?u2</p><p><span>V</span> Vanessa Carlton ?Vangelis ?Various Artists ?Vitas ?Vonda Shepard</p><p><span>W</span> Willie Nelson ?Within Temptation ?Wiz Khalifa ?Wolfgang Amadeu.. ?Wonder Girls ?王菲 ??王蓉 ?王蓝茵</p><p><span>X</span> 徐子崴 ?徐小凤 ?徐小明 ?徐怀钰 ?徐洁儿 ?谢娜</p><p><span>Y</span> Yann Tiersen ?Yanni ?余文乐 ?俞丽拿 ?俞灏明 ?音乐磁场 ?颜小健 ?颜羽</p><p><span>Z</span> Zaho ?Zard ?中国好声音学员 ?赵本山 ?赵薇 ?郑少秋 ?郑智化 ?郑欣宜 ?钟镇涛</p></body></html>
h2{ ??? ???font-family:"楷体";}p{ ??? ???font-family: "Times New Roman","宋体"; ???line-height:20px;}span{color:red;font-weight:bold;}上机2
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>制作开心庄园页面</title> ???<link href="css/上机练习2.css" rel="stylesheet" type="text/css"/></head><body><img src="image/manor-1.jpg"/><h2>如何犁地、播种和收获？</h2><p> ???1.点击耙子<img src="image/manor-2.jpg"/>，即可在庄园中开垦田地；<br/> ???2.一开始，你可以开垦数十块的田地；扩充庄园后，可开垦的数量更多；<br/> ???3.在商店<img src="image/manor-3.jpg"/>购买种子后，点击庄园中的田地<img src="image/manor-4.jpg"/>，即可播种；<br/> ???4.别忘了收获自己的劳动所得哦，枯萎后就颗粒无收了！<br/> ???5.使用铲子删除庄园里的田地和植物；<br/> ???6.到达一定级别，可利用拖拉机、播种机 、收割机 ，方便快捷的劳作。</p><h2>如何种果树？</h2><p> ???1.商店中购买果树后，点击庄园空地<img src="image/manor-5.jpg"/>，即可种植；<br/> ???2.果树结满果实时，一定要记得及时收获哦；<br/> ???3.幸运的是，果树不会枯萎，收获后的果树，过一段时间后，还会继续结果。</p><h2>如何养动物？</h2><p> ???1.点击商店，选择想要饲养的动物后，点击庄园空地，即可饲养动物；<br/> ???2.动物成熟之后一定要记得收获<img src="image/manor-6.jpg"/>哦~<br/> ???3.将动物放入相应的居所后，可以更方便地收获；幸运的话，说不定会有意外的惊喜收获呢！<br/> ???4.除了商店购买外，还有各种神秘途径可获得动物哦！</p><h2>如何装扮自己的庄园？</h2><p> ???1.点击左上角的庄园名称，为自己的庄园起个响当当的名字；<br/> ???2.在商店 里购买各种喜欢的建筑和装饰，随心所欲进行装饰；<br/> ???3.向好友们许愿或发布需求<img src="image/manor-7.jpg"/>，让好友们赠送自己心仪的东西；</p></body></html>
p{ ???color:#9C2F06; ??? ???line-height:20px; ???vertical-align:middle;}h2{ ???color:#9C2F06; ???font-weight:bold; ??? ???line-height:40px;}img{ ???vertical-align:middle;}上机3
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>京东读书新闻资讯页面</title> ???<link href="css/上机练习3.css" rel="stylesheet" type="text/css"/></head><body><h1>看不见的完美硬币：细节的负担</h1><h2>创新公司皮克斯的启示</h2><hr/><h3>2015年05月05日 <span>17:47</span></h3><h4><img src="image/book.jpg"/></h4><p >细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。</p><p >但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。</p><p >怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</p><p><span>看不见的完美硬币：细节的负担</span></p><p>在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负担。这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。</p><p>皮克斯有一个现象，被我们的制片人叫作“看不见的完美硬币（the perfect coin）”，这个词指代的是皮克斯制作人员对细节的精益求精。有时候，被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中，好奇的小布第一次来到麦克和萨里的公寓，还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止她，而她还是一步步走到了两摞高高堆起的CD旁，“别乱动！”麦克大喊起来，可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张， CD全部倒塌散落在了地板上。麦克抱怨道：“哎，那些CD都是按字母顺序排列好的！”小女孩摇摇摆摆地走开了。这幕场景前后不到3秒钟，观众们只能够看到几个CD盒而已，但皮克斯的制作人员不仅为每一个CD盒制作了封面，还使用了可计算物体在运动时渲染效果变化的着色器。</p><p>“你能看到所有CD盒吗？看不到。”萨拉菲安接着说，“把所有CD盒全部设计一遍，这工作有意思吗？其实挺有意思的。我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚，所以就任劳任怨地把每张CD都雕琢了一番。也许，这其中的乐趣只有当事人才能体会吧。”</p></body></html>
h1{ ??? ???color:#333; ???text-align:center; ???font-family:"宋体"; ???text-shadow: rgba(0,0,0,0.5) 2px 2px 2px;}h2{ ??? ???color:#999; ???line-height:30px; ???text-align:center;}h3{ ??? ???text-align:center; ???line-height:30px; ???font-weight: 400;}h3 span{ ???color:red;}h4{ ???text-align:center;}.c{ ??? ???font-style: italic; ???text-indent:2em;}p{ ??? ???color:#333; ???font-family:arial,"宋体"; ???line-height:1.8; ???text-indent:2em;}p span{ ???font-weight: bold;}上机4
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>家用电器分类</title> ???<style> ???????div{ ???????????width: 300px; ???????} ???????h2 { ??????????? ???????????color: white; ???????????font-weight: bold; ???????????line-height: 35px; ???????????background: linear-gradient(to bottom, #0467AC, #63A7D6, #B6DBF6); ???????????text-indent: 1em; ???????} ???????h3 { ???????????font-weight: bold; ???????????line-height: 30px; ???????????background: linear-gradient(to bottom, #E4FFFA, #BDDFF7, #E4F1FA); ???????????text-indent: 1.5em; ???????} ???????li { ???????????list-style: none; ???????????text-indent: 0.8em; ???????} ???????h3 a { ??????????? ???????????color: #0565C6; ???????????text-decoration: none; ???????} ???????h3 a:hover { ???????????color: #0565C6; ???????????text-decoration: underline; ???????} ???????a { ??????????? ???????????line-height: 26px; ???????????color: #666666; ???????????text-decoration: none; ???????} ???????a:hover { ???????????color: #F60; ???????????text-decoration: underline; ???????} ???</style></head><body><div> ???<h2>家用电器</h2> ???<ul> ???????<li><h3><a href="#">大家电</a></h3></li> ???????<li> <a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a></li> ???????<li><a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a></li> ???????<li><a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a></li> ???</ul> ???<ul> ???????<li><h3><a href="#">生活电器</a></h3></li> ???????<li> <a href="#">电风扇</a> <a href="#">净化器</a> <a href="#">吸尘器</a></li> ???????<li><a href="#">净水设备</a> <a href="#">挂烫机</a> <a href="#">电话机</a></li> ???</ul> ???<ul> ???????<li><h3><a href="#">厨房电器</a></h3></li> ???????<li> <a href="#">榨汁机</a> <a href="#">电压力锅</a> <a href="#">电饭煲</a></li> ???????<li><a href="#">豆浆机</a> <a href="#">微波炉</a> <a href="#">电磁炉</a></li> ???</ul> ???<ul> ???????<li><h3><a href="#">五金家装</a></h3></li> ???????<li> <a href="#">淋浴/水槽</a> <a href="#">电动工具</a> <a href="#">手动工具</a></li> ???????<li><a href="#">仪器仪表</a> <a href="#">浴霸/排气</a> <a href="#">灯具</a></li> ???</ul></div></body></html>上机5
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>畅销书排行榜</title> ???<style> ???????div { ???????????width: 250px; ???????????background: linear-gradient(to bottom, #F9FBCB, #F8F8F3); ???????} ???????h2 { ??????????? ???????????color: white; ???????????line-height: 30px; ???????????text-indent: 1em; ???????????background: #518700 url("image/bang.gif") no-repeat 100px; ???????????background-size: contain; ???????} ???????li:nth-child(1) { ???????????background: url("image/book_no01.gif") no-repeat 0 5px; ???????} ???????li:nth-child(2) { ???????????background: url("image/book_no02.gif") no-repeat 0 5px; ???????} ???????li:nth-child(3) { ???????????background: url("image/book_no03.gif") no-repeat 0 5px; ???????} ???????li:nth-child(4) { ???????????background: url("image/book_no04.gif") no-repeat 3px 9px; ???????} ???????li:nth-child(5) { ???????????background: url("image/book_no05.gif") no-repeat 3px 9px; ???????} ???????li:nth-child(6) { ???????????background: url("image/book_no06.gif") no-repeat 3px 9px; ???????} ???????li:nth-child(7) { ???????????background: url("image/book_no07.gif") no-repeat 3px 9px; ???????} ???????li:nth-child(8) { ???????????background: url("image/book_no08.gif") no-repeat 3px 9px; ???????} ???????li:nth-child(9) { ???????????background: url("image/book_no09.gif") no-repeat 3px 9px; ???????} ???????li:nth-child(10) { ???????????background: url("image/book_no10.gif") no-repeat 3px 9px; ???????} ???????li { ???????????list-style: none; ???????????text-indent: 1.5em; ???????} ???????a { ??????????? ???????????line-height: 28px; ???????????text-decoration: none; ???????????color: #1A66B3; ???????} ???????a:hover { ???????????text-decoration: underline; ???????} ???</style></head><body><div> ???<h2>畅销书排行</h2> ???<ul> ???????<li><a href="">不抱怨的世界(畅...</a></li> ???????<li><a href="">遇见未知的自己...</a></li> ???????<li><a href="">活法（季羡林、...</a></li> ???????<li><a href="">高效能人士的七个习惯</a></li> ???????<li><a href="">被迫强大（北外女生香奈儿...</a></li> ???????<li><a href="">遇见心想事成的自己（《遇...</a></li> ???????<li><a href="">世界上最伟大的推销员（插...</a></li> ???????<li><a href="">我的成功可以复制（唐骏亲...</a></li> ???????<li><a href="">少有人走的路：心智成熟的...</a></li> ???????<li><a href="">活出全新的自己——唤醒...</a></li> ???</ul></div></body></html>课后3
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>北大青鸟课程介绍页面</title> ???<link href="css/本章作业3.css" rel="stylesheet" type="text/css"/></head><body><div> ???<img src="image/title.gif" width="565"/> ???<img src="image/img_01.png"/> ???<p > ???????<span>逆向课程设计：</span> 以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致<br/> ???????<span>模拟学员学习路线：</span> 强调难点和复杂技能点的反复训练，力求学习效果和学习体验<br/> ???????<span>互联网作为教学环境：</span> 学员的日常教学和训练均在互联网线上进行<br/> ???????<span>学习挡板监控网上学习效果：</span> 每个学习阶段设置线上线下测试，严密监控学习效果<br/> ???????<span>真实开发项目经验积累：</span> 采用专业互联网企业提供的真实项目作为模拟开发 ???</p> ???<img src="image/img_02.png"/> ???<p > ???????<span>【实用性】￣</span> 以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术<br/> ???????<span>【权威性】￣</span> 与来自百度等知名企业的专家联合开发<br/> ???????<span>【专业性】￣</span> 引进业内资深人才和典型行业开发项目<br/> ???????<span>【真实性】￣</span> 在互联网真实环境下进行教学和训练<br/> ???????<span>【易学性】￣</span> 在线培训模式，24小时专家在线解答疑难问题<br/> ???????<span>【完整性】￣</span> 利用SNS虚拟社区：学习、人脉双丰收 ???</p></div></body></html>
div{ ???width:565px; ???background:linear-gradient(to top,#FFFFED,#ECECEC) ;}#p1{ ???color:#5C9815; ???line-height:1.8;}#p2{ ???color:#F26522; ???line-height:1.8;}span{ ???color: white;}#p1 span:nth-of-type(1){ ???background: rgb(10, 80, 61);}#p1 span:nth-of-type(2){ ???background:rgb(39,126,70);}#p1 span:nth-of-type(3){ ???background: rgb(49, 140, 222);}#p1 span:nth-of-type(4){ ???background:#1A66B3;}#p1 span:nth-of-type(5){ ???background: rgb(28, 23, 93);}#p2 span:nth-of-type(1){ ???background: #ff6d10;}#p2 span:nth-of-type(2){ ???background: #bd3620;}#p2 span:nth-of-type(3){ ???background: #ff2276;}#p2 span:nth-of-type(4){ ???background: #b30d30;}#p2 span:nth-of-type(5){ ???background: rgb(116, 49, 107);}#p2 span:nth-of-type(6){ ???background: rgb(102, 15, 101);}课后4
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>初相遇--席慕蓉</title> ???<link href="css/本章作业4.css" rel="stylesheet" type="text/css"/></head><body><div> ???<h1>初相遇 <span>文/席慕容</span></h1> ???<p> ???????<span >美 ?</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。 ???</p> ???<p> ???????我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。<span >胸怀中满溢着幸福，只因你就在我眼前</span>，对我微笑，一如当年。 ???</p> ???<p> ???????我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。 ???</p></div></body></html>
div{ ???width:400px; ???background:linear-gradient(to bottom,#CAEFFE,#FFFFED);}h1{ ??? ???text-align:center; ???color: #3779b3; ???line-height: 1.8; ???text-shadow: black 1px 1px 1px;}h1 span{ ??? ???color: #a7a4a4; ???font-weight: 200;}p{ ??? ???text-indent:2em; ???line-height: 1.7;}.p1{ ???color: rgb(104,13,240); ??? ???font-weight: bold; ???text-shadow: darkgray 3px 2px 1px,white -2px -2px 1px;}.p2{ ??? ???font-style:italic; ???color:dodgerblue; ???font-weight:bold;}p:last-child{ ???text-decoration:underline; ???color: #29a402;}课后5
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>淘宝女装分类页面</title> ???<link href="css/本章作业5.css" rel="stylesheet" type="text/css"/></head><body><ul> ???<li>夏季流行<hr/></li> ???<li><a href="">夏季新品</a> ?<a href="">雪纺裙</a> <a href="">短袖T</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></li> ???<li>上装<hr/></li> ???<li><a href="">T恤</a> <a href="">衬衫</a> <a href="">针织衫</a> <a href="">长袖T</a> <a href="">韩版T</a> <a href="">情侣衫</a> <a href="">雪纺衬衫</a> <a href="">韩版衬衫</a> <a href="">防晒衣</a> <a href="">休闲套装</a> <a href="">卫衣</a> <a href="">背心/吊带</a></li> ???<li>裙子<hr/></li> ???<li><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> <a href="">牛仔裙</a> <a href="">半身中长裙</a> <a href="">半身短裙</a> <a href="">包臀裙</a></li> ???<li>裤子<hr/></li> ???<li><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="">牛仔短裤</a> <a href="">西装裤</a></li> ???<li>其他女装<hr/></li> ???<li><a href="">胖M装</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="">羊绒衫</a> <a href="">毛衣</a> <a href="">呢大衣</a> <a href="">羽绒服</a> <a href="">真皮皮衣</a></li></ul></body></html>
li{ ???list-style: none;}li:nth-child(odd){ ???text-indent:2.5em; ??? ???font-weight: bold; ???line-height: 3;}li:nth-child(even){ ??? ???line-height: 2;}li:nth-of-type(1){ ???background: url("../image/dress01.png") no-repeat 0 8px;}li:nth-of-type(3){ ???background: url("../image/dress02.png") no-repeat 0 8px;}li:nth-of-type(5){ ???background: url("../image/dress03.png") no-repeat 0 8px;}li:nth-of-type(7){ ???background: url("../image/dress04.png") no-repeat 0 8px;}li:nth-of-type(9){ ???background: url("../image/dress05.png") no-repeat 0 8px;}a{ ???text-decoration: none; ???color: black;}a:hover{ ????text-decoration: underline; ????color: #F60;}html （第四本书第五章参考）
原文地址：https://www.cnblogs.com/yunfeioliver/p/9370901.html