(3)样式说明。 #wrap:宽度900px、边界Oauto、边框红色2px实线、上边界Spx。div:文本居中对齐。#pic:宽度420px、高度300px、背景图像为e×8.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”、边界为“10px10px10px0”、填充为5px。 (2)Mobile 首字母样式为“大小3em、向左浮动”。 (3)h1样式为“文字居中、白色、背景为#678”。
时间: 2023-07-10 16:28:30 浏览: 308
很抱歉,作为一个语言模型AI,我无法直接呈现页面效果,但是我可以为您提供相应的CSS样式代码,您可以将其添加到HTML页面中进行展示和测试。
HTML代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>图文并茂的页面</title>
<style>
#wrap {
width: 900px;
border: 2px solid red;
border-top: none;
overflow: auto;
}
div {
text-align: center;
}
#pic {
width: 420px;
height: 300px;
background-image: url('cup.jpg');
background-repeat: no-repeat;
background-position: center;
float: left;
background-color: #77A;
border: 1px dashed gray;
margin: 10px 10px 10px 0;
padding: 5px;
}
#text {
width: 420px;
height: 500px;
background-image: url('cup.jpg');
background-repeat: no-repeat;
background-position: right;
float: right;
background-color: #77A;
padding: 10px;
font-weight: bold;
}
.title {
font-family: "华文彩云";
font-size: 32px;
text-align: center;
color: white;
background-color: #678;
margin-top: 0;
padding: 10px;
}
#author {
font-size: 12px;
font-family: "黑体";
text-align: right;
margin-bottom: 24px;
}
p {
font-family: "隶书";
font-size: 24px;
border: 2px solid;
letter-spacing: 0.5em;
line-height: 1.5em;
text-align: center;
padding: 10px;
}
#mobile {
float: left;
font-size: 3em;
}
</style>
</head>
<body>
<div id="wrap">
<h1 class="title">图文并茂的页面</h1>
<div>
<img src="cup.jpg" alt="cup" id="pic">
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, libero eget tempus pharetra, ipsum enim sagittis lectus, nec bibendum metus augue sit amet felis. Donec elementum ante non elit ultrices, ut sodales sapien elementum. Integer luctus ultrices velit, non blandit risus dignissim vitae. Sed quis mauris velit.
</div>
</div>
<div id="author">作者:XXX</div>
<p>图文并茂的页面</p>
<div id="mobile">Mobile</div>
</div>
</body>
</html>
```
阅读全文