1、css设置字体和文字样式
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css_font</title>
<link rel="stylesheet" type="text/css" href="css/css_font.css"/>
</head>
<body>
<div>
<!--字体类型-->
<p>font-family定义字体类型</p>
</div>
<div>
<!--字体大小-->
<p>font-size定义字体大小</p>
</div>
<div>
<!--字体粗细-->
<p>font-height定义字体粗细</p>
</div>
<div>
<!--斜体字体-->
<p>font-style定义斜体字体</p>
</div>
<div>
<!--下划线-->
<p>text-decoration定义贯穿线</p>
<p>text-decoration定义下划线</p>
<p>text-decoration定义闪烁</p>
<p>text-decoration定义上划线</p>
</div>
<div>
<!--行高设定-->
<p>line-height定义行高</p>
</div>
<div>
<!-- 定义文本对齐 -->
<p>text-align定义文本左对齐left</p>
<p>text-align定义文本右对齐right</p>
<p>text-align定义文本居中对齐center</p>
<p>text-align定义文本两端对齐justify</p>
</div>
<div>
<!-- 定义垂直对齐 -->
<p>vertical-align一般用于文字图片居中</p>
</div>
<div>
<!-- 定义字距和词距 -->
<p>字距letter-spacing</p>
<p>词距word-spacing</p>
</div>
<div>
<!-- 定义缩进 -->
<p>定义缩进</p>
</div>
<div>
<!-- 定义文本阴影 -->
<p>text-shadow定义文本阴影</p>
</div>
</body>
</html>
css
div:first-child p:first-child{
background-color: #AA9090;
font-family: fantasy,"楷体";
}
div:nth-child(2) p:first-child{
background-color: #11FF77;
font-size: xx-small;
}
div:nth-child(3) p:first-child{
background-color: #555555;
font-weight: bold;
}
div:nth-child(4) p:first-child{
background-color: #1010BB;
font-style: italic;
}
div:nth-child(5){
background-color: #FF0000;
}
div:nth-child(5) p:first-child{
text-decoration: line-through;
}
div:nth-child(5) p:nth-child(2){
text-decoration: underline;
}
div:nth-child(5) p:nth-child(3){
text-decoration: blink;
}
div:nth-child(5) p:nth-child(4){
text-decoration: overline;
}
div:nth-child(6) p:first-child{
background-color: aqua;
height: 2em;
line-height: 2em;
}
div:nth-child(7){
background-color: bisque;
}
div:nth-child(7) p:first-child{
text-align: left;
}
div:nth-child(7) p:nth-child(2){
text-align: right;
}
div:nth-child(7) p:nth-child(3){
text-align: center;
}
div:nth-child(7) p:nth-child(4){
text-align: justify;
}
div:nth-child(8) p:first-child{
background-color: #DD6677;
vertical-align: middle;
}
div:nth-child(9){
background-color: yellow;
}
div:nth-child(9) p:first-child{
letter-spacing: 1em;
}
div:nth-child(9) p:last-child{
word-spacing: 16px;
}
div:nth-child(10) p:first-child{
background-color: antiquewhite;
text-indent: 2em;
}
div:nth-child(11) p:first-child{
color: darkblue;
text-shadow: 10px 10px 5px lightblue;
}
2、音乐标签
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网易云标签页面</title>
<link rel="stylesheet" type="text/css" href="css/网易云标签页面.css"/>
</head>
<body>
<header>
<h1>全部歌手</h1>
</header>
<section>
<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>
J 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>
</section>
</body>
</html>
css
h1{
font:18px bold "楷体"
}
p{
font-family:"times new roman","宋体"
}
span{
color:red;
}
3、开心庄园
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Happy Manor</title>
<link rel="stylesheet" type="text/css" href="css/happy%20manor.css"/>
</head>
<body>
<div>
<img src="img/manor-1.jpg" />
</div>
<div>
<h1>如何犁地、播种和收获？</h1>
<p>1.点击耙子<img src="img/manor-2.jpg" />，即可在庄园中开垦田地；</p>
<p>2.一开始，你可以开垦数十块的田地；扩充庄园后，可开垦的数量更多；</p>
<p>3.在商店<img src="img/manor-3.jpg" /> 购买种子后，点击庄园中的田地<img src="img/manor-4.jpg"/>，即可播种；</p>
<p>4.别忘了收获自己的劳动所得哦，枯萎后就颗粒无收了！</p>
<p>5.使用铲子删除庄园里的田地和植物；</p>
<p>6.到达一定级别，可利用拖拉机、播种机 、收割机 ，方便快捷的劳作。</p>
</div>
<div>
<h1>如何种果树？</h1>
<p>1.商店中购买果树后，点击庄园空地<img src="img/manor-5.jpg" /> ，即可种植；</p>
<p>2.果树结满果实时，一定要记得及时收获 哦；</p>
<p>3.幸运的是，果树不会枯萎，收获后的果树，过一段时间后，还会继续结果。</p>
</div>
<div>
<h1>如何养动物？</h1>
<p>1.点击商店，选择想要饲养的动物后，点击庄园空地，即可饲养动物；</p>
<p>2.动物成熟之后一定要记得收获<img src="img/manor-6.jpg"/>哦~</p>
<p>3.将动物放入相应的居所后，可以更方便地收获；幸运的话，说不定会有意外的惊喜收获呢</p>
<p>4.除了商店购买外，还有各种神秘途径可获得动物哦！</p>
</div>
<div>
<h1>如何装扮自己的庄园？</h1>
<p>1.点击左上角的庄园名称，为自己的庄园起个响当当的名字；</p>
<p>2.在商店 里购买各种喜欢的建筑和装饰，随心所欲进行装饰；</p>
<p>3.向好友们许愿或发布需求<img src="img/manor-7.jpg"/>，让好友们赠送自己心仪的东西；</p>
</div>
</body>
</html>
css
h1{
font-size:bold;
line-height:40px;
}
p{
font-size: 12px;
line-height:20px;
}
img{
vertical-align: middle;
}
body{
color:red;
}
4、新闻咨询页面
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新闻资讯</title>
<link rel="stylesheet" type="text/css" href="css/新闻资讯.css"/>
</head>
<body>
<h1>看不见的完美硬币：细节的负担</h1>
<h2>创新公司皮克斯的启示</h2>
<hr/>
<div>
<p class="time">2015年05月05日 <span>17:47</span></p>
<span class="pic"><img src="img/book.jpg" /></span>
<p>细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。</p>
<p>但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。</p>
<p>怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</p>
<p>看不见的完美硬币：细节的负担</p>
<p>在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负担。这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。</p>
<p>皮克斯有一个现象，被我们的制片人叫作“看不见的完美硬币（the perfect coin）”，这个词指代的是皮克斯制作人员对细节的精益求精。有时候，被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中，好奇的小布第一次来到麦克和萨里的公寓，还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止她，而她还是一步步走到了两摞高高堆起的CD旁，“别乱动！”麦克大喊起来，可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张， CD全部倒塌散落在了地板上。麦克抱怨道：“哎，那些CD都是按字母顺序排列好的！”小女孩摇摇摆摆地走开了。这幕场景前后不到3秒钟，观众们只能够看到几个CD盒而已，但皮克斯的制作人员不仅为每一个CD盒制作了封面，还使用了可计算物体在运动时渲染效果变化的着色器。</p>
<p>“你能看到所有CD盒吗？看不到。”萨拉菲安接着说，“把所有CD盒全部设计一遍，这工作有意思吗？其实挺有意思的。我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚，所以就任劳任怨地把每张CD都雕琢了一番。也许，这其中的乐趣只有当事人才能体会吧。”</p>
</div>
</body>
</html>
css
h1{
font:2em "楷体";
text-align: center;
text-shadow: 2px 2px 2px black;
}
h2{
font:bold 1.5em "";
color: #808080;
text-align: center;
}
.time{
font:bold 0.95em "黑体";
text-align: center;
}
.time span{
color: orange;
}
.pic{
display: block;
text-align: center;
vertical-align: middle;
}
p:nth-of-type(2),p:nth-of-type(3),p:nth-of-type(4){
text-indent: 2em;
font-style: italic;
}
p:nth-of-type(5){
line-height: 2em;
text-indent: 2em;
font-weight: bold;
}
p:nth-of-type(6),p:nth-of-type(7),p:nth-of-type(8){
text-indent: 2em;
font-weight: 1em;
版权声明：本文为Mostdanger原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。