边框和标签显示模式

最新推荐文章于 2024-08-15 18:19:19 发布

烤红薯卖地瓜

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量253

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_17131933/article/details/139753102

版权

边框：

border:

属性：边框线的粗细程度边框样式颜色

属性值	边框样式
solid	实线
dashed	虚线
dotted	点线
double	双实线

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 250px;
            height: 250px;
            /*border: 5px solid blue;
            /* 边框   线的粗细程度  边框样式   颜色 
                solid 实线
                dashed 虚线
                dotted 点线
                double 双实线            
            */
            border-top: 15px solid red;
            border-right: 15px dashed black;
            border-bottom: 15px dotted pink;
            border-left: 15px double green;
        }
        
        .circle {
            width: 500px;
            height: 250px;
            border: 5px solid red;
            border-radius: 100% 0 100% 0;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
    <br><br><br><br>
    <div class="circle">

    </div>
</body>

</html>

块级元素特征（div、h1-h6、p、ul、li、ol、br、hr）：

1.会独占一整行

2.可以设置宽高

3.块级元素里面可以容纳任意的元素和内容

行内元素特征（span 、input、a、b、i、s、u）：

1.不会独占一整行

2.不可以设置宽高

3.行内元素里面只能容纳文本和图片和其他的行内元素

行内块元素：

1.不会独占一行

2.可以设置宽高xing（※）

3.行内块可以容纳任意的元素和内容

img（是一个特殊存在）

背景样式

imge{

1.平铺

background-repeat: repeat; 平铺

background-repeat: norepeat; 不平铺

2.拉伸

background-size: ;

}

图片附着：

fixed

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            块级元素特征（div、h1-h6、p、ul、li、ol、br、hr）：
            1.会独占一整行
            2.可以设置宽高
            3.块级元素里面可以容纳任意的元素和内容

            行内元素特征（span 、input、a、b、i、s、u）：
            1.不会独占一整行
            2.不可以设置宽高
            3.行内元素里面只能容纳文本和图片和其他的行内元素

            行内块元素：
            1.不会独占一行
            2.可以设置宽高xing※
            3.行内块可以容纳任意的元素和内容
            
            img（特殊）
        */
        /*背景样式
            imge{
                1.平铺
                    background-repeat: repeat; 平铺
                    background-repeat: norepeat; 不平铺
                2.拉伸
                    background-size: ;
            }
        
        */
        /*
            图片附着
            fixed
        */
        
        .obox {
            background-attachment: fixed;
        }
        
        .box {
            width: 1470px;
            height: 720px;
            background-color: rgba(63, 61, 61, 1);
            background-image: url(./SIM900A\ GSM模块.jpg);
            /*background-image: image-set(color 0 0 0 0.7);*/
            background-repeat: no-repeat;
            background-position: 495px, 226.5px;
            background-attachment: fixed;
            background-size: 100% 100%;
        }
        
        .nav {
            background-color: aquamarine;
            display: inline-block;
            width: 100px;
            height: 25px;
            text-align: center;
            color: rgb(194, 194, 194);
            line-height: 25px;
        }
        
        .nav:hover {
            text-shadow: 0px 0px 15px rgb(39, 223, 255);
            color: aliceblue;
        }
    </style>


</head>

<body>
    <div class="box">
        <div class="nav">首页</div>
        <div class="nav">新闻</div>
        <div class="nav">角色</div>
        <div class="nav">世界</div>
        <div class="nav">漫画</div>
        <div class="nav">社区</div>
        <div class="nav">赛事</div>
        <div class="nav">充值中心</div>
    </div>
</body>

</html>

烤红薯卖地瓜

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
边框和标签显示模式

3.行内元素里面只能容纳文本和图片和其他的行内元素。3.块级元素里面可以容纳任意的元素和内容。3.行内块可以容纳任意的元素和内容。2.可以设置宽高xing（※）属性：边框线的粗细程度边框样式颜色。img（是一个特殊存在）
复制链接

扫一扫