标签：gradient 1.5 实用 怎么 round 训练 with 需求 jpg
上机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; }
标签：gradient 1.5 实用 怎么 round 训练 with 需求 jpg
原文地址：https://www.cnblogs.com/yunfeioliver/p/9370901.html
