CSS是网页设计中不可或缺的一部分,它可以实现网页的各种效果,今天我们来学习一下如何实现上下两条分割线。首先,在HTML文件中添加以下代码:<div class="co
CSS是网页设计中不可或缺的一部分,它可以实现网页的各种效果,今天我们来学习一下如何实现上下两条分割线。
首先,在HTML文件中添加以下代码:
<div class="container"> <h1>标题</h1> <p>内容</p> </div>
接下来,我们需要使用CSS来实现分割线的效果。先为容器添加样式:
.container { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
这段代码中,我们为容器的顶部和底部分别添加了1像素粗的灰色实线。现在再为标题和内容分别添加样式:
h1 { margin: 0; padding: 20px; background-color: #f7f7f7; } p { margin: 0; padding: 20px; background-color: #eee; }
这段代码中,我们为标题和内容分别添加了20像素的内边距和背景色。注意,这里的margin要设置为0,否则会有额外的空白间距。
以上代码加起来就可以实现上下两条分割线的效果了。你也可以根据需要自行调整颜色、粗细和样式。
粉丝
0
关注
0
收藏
0