第五章 CSS美化网页元素

来源：互联网发布：苏州矩阵光电编辑：程序博客网时间：2024/04/30 16:35

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

练习三:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>北大青鸟新闻展示页面</title><style  type="text/css">p img{ }h3{   valign:middle;text-decoration: none;}h4{color: #999;}h3 strong{color: #000;font-weight: lighter;}.dfg{text-align:center}.rightsy{text-align:right;}</style></head><body><p><img src="logo.gif"/><img  src="banner.jpg" /></p><span class="dfg">7招打造社会化工作环境</span><br /><span class="rightsy">2013年08月09日 09:36     供稿中心： 互联网运营部</span><hr/><h3><span class="text">摘要:</span><strong>如果你的办公室出现了员工懈怠、不满、焦虑或无所事事等现象，也许是时候该设立一个更加社会化的工作区了。</strong></h3><p><span class="dfg" ><img src="work.jpg" /></span></p><h3><strong>    如果你的办公室出现了员工懈怠、不满、焦虑或无所事事等现象，也许是时候该设立一个更加社会化的工作区了。</strong></h3><h3><strong>    这一点还有调查数据的支持，美国心理协会的调查发现，员工不满往往与老板有关，43% 提到不满是因为缺乏发展和晋升机会，43% 称高强度的工作压力所致，40% 认为工作期望不切实际引起，39% 抱怨工作时间过长。只有 52% 的员工感受到了工作的价值。每年这方面的数据基本上都没有什么改善。员工的感觉往往是自己是被迫要完成任务的。</strong></h3><h3><strong>    打造一个更加社会化的工作区也许是该问题的一个解决方案。提供团队协作的机会有助于让员工不再把自己视为独立的任务执行者，而是有价值的团队成员，能够提高士气，进而改善积极性和生产力。</strong></h3><h3><strong>    以下就是打造社会化工作区的 7 点提示：</strong></h3><h3><span class="text">1、提高福利待遇</span></h3><h3><strong>       Google、Facebook、Twitter、LinkedIn 等大公司都很注意这一点。在办公地点配备健身房，可以灵活安排办公时间，假期没有限制，甚至照顾员工的生活（参见照顾你的生活是我的工作，轻松快乐才有效率和创意）等。虽然比不上他们财大气粗，但你也可以在预算允许的情况下适当参照一下。</strong></h3><h3><span class="text">2、提供协作机会</span></h3><h3><strong>    如果你的办公区是按照老板、经理、员工来分区的话，是时候打破这种等级了。应该反过来，创建团队，让这些人定期在会议室碰头，甚至走出办公室来讨论项目和协作。这能够为社会化打开机会，为解决问题和创造性思考扫清障碍。</strong></h3><h3><span class="text">3、创建在线社区</span></h3>  <h3><strong>    约有 45% 的主管认为社会化媒体对企业文化有好处。通过创建在线工作区和人才社区让现在和曾经的员工参与招聘工作。创建企业 Facebook 小组 /QQ 群来招募新样或实习生让员工与感兴趣的应征者在该网站互动。还可以为创建公司的前雇员和现有员工创建小组就职业生涯管理等业界话题保持接触。奖励那些将网络接触转化为招聘的员工。还可以采用 Jive 这样的内部协作软件来推动参与和社会化。</strong></h3><h3><span class="text">4、自内而外发展</span></h3>  <h3><strong>    如果员工感觉自己的角色或位置束缚了自己且没有取得进展的迹象，他们就会失去把工作干好的动力。但是即便你没有办法很快给员工加薪晋级，也要通过定期改变职责，让其相互辅导培训，或就新项目进行头脑风暴等行动来保持他们的积极性。如果能够消除既定角色给员工带来的单调乏味感，就能够保持他们的创造力。</strong></h3><h3><span class="text">5、必须一视同仁</span></h3><h3><strong>    经常关注和奖励明星员工没有错，但是如果你疏忽了某些员工的话，这些行动所引起的负面情绪就会比带来的正面效果要多。要留出时间来表明自意识到并感激每一个部门、每一个团队以及每一位员工的工作，不要遗漏任何一个人。认识和尊重所有员工的努力将会带来相应规模的正能量。 </strong></h3><h3><span class="text">6、提供外延服务</span></h3></body><h3><strong>    有时候你会因为表现不好或另谋高就而失去一位员工。如果说不是恩尽义绝的话，公司一般的做法也是一刀两断。但实际上你还可以有更高明的做法，向现有和前员工提供外延服务机会，提供工作搜索软件、技能再培训、教育机会或有关招聘会的信息等，通过这些向他们表明你关心他们的福祉。</strong></h3><h3><span class="text">7、了解员工之需</span></h3></body><h3><strong>    定期与员工进行一对一或小组访谈，关心了解他们的问题。如果员工发现有提供反馈的机会，问题处理来也会更加放心。</strong></h3><h3><strong>    过去企业往往通过福利手段来维系员工的积极性，但是却没有意识到他们是社交动物。打造一个更加社会化的工作环境能够改善员工满意度不高的问题。</strong></h3></body></html><pre class="html" name="code">

练习五:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>畅销书排行榜</title><style  type="text/css">#id{width:230px;}.title{color: #FFF;background-color: #0C3;    }    .ulsy{margin-top:0px;padding-left:0px;text-indent:2em;list-style-type:none;line-height:30px;   }      .one{    background:#CCC url(book_no01.gif)    0px  4px no-repeat;        }    .two{   background:#09F   url(book_no02.gif)   0px  4px  no-repeat;    }.there{background:#96F  url(book_no03.gif)   0px  4px  no-repeat;}   .four{    background:#6F9  url(book_no04.gif)   0px  4px  no-repeat;    } .fifw{background:#FC6  url(book_no05.gif)   0px  4px  no-repeat;}.six{background:#CCF  url(book_no06.gif)   0px  4px  no-repeat;}.seven{background:#F9F   url(book_no07.gif)  0px  4px  no-repeat;}.eigth{background:#0FF  url(book_no08.gif)   0px  4px  no-repeat;    }.nine{background:#3C3   url(book_no09.gif)  0px  4px  no-repeat;}.ten{background:#CF6  url(book_no10.gif)   0px  4px  no-repeat;}</style></head><body><div id="n"><div class="title">畅销书排行<img src="bang.gif" />  </div><ul class="ulsy"><li class="one"><a href="#">不抱怨的世界(畅...</a></li><li  class="two"><a href="#">遇见未知的自己...</a></li><li class="there"><a href="#">活法（季羡林、...</a></li><li  class="four"><a  href="#">高效能人士的七个习惯</a></li><li class="fifw"><a href="#">被迫强大（北外女生香奈儿...</a></li><li class="six"><a href="#">遇见心想事成的自己（《遇...</a></li><li class="seven"><a href="#">世界上最伟大的推销员(插...</a></li><li class="eigth"><a href="#">我的成功可以复制（唐骏亲...</a></li><li class="nine"><a href="#">少有人走的路：心智成熟的...</a></li><li class="ten"><a href="#">活出全新的自己——唤醒...</a></li></ul></body></html>

0 0