实 验 要 求 | 实验目标：
实验所需软件： Sublime_Text | |||
实 验 内 容 | 实验内容：
需求说明
| |||
实 验 过 程 及 结 果 | 1.效果图
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作百度音乐标签页面</title> <link rel="stylesheet" href="./zy01.css"> </head> <body> <h1>全部歌手</h1> <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> Css: body { color: black; } h1 { font-size: 18px; font-family: '楷体'; font-weight: bold; } p { font-size: 12px; line-height: 20px; font-family: 'Times New Roman'; } span { font-weight: bold; color: red; } 2.效果图：
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作京东新闻资讯页</title> <link rel="stylesheet" href="./zy02.css"> </head> <body> <h1>看不见的完美硬币 ：细节的负担</h1> <h2>创新公司皮克斯的启示</h2> <hr> <p class="p1">2015年05月05日 <span>17:47</span></p> <p class="p2"><img src="./image/book.jpg" alt=""></p> <p>细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。</p> <p>但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。</p> <p>怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</p> <p class="p3">看不见的完美硬币：细节的负担</p> <p>在 <a href="#">皮克斯</a>，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事，但是在<a href="#">皮克斯</a>，设计师们一个个都是完美主义者，细节显然成了<a href="#">皮克斯</a>的负担。这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。</p> <p><a href="#">皮克斯</a>有一个现象，被我们的制片人叫作“看不见的完美硬币（the perfect coin）”，这个词指代的是<a href="#">皮克斯</a>制作人员对细节的精益求精。有时候，被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中，好奇的小布第一次来到麦克和萨里的公寓，还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止她，而她还是一步步走到了两摞高高堆起的CD旁，“别乱动！”麦克大喊起来，可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张， CD全部倒塌散落在了地板上。麦克抱怨道：“哎，那些CD都是按字母顺序排列好的！”小女孩摇摇摆摆地走开了。这幕场景前后不到3秒钟，观众们只能够看到几个CD盒而已，但<a href="#">皮克斯</a>的制作人员不仅为每一个CD盒制作了封面，还使用了可计算物体在运动时渲染效果变化的着色器。</p> <p>“你能看到所有CD盒吗？看不到。”萨拉菲安接着说，“把所有CD盒全部设计一遍，这工作有意思吗？其实挺有意思的。我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚，所以就任劳任怨地把每张CD都雕琢了一番。也许，这其中的乐趣只有当事人才能体会吧。”</p> </body> </html> Css代码： h1,h2 { font-family: "Microsoft YaHei"; } h1 { text-shadow: -1px -1px 1px gray; } p { text-indent: 2em; } h1,h2,.p1,.p2 { text-align: center; } .p1 span { color: red; } a { color: blue; text-decoration: none; } a:hover { color: coral; text-decoration: underline; } .p3 { font-weight: bold; }
效果图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css" media="screen"> * { padding:0px; margin:0px; } .nav { width:230px; background:#D7D7D7; } .title{ height:35px; background:#cc0001 url('arrow-down.gif') 205px 10px no-repeat; font-size:18px; color:#fff; font-weight: bold; text-indent: 1em; line-height: 35px; } .nav li{ line-height: 25px; background: url('arrow-right.gif') 36px 6px no-repeat; list-style:none; text-indent: 3em; } .nav li a{ font-size:12px; color:#000; text-decoration: none; } .nav li:hover{ background:orange; } .nav li a:hover{ color:red; } </style> </head> <body> <div class="nav"> <div class="title">全部商品分类</div> <ul> <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> <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> <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> 4， 效果图：
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>精灵图</title> <style> div { background-image: url(./image/abcd.jpg); background-repeat: no-repeat; width: 120px; height: 130px; float: left; } .d1 { background-position: -477px -551px; } .d2 { background-position: -107px -011px; } </style> </head> <body> <div class="d1"></div> <div class="d2"></div> </body> </html> 5 效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>畅销书排行榜页面</title> <style> .nav { width: 300px; background: radial-gradient(#F9FBCB,#F8F8F3); } .title { font-size: 16px; text-indent: 1em; line-height: 30px; background: #518700 url(./image/bang.gif) no-repeat 100px 3px;; } .nav ul li a{ font-size: 12px; line-height: 28px; color: #1a66b3; text-decoration: none; } .nav ul li a:hover { text-decoration:underline; } .nav ul li { list-style: none; text-indent: 2em; } .nav ul .l1 { background:url(./image/book_no01.gif) no-repeat 0px 4px;; } .nav ul .l2 { background:url(./image/book_no02.gif) no-repeat 0px 4px;; } .nav ul .l3 { background:url(./image/book_no03.gif) no-repeat 0px 4px;; } .nav ul .l4 { background:url(./image/book_no04.gif) no-repeat 3px 4px;; } .nav ul .l5 { background:url(./image/book_no05.gif) no-repeat 3px 4px;; } .nav ul .l6 { background:url(./image/book_no06.gif) no-repeat 3px 4px;; } .nav ul .l7 { background:url(./image/book_no07.gif) no-repeat 3px 4px;; } .nav ul .l8 { background:url(./image/book_no08.gif) no-repeat 3px 4px;; } .nav ul .l9 { background:url(./image/book_no09.gif) no-repeat 3px 4px;; } .nav ul .l10 { background:url(./image/book_no10.gif) no-repeat 3px 4px;; } </style> </head> <body> <div class="nav"> <div class="title">畅销书排行</div> <ul> <li class="l1"><a href="#">不抱怨的世界(畅...</a></li> <li class="l2"><a href="#">遇见未知的自己...</a></li> <li class="l3"><a href="#">活法（季羡林、...</a></li> <li class="l4"><a href="#">高效能人士的七个习惯</a></li> <li class="l5"><a href="#">被迫强大（北外女生香奈儿...</a></li> <li class="l6"><a href="#">遇见心想事成的自己（《遇...</a></li> <li class="l7"><a href="#">世界上最伟大的推销员（插...</a></li> <li class="l8"><a href="#">我的成功可以复制（唐骏亲...</a></li> <li class="l9"><a href="#">少有人走的路：心智成熟的...</a></li> <li class="l10"><a href="#">活出全新的自己——唤醒...</a></li> </ul> </div> </body> </html> | |||
实 验 总 结 | 通过本次的实验练习，让我对css的感受更加的深刻与加深了运用的技巧。CSS设置背景样式 、使用CSS设置超链接样式、使用CSS设置列表样式，CSS比较容易学习但是如果想要使用的非常自然、熟悉的话是比较困难的，需要不断的运用、尝试才能设计出最具有自我特色的html页面，所以我会加强练习。 | |||
0
点赞
收藏
分享
CSS样式表（二）
相关推荐
0 条评论
