CSS基础样式表：网页布局实例
<h2>CSS基础样式表：网页布局实例</h2>
<p>这份CSS样式表提供了一个简单的网页布局方案，包含了全局样式、头部样式、主内容样式和底部样式，适合初学者学习和使用。css/* 全局样式 */body { font-family: Arial, sans-serif; margin: 0; padding: 0;}</p>
<p>/* 头部样式 */header { background-color: #333; color: #FFF; padding: 20px;}</p>
<p>header h1 { margin: 0;}</p>
<p>header nav ul { list-style-type: none; margin: 0; padding: 0;}</p>
<p>header nav ul li { display: inline; margin-right: 10px;}</p>
<p>header nav ul li a { color: #FFF; text-decoration: none;}</p>
<p>/* 主内容样式 */section { padding: 20px;}</p>
<p>section h2 { margin-top: 0;}</p>
<p>section ul { list-style: none; padding: 0;}</p>
<p>section ul li { margin-bottom: 10px;}</p>
<p>/* 底部样式 */footer { background-color: #333; color: #FFF; padding: 20px; text-align: center;}</p>
<p><strong>样式详解:</strong></p>
<p><strong>全局样式:</strong></p>
<ul>
<li><code>body</code>: 设置网页默认字体为 Arial，清除浏览器默认边距。</li>
</ul>
<p><strong>头部样式:</strong></p>
<ul>
<li><code>header</code>: 设置头部背景颜色为深灰色，文字颜色为白色，添加内边距。- <code>header h1</code>: 消除标题默认外边距。- <code>header nav ul</code>: 设置导航栏样式，去除列表默认样式，清除内外边距。- <code>header nav ul li</code>: 设置导航项为行内元素，添加右侧外边距。- <code>header nav ul li a</code>: 设置链接颜色为白色，去除下划线。</li>
</ul>
<p><strong>主内容样式:</strong></p>
<ul>
<li><code>section</code>: 设置主内容区域内边距。- <code>section h2</code>: 消除二级标题默认顶部外边距。- <code>section ul</code>: 去除列表默认样式，清除内边距。- <code>section ul li</code>: 设置列表项底部外边距。</li>
</ul>
<p><strong>底部样式:</strong></p>
<ul>
<li><code>footer</code>: 设置底部背景颜色为深灰色，文字颜色为白色，添加内边距，文字居中显示。</li>
</ul>
<p><strong>使用说明:</strong></p>
<p>将这段CSS代码保存为<code>.css</code>文件，并在HTML文档的<code><head></code>标签中使用<code><link></code>标签引入即可应用样式。</p>
<p>**例如:**html<!DOCTYPE html><html><head> <title>我的网页</title> <link rel='stylesheet' href='style.css'> </head><body> </body></html></p>
<p>这段代码提供了一个简单的网页布局方案，你可以根据自己的需求进行修改和扩展。</p>
原文地址: https://www.cveoy.top/t/topic/Z7m 著作权归作者所有。请勿转载和采集!