CSS系列005——画直线

最新推荐文章于 2026-06-25 15:59:08 发布

原创最新推荐文章于 2026-06-25 15:59:08 发布 · 1.7k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

寒冰1307

关注

标签

#css #html #前端

分类前端开发

收录于

CSS案例专栏收录该内容

12 篇文章

订阅专栏

该HTML代码段展示了如何使用CSS样式创建水平和垂直的蓝色线条。通过设置`border-top`和`border-right`属性，创建了50%宽度的水平线以及50px宽度的垂直线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画直线</title>
    <style>
        .hori-line{
            width: 50%;
            height: 2px;
            border-top: solid blue;
        }
        .vertical-line{
            width: 50px;
            height: 20%;
            border-right:solid blue
        }
    </style>

</head>
<body>
    <hr class='hori-line' />
    <br>
    <div class='hori-line'>水平竖线</div>
    <br>
    <div class='vertical-line'>垂直横线</div>
    <br>
    <div class='hori-line'>水平竖线</div>
</body>
</html>

效果如图