CSS美化网页元素的代码实例
CSS美化网页元素的3个代码教程
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>
2、
<!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">
3、
<!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>
- 上一篇：CSS居中布局的简单方法
- 下一篇：C# 获取硬件参数的方法
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻