数码世界
跳转链接：

跳转到主页面
跳转到页面1

笨鸟先飞，精卫填海，Fighting slowbirdie！

错误示范：

错误代码，如下：

正确示范：

正确代码，如下：
存在即合理

存在即合理


笨鸟blog网

笨鸟blog网

笨鸟blog网
笨鸟blog网

笨鸟blog网
笨鸟blog网
笨鸟blog网

笨鸟blog网

笨鸟blog网

笨鸟blog网
笨鸟blog网

笨鸟blog网
笨鸟blog网
笨鸟blog网
笨鸟blog网
笨鸟blog网

d
编程成果七：
 请用至少两种不同的选择器方式选中以下代码中所有的div和p。
代码如下：

方式一(元素选择器)：
 代码：

方式二(ID选择器)：
 代码:

方式三(类选择器)：
 代码：

方式四(后代选择器):
 代码：

方式五(群组选择器)：
 代码：
字体样式：

 字体类型(font-family)：

Arial
Times New Roman
微软雅黑

Rome was not built in a day.

字体大小(font-size)：

字体大小为10px

字体大小为15px

字体大小为20px


字体粗细(font-weight)：

字体粗细为:100(lighter)

字体粗细为:400(normol)

字体粗细为:700(bold)

字体粗细为:900(bolder)

字体粗细为:lighter

字体粗细为:normol

字体粗细为:bold

字体粗细为:bolder


字体风格(font-style)：

字体样式为:normol

字体样式为:italic

字体样式:oblique


字体颜色(color)：

字体颜色为灰色

字体颜色为橙色

字体颜色为红色

字体颜色为#03FCA1

字体颜色为#048C02

字体颜色为#CE0592

记忆之所以美，是因为有了现实的参照。

编程成果八：

 题目：

“有规划的人生叫蓝图，没规划的人生叫拼图。”
文本样式：

 首行缩进(text-indent)：

《爱莲说》

水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。
予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，
可远观而不可亵玩焉。

予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！
菊之爱，陶后鲜有闻。莲之爱，同予者何人?牡丹之爱，宜乎众矣!

水平对齐(text-align)：

左对齐:好好学习，天天向上。

居中对齐:好好学习，天天向上。

右对齐:好好学习，天天向上。

文本修饰(text-decoration)：

这是“下划线”效果

这是“删除线”效果

这是“顶划线”效果

这事“去除超链接下划线”效果: 跳转到哔哩哔哩官网

大小写(text-transform)：

rome was't built in a day.

rome was't built in a day.

rome was't built in a day.

行高(line-height)：

披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。
云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。

披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。
云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。

披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。
云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。

间距(letter-spacing、word-space)：

Rome was't built in a day.罗马不是一天建成的。

Rome was't built in a day.罗马不是一天建成的。

Rome was't built in a day.罗马不是一天建成的。

Rome was't built in a day.罗马不是一天建成的。

Rome was't built in a day.罗马不是一天建成的。

Rome was't built in a day.罗马不是一天建成的。

编程成果九：

下面有一段代码，请在这段代码的基础上，使用正确的选择器
以及这两章学到的字体样式、文本样式来实现如下图所示的效果。

编程题
题目代码，如下：

预期代码：

预期效果：

很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，
事实上这种“ 低水平的勤奋” 远远比懒惰更可怕。

Remember:no pain,no gain!

边框样式：

 边框属性(border-width、border-style、border-color)：

可爱的皮卡丘

简写形式：

可爱的皮卡丘

局部形式+简写形式：


列表样式：

 列表项符号(list-styletype)：

有序列表

  1. HTML
  2. CSS
  3. JavaScript

无序列表


去除列表符号：

有序列表

  1. HTML
  2. CSS
  3. JavaScript

无序列表


列表项图片(list-style-image)：

无序列表

编程成果十：

定义一个列表，每一个列表项都是一个超链接，并且要求去除列表项符号及超链接下划线，
超链接文本颜色为粉红色，并且单击某一个列表项就会以新窗口的形式打开，如下图。

编程题目

预期代码，如下：


预期效果，如下：
  1. Top1：百度
  2. Top2：淘宝
  3. Top3：新浪
  4. Top4：网易
  5. Top5：搜狐
表格格式：

 表格标题位置(caption-side)：
表格标题
表头单元格1 表头单元格2
表行单元格1 表行单元格2
表行单元格3 表行单元格4
表行单元格5 表行单元格6

表格边框合并(border-collapse)：
表格标题
表头单元格1 表格单元格2
表行单元格1 表行单元格2
表行单元格3 表行单元格4
表行单元格5 表行单元格6

表格边框间距(border-spacing)：
表格标题
表头单元格1 表头单元格2
表行单元格1 表行单元格2
表行单元格3 表行单元格4
表行单元格5 表行单元格6


图片样式：

 图片大小：

 紫色星空

图片边框：

 紫色星空

图片水平对齐：
紫色星空
紫色星空
紫色星空

垂直对齐：

 笨鸟blog网山峰星空笨鸟blog网
笨鸟blog网山峰星空笨鸟blog网
笨鸟blog网山峰星空笨鸟blog网
笨鸟blog网山峰星空笨鸟blog网

无法居中垂直？：vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式
山峰星空
山峰星空
山峰星空
山峰星空

文字环绕(float)：

 蓝紫星空

嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？
所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。
北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！

蓝紫星空

嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？
所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。
北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！


背景样式：

 背景颜色(background-color)：
背景颜色为：hotpink
背景颜色：#87CEFA

p元素文本颜色为white
p元素背景色为hotpink


背景图片样式(background-image)：

 图片无法显示？：div元素宽高都为零




《盛世华章》

有崇山峻岭，揽英气于太和；广厦千间，结丰姿于长安。四夷来朝，文轨混通；百业兴盛，物阜民安。 皇道熙熙，承平气象，四海一宇，德被遐荒。群贤毕至，视此盛时，缀绮谷以骈阗，陋往昔之瑰丽也。

予观天象，究地理，仰览俯察之间，感慨乎成颂。龙腾虎跃，天地之大变；凤鸣鹤唳，风雅之正声。 紫气东来，福照我土；祥云西去，吉播他邦。人道是：钟灵毓秀，太平有象；地德显彰，繁盛无疆。

斯乃网联万物，码通天下；高铁飞驰，如神龙在天。巨轮泛波，似鲲鹏翔海；丝路绵延，串联洲际。 资讯之速，犹胜曩昔；技术之精，更越前贤。是知电波不辍，信息如潮；智能所及，变革日新。

且夫盛世之光，非徒物质之炫目也。更在文教蒸蒸，艺术斐然。书院兴盛，诵经典之声；舞台广阔，演时代之戏。 笔墨联翩，绘锦绣胸臆；乐章悠扬，奏和谐心曲。精神文明，与日月同辉；道德修养，共山河比寿。

嗟夫！时逢盛世，吾辈何幸。论技艺之妙，叹视听之娱；谈智慧之深，咏梦想之翼。 凡此种种，皆彰显我华夏之巍巍立世，秉烛夜游，莫能穷其一二。敢不志喜，安得无言？ 故作此文，以记盛世之典刑，俾历览者弹冠相庆，感时遇之悠悠也。


背景图片重复(background-repeat)：


背景图片位置(background-position)：

 像素值：


关键字：


背景图片固定(background-attachment)：


编程成果十一：

 请将以下所示的图片当成背景图，要求铺满整个页面，不允许有空隙。

黄色爱心

预期代码，如下:


预期效果，跳转链接如下：

跳转到页面1

超链接样式：

 超链接伪类：

 哔哩哔哩官网

深入了解超链接伪类：

 中国大学MOOC官网

深入了解:hover伪类
笨鸟blog网

橙韵晚霞

鼠标默认样式

鼠标手状样式

自定义鼠标样式：
鼠标默认样式

鼠标手状样式

编程成果十二：

 在网页中添加一段文本链接，并且设置其在不同的状态下显示不同的效果，要求如下：
未访问时：没有下划线，颜色为红色。
鼠标经过时：有下划线，颜色为蓝色。

预期代码，如下：

预期效果，如下：

哔哩哔哩官网

盒子模型：

 CSS盒子模型：
笨鸟blog网

宽高:width、height：

块元素设置width和height：
笨鸟blog网
笨鸟blog网


行内元素设置width和height：
笨鸟blog网 笨鸟blog网

边框(border)：


padding局部样式：
笨鸟blog网


笨鸟blog网

margin局部样式：
笨鸟blog网

只有父元素,没有兄弟元素时：
笨鸟blog网


只有兄弟元素时：
笨鸟blog网


margin简写形式：
笨鸟blog网


浮动布局：

 正常文档流：
块元素
行内元素行内元素

块元素

行内元素行内元素
脱离文档流：
box1
box2
box3


浮动：
box1
box2

设置第一个div浮动：
box1
box2

box2
box1


设置第一个div和第二个div浮动：
box1
box2




清除浮动：
box1
box2
编程成果十三：

 使用浮动布局实现如下参考图的页面布局效果，其中各个元素间的间距是10px。
下面给出必要尺寸，剩余尺寸自己计算。

编程题

预期代码，如下：


预期效果，如下：

定位布局：

 固定定位(fixed)：
无定位的div元素
固定定位的div元素


相对定位：

 是否加入相对定位的比对：
第1个无定位的div元素
待相对定位的div元素
第2个无定位的div元素
第1个无定位的div元素
已相对定位的div元素
第2个无定位的div元素


绝对定位(absolute)：

 加入绝对定位前：
box1
box2
box3

加入绝对定位后：
box1
box2：送你去我的家,大瞬移术！
box3

box2哪儿去了诶？点击以下链接找到它：

box2 哪里跑,看我千里追踪术！


静态选择(static)：position定位的默认值