首页网页设计div加css模板

网页设计div加css模板

时间: 2023-08-02 17:45:01 浏览: 146

以下是一个简单的网页设计 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` 类。这样，它们就会继承相应的样式。

阅读全文