打卡十九天（今天没有感想）

最新推荐文章于 2024-08-30 15:33:13 发布

wdchun__

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量265

点赞数 3

文章标签： css css3 前端学习

本文链接：https://blog.csdn.net/wdchun__/article/details/140834672

版权

CSS

3.4.列表

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #49aabb;
}
/*ul li*/
/*
list-style:
none 去掉原点
circle  空心圆
decimal 有序数字
square  正方形


<div id="nav">
xxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxx
</div>
 */

ul{
    background: antiquewhite;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: #bb42b6;
    text-decoration: underline;
}

#nav{
    width: 300px;
    background: antiquewhite;
}

3.5.背景

背景颜色

背景图片

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("images/tx.png");/*默认是全部平铺的*/
    }
    .div1{
        background-repeat: repeat-x;/*水平*/
    }
    .div2{
        background-repeat: repeat-y;/*竖型*/
    }
    .div3{
        background-repeat: no-repeat;
    }

</style>

插入箭头

background: red url("../images/d.gif") 270px 10px no-repeat

背景：背景颜色位置（“在上一个文件夹要用../ ”） x,y轴位置只显示一个（默认是铺满）

3.6.渐变

背景图片渐变

    <style>

/*镜像渐变*/
        body{
            width: 500px;
            height: 1000px;
            background-image: linear-gradient(19deg,#8658bb 50%,#bb89ae 100%);
        }
    </style>

deg是角度两个颜色，确认百分比

4.盒子模型

4.1 什么是盒子模型

margin：外边距

padding：内边距

border：边框

4.2 边框

1.边框的粗细

2.边框的样子

3.边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1,ul,li,body{
            /*总有一个默认的外边距margin：0,常见操作*/
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /*border: 粗细  样式（实线虚线）  颜色*/
        #box{
         width: 300px;
            border: 1px solid #bfff00;
        }

        h2{
            font-size: 16px;
            background-color: #bbb358;
            line-height: 30px;
            margin: 0;
            color: #8658bb;
        }

        form{
            background: brown;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed #49aabb;
        }
        div:nth-of-type(1) input{
            border: 3px solid green;
        }



    </style>
</head>
<body>

<div id="box">
    <h2>
        会员登陆
    </h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

4.3 外边距

外边距妙用：使内容居中

<style>
    #box{
        margin: 0 auto;/*上下为0   auto自动居中*/
    }

</style>

wdchun__

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
打卡十九天（今天没有感想）

margin：外边距padding：内边距border：边框。
复制链接

扫一扫