用CSS样式完成作业

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

用CSS样式完成作业相关推荐

Web前端开发北京林业大学 CSS样式-单元作业
Web前端开发北京林业大学通关攻略 Web前端开发客观题编程题概论单元测试1 HTML基础单元测试2 单元作业1 CSS样式单元测试3 单元作业2 CSS布局与定位单元测试4 单元作 ...
仿Apple官网CSS样式实现
前言 GitHub地址我的个人博客这份代码是2015年,本科时期初次学习学校开设CSS课程的作业成果.也算是我初次接触前端的三大骨架,现在回想起来当初一步步地去仿照苹果官网去分析去实现,给我带来了 ...
html静态页面作业出行网站设计——洛阳城旅游(34页) HTML+CSS+JavaScript dreamweaver作业静态HTML网页设计模板出游
HTML5期末大作业:计划出行网站设计--洛阳城旅游(34页) HTML+CSS+JavaScript dreamweaver作业静态HTML网页设计模板出游常见网页设计作业题材有个人. 美食. ...
网页设计作业成品 HTML+CSS+JS大作业——汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
HTML+CSS+JS大作业--汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作文章目录 HTML+CSS+JS大作业--汽车保险销售综合商城(4 ...
内联式css样式，直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...
css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html> <html> <head> <meta http-equiv="c ...
CSS（2 ）-- CSS样式大全
常用css样式大全Author:xu_shuyi201504039.CSS颜色代码大全http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html1 ...
MOSS的CSS样式说明，一个老外总结的
MOSS的CSS样式说明,一个老外总结的 http://www.heathersolomon.com/content/sp07cssreference.htm 转载于:https://www.cnbl ...
float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...

用CSS样式完成作业

用CSS样式完成作业相关推荐

最新文章

热门文章