使用css after伪元素构造分割线

最新推荐文章于 2023-12-08 18:27:13 发布

原创最新推荐文章于 2023-12-08 18:27:13 发布 · 7k 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS浮动属性和伪元素实现的两栏布局方案。通过将左侧菜单栏设置为浮动，并利用`:after`伪元素创建一条分隔线来区分两个区块。这种方法简洁且实用，适用于网页的基本布局设计。

测试地址：

http://www.w3school.com.cn/tiy/t.asp?f=csse_background

<html>
<head>
<style type="text/css">
.header-block {
   float:left;
   min-width:250px
}
.header-block:after {
    background-color: #606060;
    bottom: 0;
    content: "";
    display: block;
    left: 250px;
    position: absolute;
    top: 0;
    width: 1px;
}
</style>
</head>

<body>
<div class="header-block">
菜单
</div>
<div class="main-block">
内容
</div>
</body>

</html>