合给出的素材,运用CSS选择器、CSS文本相关样式及高级特性实现如图3-32所示的图文混排页面。 图3-32 图文混排页面效果展示
时间: 2024-09-29 21:16:11 浏览: 40
为了创建如图3-32所示的图文混排页面,你可以使用HTML结构来组织内容,包括段落、图片和列表等元素,然后结合CSS选择器和属性来控制布局和样式。以下是一个简单的步骤和示例:
1. **HTML结构**:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>图文混排标题</h1>
</header>
<main>
<section class="content-container">
<div class="text-block">
<p>这是文本部分,可以是一篇文章或描述。</p>
</div>
<div class="image-block">
<img src="example.jpg" alt="图片描述">
</div>
</section>
<ul class="list">
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<!-- 添加更多列表项 -->
</ul>
</main>
</body>
</html>
```
2. **CSS样式 (styles.css)**:
```css
/* 设置全局样式 */
body {
font-family: Arial, sans-serif;
}
header {
background-color: #f0f0f0;
padding: 20px;
}
.content-container {
display: flex; /* 使用弹性盒模型 */
justify-content: space-between; /* 文本和图片水平居间 */
padding: 20px;
}
.text-block {
flex: 1; /* 文本块占大部分空间 */
margin-right: 50px; /* 留出一些间距 */
}
.image-block img {
width: 100%; /* 图片自适应宽度 */
height: auto; /* 高度自动计算 */
margin-top: 10px;
}
.list {
list-style-type: none;
padding: 0;
}
.list li {
margin-bottom: 10px;
}
```