css怎么用网页布局 |css3 文字两边加横线

/* 定义网页布局，包括头部、导航栏、主体内容和底部 */
header, nav, section, footer {
display: block;
}
/* 设置头部和底部的背景颜色 */
header, footer {
background-color: #22a6b3;
color: #fff;
}
/* 设置导航栏的样式 */
nav {
background-color: #fff;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
/* 设置导航栏中每个链接的样式 */
nav a {
display: inline-block;
color: #444;
padding: 0 1em;
text-decoration: none;
font-size: 16px;
}
/* 激活链接的样式 */
nav a.active {
color: #22a6b3;
font-weight: bold;
}
/* 设置头部标题的样式 */
header h1 {
font-size: 24px;
padding: 1em;
}
/* 设置主体内容的样式 */
section {
padding: 1em;
}
/* 设置底部版权信息的样式 */
footer p {
padding: 1em;
font-size: 14px;
text-align: center;
}

以上代码中，大家通过选择器和属性来定义了网页布局的各个部分，包括头部、导航栏、主体内容和底部版权信息。通过设置不同的样式，大家可以让每个部分拥有不同的外观和排版效果，从而为用户呈现出一个完整、清晰、美观的网页。

CSS 布局的重点在于如何通过样式来控制网页的各个部分的大小、位置、颜色、字体等属性，使其更加多样化和吸引人。同时，对于像响应式布局这样的高级技巧，大家也可以通过 CSS 来实现，使网页在不同设备上都能够呈现出最佳的外观和用户体验。