04 div+css

作业一

使用内联样式表及内部样式表，设计如下图所示的页面，要求如下：

1） 使用标题字和段落标记进行文字显示，在内部样式表中定义 body 标记内的信息‘居中显

示“，定义 p 标记字体为”隶书“

2） 通过 p 标记的 style 属性定义字体大小属性的值分别为 150%、200%、250%。‘朝辞白帝彩

云间“，不定义任何样式。

	
		
		
		
	
	
		
早发白帝城
		
 李白
		
朝辞白帝彩云间，
		
千里江陵一日还。
		
两岸猿声啼不住，
		
轻舟已过万重山。

	

 作业二

按如下要求设计 Web 页面，实现下图所示的页面效果。

1）页面标题为：web 前端开发工程师工作内容；

2）页面题目：1 号标题字显示“web 前端开发工程师工作内容”；3 号标题字显示“web 前端

开发工程师在不同的公司，会有不同的职能，但称呼都是类似的。”

3）采用无序列表显示工作内容，分四个方面，分别是“做网站设计、网页界面开发”“做网页

界面开发”“做网页界面开发、前台数据绑定和前台逻辑的处理”“设计、开发、数据处理”；每

个列表项目显示一种不同风格的工作内容，其中第一个列表项 ID 的样式为“斜体、加粗、

24px、黑体”；第二个列表项样式为“背景色 blue，字符间距 1px”;第三个列表项 ID 样式为“字

体大小 18px、颜色红色”；第四个列表项行内样式“颜色#0000cc，背景色#c0c0c0、隶书”;

4)定义全局样式为“楷体、蓝色”。

	
		
		
		
	

	
		
Web前端开发工程师工作内容
		
web 前端开发工程师在不同的公司，会有不同的职能，但称呼都是类似的。
		

			
做网站设计、网页界面开发
			
做网页界面开发
			
做网页界面开发、前台数据绑定和前台逻辑的处理
			
设计、开发、数据处理
		
	

作业三

利用 div 和 span 标记设计如下页面，要求使用链接外部样式表，要求：

1） 编写外部样式表，命名：job_8_3.css，采用链接外部样式表的方法。

2） 加载图像文件名为：job_8_3.jpg

3） 定义两个图层，外面图层包含一个图像和一个子图层，在子图层内用无序列表显示四行

文字。

4） 对“央视“、”腾讯“、”跨界融合、开放共赢“三个词采用 span 标记定义加粗样式

5） 对“联建杯“定义斜体，加租，大小 24px.

	
		
		
		
	
	
		

			
			

				

					
2017央视综艺节目发力 彰显公益大爱
					
继北京、上海后，2017年腾讯视频推介会昨又在广州隆重举行
					
“跨界融合 开放共赢”移动互联网营销峰会
					
首届“联建杯”户外LED显示屏媒体大赛评审圆满落幕
				
			
		
	

#s1{
	font-weight: bold;
	color: red;
	text-decoration: underline;
}
#s2{
	font-style: italic;
	font-size: 24px;
	font-weight: bold;
}
div{
	background-color: skyblue;
}

 

 

 作业四

按如下要求设计 Web 页面,要求：

1） 页面标题为：牌匾样式

2） 页面内容为一个图层嵌入一个段落，段落内容为“海纳百川 有容乃大“；段落样式为”斜

体特粗 70px 行高 1.5 倍 隶书“；图层 div 的#div0 样式为”宽度 1000px、高度 100px，边框

宽度 20px，线型 outset，颜色#ff0000，填充 20px, 边距 1000px“;页面中所有内容居中

显示（body 标记样式）。

 

	
		
		
		
	
	
		

			

				海纳百川 有容乃大
		
		
		
			
		
	

作业五

按如下要求设计 Web 页面,要求：

1） 页面标题为：文轩图书榜

2） 页面内容为：一个标题，3 个图层，其中 1 个图层中包含 2 个并列的子图层。第一个子

图层插入一幅图像 image4-3.jpg，第二个子图层中插入一个无序列表。

外图层#div3 的样式为“宽度 900px、高度 150px、边框宽度 1px、实线、边框颜色为#F0F0F0、

向左浮动”

第 1 个子图层#div1 的样式为：边距 5px,宽度 160px,高度 150px,边框宽度 1px,实线、边

框颜色#E0E0E0，向左浮动。

第 2 个子图层#div2 的样式为：宽度 700px,高度 150px,第二个子图层内嵌入无序列表 ul

标记样式为“去除列表项前的符号”；列表项的行高为 1.5 倍；第一个列表项中“9”的 span

标记 sp1 样式为“背景色#FF0033,颜色白色，宽度 10px,高度 10px,”;”古汉语常用字字典

“的 span 标记的 sp2 样式为”字体特粗，大小 16px,黑体；第 3 个列表项中的“商务印书馆

span 标记 sp3 样式为”颜色#FF0033，字体特粗，字大小 16px，黑体”；第 4 个列表项内

段落首行缩进 2 个字符；第 5 个列表项中的 25.6 元的 span 标记的 sp4 类样式为“颜色

#c0c0c0，字体特粗，大小 16px,黑体，有删除线效果“。

3） 3 号标题字显示“文轩图书榜“

	
		
		
		
	

	
		
文轩图书榜
		

			

			
			

				

					
9 古汉语常用字字典(第 4 版)
					
(13 条评论)
					

					
王力 等 原著者 2005 年 07 月 商务印书馆
					
本书由著名语言学家王力、岑麟祥、林焘、戴澧、唐作藩、蒋绍愚等十余位专家学者编写，是学习古 汉语的必备工具书。
					

				

			
			

				购买 收藏 25.60 元 （8.0 折） 定价：￥32.00 元
			

		
	

 作业六

按如下要求设计 Web 页面,要求：

1） 页面标题为：巴城老街风景

2） 页面内容标题：3 号标题字显示内容“巴城老街风景“，标记样式为”字体大小 48px,1.5 倍

行距，右对齐，颜色白色，背景色#009966“.

3） 段落内容为“巴城老街位于江苏的阳澄湖。在江南，人们都喜欢吃又香又肥的阳澄湖大闸

蟹，大闸蟹的产地就在巴城。相传第一个吃螃蟹的人就是巴城老街的人。“段落样式为”

首行缩进 2 个字符，大小 28px,行距 1.5 倍，字符间距 2px,下划线“。

4） 4 张图片分别为 image42.jpg---image45.jpg，分别插入到 1 个图层 div 中.img 标记样式

为“宽度 20%、高度 200px,边框宽度 20px，样式 inset,边框颜色#006633;“

5） 图层 div 的样式为“宽度 100%，高度 160px,向左浮动“

	
		
		
		
	

	
		
巴城老街风景
		
巴城老街位于江苏的阳澄湖。在江南，人们都喜欢吃又香又肥的阳澄湖大闸 蟹，大闸蟹的产地就在巴城。相传第一个吃螃蟹的人就是巴城老街的人。