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

实验9

1、编写如图所示网页。网页中由左、右两个图层构成，左边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）样式说明。
#wrap:宽度90px、边界0 auto、边框红色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、文字居中对齐。



效果图

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

效果图