实验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”
效果图