CSS常见的基本样式问题汇总

最新推荐文章于 2024-05-01 12:01:29 发布

CCYS666

最新推荐文章于 2024-05-01 12:01:29 发布

阅读量462

点赞数 1

分类专栏：学习文章标签： CSS

本文链接：https://blog.csdn.net/qq_40212505/article/details/99743560

版权

学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1. 去除a标签下划线

a {
text-decoration: none;
}

2. 去除li标签前面小黑点

li {
list-style: none;
}

3. 让li标签横向排列

li {
float: left;
}

4. 垂直水平居中的方式

width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .a1 {
            background-color: red;
            border: 1px solid;
            width: 150px;
            height: 150px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -75px 0 0 -75px;
        }

        .a2 {
            background-color: green;
            border: 1px solid;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -50px;
        }

        .a3 {
            background-color: blue ;
            border: 1px solid;
            width: 50px;
            height: 50px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -25px 0 0 -25px;
        }
    </style>
</head>

<body>
    <div class="a1">盒子1</div>
    <div class="a2">盒子2</div>
    <div class="a3">盒子3</div>
</body>

</html>

在这里插入图片描述

5.设置圆框边角

设置成圆形：
border-radius：50%； 在这里插入图片描述
设置某一个角：（左上角）

border-top-left-radius:50%;

在这里插入图片描述

CCYS666

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS常见的基本样式问题汇总

1. 去除a标签下划线a {text-decoration: none;}2. 去除li标签前面小黑点li {list-style: none;}3. 让li标签横向排列li {float: left;}4. 待更新…
复制链接

扫一扫