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

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

实验八

1.利用

及标记设计8-8所示的页面，写出实现的HTML代码。要求使用链接外部样式表。设置要求如下：
（1）编写外部样式文件，名称为exp_8_1.css，采用链接外部样式表的方法。
（2）加载图像文件名为exp_8_1.jpg.
（3）定义两个图层，最外图层包含一个图像和一个字图层，在子图层内采用无序列表显示四行文字。
（4）对“央视”“腾讯”“跨界融合开放共赢”三个词span标记定义加粗样式。
（5）对“联建杯” 定义斜体，加粗，大小24px。样式如下：
.it{font-sytle:italic;font-size:24px;font-weight:bold;}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">#d1{background-color:cyan;}.it{font-style:italic;font-size:24px;font-weight:bold;}#span1{font-weight:bold;}
</style>
<title>新闻</title>
</head>
<body><div id="d1"><img alt="" src="1.jpg"><div><ul><li>2017<span id="span1">央视</span>综艺节目发力 彰显工艺大爱<li>继北京，上海后，2017年<span id="span1">腾讯</span>视频推介会昨天有在广州隆重举行<li><span id="span1">”跨界融合 开放共赢“</span>移动互联网营销峰会<li>首届<span class="it">"联建杯"</span>户外LED显示屏媒体大赛评审圆满落幕</ul></div></div>
</body>
</html>

背景颜色使用的是cyan（青色）
因为博主比较懒，没有使用链接外部样式表的方法，而是直接将属性写在了里面，要使用外部样式表的话，可以是自已定义一个css文件然后将属性直接写在里面然后即可，注意要在头部将你写的css文件链接起来<link href="你写的css文件（exp_8_1.css）" rel="stylesheet" type="text/css">

2.按如下要求设计“匾牌设计”页面，如图8-9所示，要求如下：页面标题为“匾牌设计”；页面内容为一个图层中嵌入一个段落，段落的内容”海纳百川有容乃大“；段落的样式为”斜体，特粗，70px，行高1.5倍，隶书“；图层div的#div0样式：”宽度800px，高度100px，边框宽度20px，线性outset，颜色#ff0000，填充20px，边距100px“；页面所有内容居中显示（body标记的样式）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>匾牌设计</title>
<style type="text/css">body{text-align:center;}span{font:italic bolder 70px/1.5em 隶书;text-align:center;background:#99ffff;}#div0{weight:800px;height:100px;border:20px outset #ff0000;padding:20px;margin:100px;}
</style>
</head>
<body><div id="div0"><span>海纳百川 有容乃大</span></div>
</body>
</html>