tofacebook.com -专业IT技术社区 【百家号】脸书百科,html (第四本书第五章参考) Web程序 - tofacebook.com-专业IT技术社区
83°

【百家号】脸书百科,html (第四本书第五章参考) Web程序

标签: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>&nbsp;&nbsp;&nbsp;A Fine Frenzy  Air Supply  Akon  Alan Silvestri   Apink  安又琪  安在旭  安室奈美惠</p>
<p><span>B</span>&nbsp;&nbsp;&nbsp;Babyface  Backstreet ..   Bandari  Barbra Streisand  Basshunter  Bee Gees   北京天使合唱团  宝儿  宝宝的音乐花园  巴哈尔古丽  巴桑  布仁巴雅尔</p>
<p><span>C</span>&nbsp;&nbsp;&nbsp;Chris Garneau  Christina Aguilera  Christina Perri   草原兄妹   蔡卓妍  蔡国庆   陈雅森  陈雷  陈韵若</p>
<p><span>D</span>&nbsp;&nbsp;&nbsp;Darby Devon  Darren  Darren Hayes  Daughtry  David Archuleta   Dido   东城卫  东方传奇   刀郎   刁寒  动力火车   邓丽欣</p>
<p><span>E</span>&nbsp;&nbsp;&nbsp;Emmylou Harris  Enigma  Ennio Morricone   Eric Clapton   eminem  二手玫瑰  二胡  额尔古纳乐队</p>
<p><span>F</span>&nbsp;&nbsp;&nbsp;Fergie  Finger eleven  Flo Rida  Florence + The M..   付笛声  付辛博  佛涯组合   凤凰传奇   飞儿乐团</p>
<p><span>G</span>&nbsp;&nbsp;&nbsp;Gretchen Wilson  Greyson Chance  Groove Coverage  关牧村  关菊英  古天乐  古巨基  龚琳娜  龚诗嘉</p>
<p><span>H</span>&nbsp;&nbsp;&nbsp;High School Music..  Hilary Duff  >Hit-5  Hollywood Undead  Hope组合  胡松华  胡歌  黄宗泽  黄家驹  黄晓明   黑鸭子  黑龙</p>
<p><span>I</span>&nbsp;&nbsp;&nbsp;I Me  IU  Icona Pop  Il Divo  Imagine Dragons  Infinite  Ingrid Michaelson  Isgaard</p>
<p><span>J</span>&nbsp;&nbsp;&nbsp;Janet Jackson  Jason Chen  Jason Derulo  Jason Mraz  Jason Wade  吉杰  吉田亚纪子  蒋大为  蒋蒋  蒋雪儿  解小东  酒井法子</p>
<p><span>K</span>&nbsp;&nbsp;&nbsp;Kimberley  Kiss组合  kanye west  katie melua  柯有伦  柯有纶  柯震东  筷子兄弟</p>
<p><span>L</span>&nbsp;&nbsp;&nbsp;Lana Del Rey  Led Zeppelin  Lee Ssang  Lene Marlin  刘德华   刘德海  李克勤   李双江  林忆莲   林志炫   林志玲</p>
<p><span>M</span>&nbsp;&nbsp;&nbsp;MC Hotdog  Michael Bolton  Michael Buble  Michael Jackson  孟非  麦田守望者  麻吉</p>
<p><span>N</span>&nbsp;&nbsp;&nbsp;Nat King Cole  Natasha Bedingfield  Naughty Boy  牛朝阳  牛牛  那英</p>
<p><span>O</span>&nbsp;&nbsp;&nbsp;Oasis  Oceanlab  Olivia Ong  Olly Murs  欧得洋  欧阳菲菲</p>
<p><span>P</span>&nbsp;&nbsp;&nbsp;Pharrell  Phil Collins  Phillip Phillips  彭芳  彭野新儿歌  潘长江  蒲提</p>
<p><span>Q</span>&nbsp;&nbsp;&nbsp;邱泽  青山  青山黛玛  青春美少女  青蛙乐队  青鸟飞鱼</p>
<p><span>R</span>&nbsp;&nbsp;&nbsp;Rammstein  Ray Charles  Red Hot Chili Pep..  Regina Spektor   容祖儿  容韵琳  荣联合  饶天亮</p>
<p><span>S</span>&nbsp;&nbsp;&nbsp;Sara Bareilles  Sarah Brightman  Sarah Connor  Something Corpor..  Sophie Zelmani  司徒兰芳  少女时代  少女时代-太蒂徐  尚雯婕</p>
<p><span>T</span>&nbsp;&nbsp;&nbsp;Tears For Fears  The Band Perry  The Beatles  The Black Eyed P..  The Cardigans  谭杰希  谭欣懿  谭维维  谭耀文  陶钰玉</p>
<p><span>U</span>&nbsp;&nbsp;&nbsp;UVERworld  Usher  u2</p>
<p><span>V</span>&nbsp;&nbsp;&nbsp;Vanessa Carlton  Vangelis  Various Artists  Vitas  Vonda Shepard</p>
<p><span>W</span>&nbsp;&nbsp;&nbsp;Willie Nelson  Within Temptation  Wiz Khalifa  Wolfgang Amadeu..  Wonder Girls  王菲   王蓉  王蓝茵</p>
<p><span>X</span>&nbsp;&nbsp;&nbsp;徐子崴  徐小凤  徐小明  徐怀钰  徐洁儿  谢娜</p>
<p><span>Y</span>&nbsp;&nbsp;&nbsp;Yann Tiersen  Yanni  余文乐  俞丽拿  俞灏明  音乐磁场  颜小健  颜羽</p>
<p><span>Z</span>&nbsp;&nbsp;&nbsp;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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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>初相遇&nbsp;&nbsp;<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;
}

 

html (第四本书第五章参考)

标签:gradient   1.5   实用   怎么   round   训练   with   需求   jpg   

原文地址:https://www.cnblogs.com/yunfeioliver/p/9370901.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: