上机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-size:18px;font-family:"楷体"; } p{font-size:12px;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;font-size:12px;line-height:20px;vertical-align:middle; } h2{color:#9C2F06;font-weight:bold;font-size:18px;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 class="c">细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。</p> <p class="c">但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。</p> <p class="c">怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</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{font-size:22px;color:#333;text-align:center;font-family: arial,"宋体";text-shadow: rgba(0,0,0,0.5) 2px 2px 2px; } h2{font-size:18px;color:#999;line-height:30px;text-align:center; } h3{font-size:12px;text-align:center;line-height:30px;font-weight: 400; } h3 span{color:red; } h4{text-align:center; } .c{font-size:13px;font-style: italic;text-indent:2em; } p{font-size:14px;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 {font-size: 18px;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 {font-size: 14px;color: #0565C6;text-decoration: none;}h3 a:hover {color: #0565C6;text-decoration: underline;}a {font-size: 16px;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 {font-size: 16px;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 {font-size: 12px;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 id="p1"><span>逆向课程设计：</span> 以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致<br/><span>模拟学员学习路线：</span> 强调难点和复杂技能点的反复训练，力求学习效果和学习体验<br/><span>互联网作为教学环境：</span> 学员的日常教学和训练均在互联网线上进行<br/><span>学习挡板监控网上学习效果：</span> 每个学习阶段设置线上线下测试，严密监控学习效果<br/><span>真实开发项目经验积累：</span> 采用专业互联网企业提供的真实项目作为模拟开发</p><img src="image/img_02.png"/><p id="p2"><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 class="p1">美 </span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。</p><p>我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。<span class="p2">胸怀中满溢着幸福，只因你就在我眼前</span>，对我微笑，一如当年。</p><p>我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</p> </div> </body> </html>
div{width:400px;background:linear-gradient(to bottom,#CAEFFE,#FFFFED); } h1{font-size: 18px;text-align:center;color: #3779b3;line-height: 1.8;text-shadow: black 1px 1px 1px; } h1 span{font-size: 12px;color: #a7a4a4;font-weight: 200; } p{font-size: 12px;text-indent:2em;line-height: 1.7; } .p1{color: rgb(104,13,240);font-size: 18px;font-weight: bold;text-shadow: darkgray 3px 2px 1px,white -2px -2px 1px; } .p2{font-size: 16px;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-size: 18px;font-weight: bold;line-height: 3; } li:nth-child(even){font-size: 12px;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; }
