网页设计div加css模板
时间: 2023-08-02 15:45:01 浏览: 142
以下是一个简单的网页设计 div 加 CSS 模板示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
/* 定义 div 样式 */
.container {
width: 80%; /* 宽度为80% */
margin: auto; /* 居中显示 */
background-color: #f2f2f2; /* 背景颜色 */
padding: 20px; /* 内边距为20像素 */
box-shadow: 0px 0px 10px #888; /* 添加阴影效果 */
border-radius: 10px; /* 圆角为10像素 */
}
/* 定义标题样式 */
.title {
font-size: 24px; /* 字体大小为24像素 */
font-weight: bold; /* 加粗 */
margin-bottom: 10px; /* 底部间距为10像素 */
}
/* 定义文本样式 */
.text {
font-size: 16px; /* 字体大小为16像素 */
line-height: 1.5; /* 行高为1.5倍 */
margin-bottom: 20px; /* 底部间距为20像素 */
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">网页标题</h1>
<p class="text">这是一段文本。</p>
</div>
</body>
</html>
```
在这个示例中,我们定义了一个名为 `container` 的 div 标签,并在 CSS 样式表中添加了一些样式。其中,我们设置了宽度、居中显示、背景颜色、内边距、阴影效果和圆角等样式。我们还定义了名为 `title` 和 `text` 的类,用于设置标题和文本的样式。最后,在 HTML 代码中,我们将标题和文本放在 `container` div 中,并为它们分别添加了 `title` 和 `text` 类。这样,它们就会继承相应的样式。
阅读全文