web前端开发技术（第3版）储九良著课后实验

最新推荐文章于 2024-08-20 21:42:39 发布

过客的博客

最新推荐文章于 2024-08-20 21:42:39 发布

阅读量5.4k

点赞数 4

文章标签： css3 html5 javascript

本文链接：https://blog.csdn.net/weixin_44656906/article/details/109553773

版权

实验7

1.使用内联样式表及内部样式表，设计7-9所示的页面。设计要求如下：
（1）使用标题字和段落标记进行文字显示，在内部样式表中定义body标记内信息“居中显示”，定义p标记字体为“隶书”。
（2）通过怕标记style属性定义字体大小属性（font-size）的值为150%，200%，250%,"朝辞白帝彩云间，"不定义任何任何样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>shi yan 7-1</title>
<style type="text/css">
	body{text-align:center;font-family:"隶书"}
	
</style>
</head>
<body>
	<h4>早发白帝城</h4>
	<p>李白</p>
	<p>朝辞白帝彩云间，</p>
	<p style="font-size:150%;">千里江陵一日还。</p>
	<p style="font-size:200%;">两岸猿山啼不住，</p>
	<p style="font-size:250%">轻舟已过万重山。</p>
</body>
</html>

图7-9 古诗排版效果

2.按如下要求设计“Web前端开发工程师工作内容”页面，设计如图7-10所示的页面。要求如下：
（1）页面要求为：Web前端开发工程师工作内容；
（2）页面标题：1 号标题字显示“Web前端开发工程师工作内容”；3号标题字显示“Web前端工程师在不同的公司，会有不同的职能，但称呼都是类似的。”；
（3）采用无序列表显示工作内容，分四个方面，分别是“做网站设计、网页界面开发”“做网页界面开发”“做网页界面开发、前台数据绑定和前台逻辑的处理”“设计、开发、数据处理”；每一列表显示一种不同风格的工作内容，其中第一列表项ID（li1）样式为“斜体、加粗、24px、黑体”；第二个列表项类（li2）样式为“背景色#9999cc、字符间距1px”；第三个列表项ID（li3）样式为“字体大小18px、颜色红色”；第四列表项行内样式“颜色#0000cc、背景色#c0c0c0、隶书”；
（4）定义全局样式为“楷体。蓝色”。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web前端开发工程师工作内容</title>
<style type="text/css">
	#li1{font-style:italic;font-weight:bold;font-size:24px;font-family:黑体;}
	#li2{background-color:#9999cc;letter-spacing:1px;}
	#li3{font-size:18px;color:red;}
	#li4{background-color:#c0c0c0;font-family:隶书;}
	body{font-family:楷体;color:blue;}
</style>
</head>
<body>
	<h1>Web前端开发工程师工作内容</h1>
	<h3>web前端工程师在不同的公司，会有不同的职能，但称呼都是类似的</h3>
	<ul>
		<li id="li1">做网站设计、网页界面开发</li>
		<li id="li2">做网页界面开发</li>
		<li id="li3">做网页界面开发、前台数据绑定和前台逻辑处理</li>
		<li id="li4" style="color:#0000cc">设计、开发、数据处理</li>
	</ul>
</body>
</html>

图7-10 Web前端开发工程师工作内容