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

##web前端开发技术（第3版）储九良著课后实验实验91.编写效果如图9-15所示的网页。页面中由左右两个图层构成，左边div设置背景图像，图像居中显示，右边div设置背景图像填充，添加有效果文字内容。设计要求如下：（1）HTML中div结构如下：<div id="wrap"><div id="pic"></div><div id="text">&l

过客的博客

9900人浏览 · 2021-01-11 20:55:04

过客的博客 · 2021-01-11 20:55:04 发布

##web前端开发技术（第3版）储九良著课后实验
实验9
1.编写效果如图9-15所示的网页。页面中由左右两个图层构成，左边div设置背景图像，图像居中显示，右边div设置背景图像填充，添加有效果文字内容。设计要求如下：
（1）HTML中div结构如下：

<div id="wrap">
	<div id="pic"></div>
	<div id="text">
			<div id="title">木兰花令.拟古决绝词</div>
			<div id="author">纳兰性德</div>
			<div id="content">
				<p>人生若只如初见，</p>
				...
			</div>
		</div>
	</div>

(2)内容为“人生如只如初见，何事秋风悲画扇。等闲却便故人心，却道故心人易变。骊山语罢清宵半，泪雨霖铃终不怨。何如薄幸锦衣郎，比翼连枝当日愿。”。
（3）样式说明。
#warp:宽度900px，边界0auto、边框红色2px实线，上边界5px。div:文本居中对齐。#pic：宽度420px、高度300px、背景图像ex8.jpg、不重复、位置居中、图像向左浮动、背景色为#77A.#text：背景图像为ex8.jpg、向右浮动，宽度420px，高度500px、背景色为#77A、填充10px、子图粗细为bold。#title：字体为“华为彩云”、大小为32px#author：字号大小为12px、字体为黑体、文字右对齐、下边界为24px。p:字体为隶书、字号大小为24px、边界为2px，字符间距为0.5em、行高1.5em、文字剧中对齐。
具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#wrap{width:900px;height:1000px;}
	div{text-align:center;}
	#pic{width:400px;height:400px;float:left;background-image:url(1.jpg);background-color:red;}
	#text{width:400px;height:600px;float:right;background-image:url(2.jpg);background-color:red;}
	#title{font-size:32px;font-family:"华为云彩";}
	#author{text-align:right;}
	P{font-family:"隶书";font-size:24px;line-height:1.5em;}
</style>
</head>
<body>
	<div id="wrap">
		<div id="pic"></div>
		<div id="text">
			<div id="title">木兰花令.拟古决绝词</div>
			<div id="author">纳兰性德</div>
			<div id="content">
				<p>人生若只如初见，</p>
				<p>何事秋风悲画扇。</p>
                <p>等闲变却故人心，</p>
                <p>却道故心人易变。</p>
                <p>骊山雨罢清宵半，</p>
                <p>泪雨霖铃终不怨。</p>
                <p>何如薄幸锦衣郎，</p>
                <p>比翼连枝当日愿。</p> 
			</div>
		</div>
	</div>
</body>
</html>

2.设置如图9-16所示的图文并茂的页面。设计要求：
（1）插入图像为cup.jpg,图像向左浮边框为“1px 虚线颜色为 gray”、边界为“10px 10px 10px 0”、填充为5px。
（2）Mobile首字母样式为“大小3em、向左浮动”。
（3）h1样式为“文字居中、白色、背景为#678”.
具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	h1{text-align:center;color:white;background:#678;}
	img{float:left;border:1px dashed gray;margin:10px 10px 10px 0;padding:5px;}
	p{font-size:14px}
	#first{font-size:3em;float:left;}
</style>
</head>
<body>
		<h1>Head Line</h1>
		<img src="1.jpg">
		<p><span id="first">M</span>obile Widge使用的标准的..</p>
</body>
</html>