CSS学习（六）——背景，边框

最新推荐文章于 2023-09-01 01:21:15 发布

笔锋Sharpen

最新推荐文章于 2023-09-01 01:21:15 发布

阅读量154

点赞数

本文链接：https://blog.csdn.net/weixin_52725999/article/details/114433807

版权

背景

背景其实不是很多，能够想到的也就只有背景颜色，和背景图片

背景颜色

<div>
    background-color="red";
</div>

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            /*边框border：边框的粗细，边框的样式，边框的颜色*/
            border: 1px solid red;
            /*默认是全部平铺的 就是repeat*/
            background-image: url("images/abc.jpg");
        }
        .div1{
            /*水平平铺background-repeat: repeat-x;
              竖直平铺background-repeat: repeat-y;
            */
            background-repeat: repeat-x;
        }
        .div2{
            /*
            不平铺background-repeat: no-repeat;
            环绕background-repeat: round;
            ...
            */
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

背景总结：

div{
    /*颜色，图片，图片显示的位置（x，Y） 平铺方式*/
    background:red url("../images/abc.png") 270px 10px no-repeat;
}
/*相当于*/
div{
    background-image:url("../images/abc.png");
    background-repeat:no-repeat;
    background-position:270px 10px;
}

渐变界面

推荐网站

盒子模型

margin：外边距

border：边框

padding：内边距

边框（border）

边框的粗细
边框的样式
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 ul li a body{
            /*body总有一个默认的外边距为margin:0;*/
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        #box{
            width: 300px;
            /*粗细，样式，颜色*/
            border: 1px solid red;
        }

        h2{
            font-size: 16px;
            background-color: #221362;
            line-height: 30px;
            margin: 0;
        }
        
        form{
            background-color: #41d7b9;
        }
        div:nth-of-type(1) input{
            /*solid 实线*/
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            /*dashed 虚线*/
            border: 3px dashed black;
        }

    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
           <span>用户名</span>
            <input type="text">
        </div>
        <div>
            <span>密码</span>
            <input type="password">
        </div>

    </form>
</div>
</body>
</html>

笔锋Sharpen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（六）——背景，边框

背景背景其实不是很多，能够想到的也就只有背景颜色，和背景图片背景颜色<div> background-color="red";</div>背景图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{
复制链接

扫一扫