HTML5学习：第一阶段05

最新推荐文章于 2022-05-27 21:35:38 发布

诺卡先生

最新推荐文章于 2022-05-27 21:35:38 发布

阅读量126

点赞数

分类专栏： HTM5

本文链接：https://blog.csdn.net/weixin_44202489/article/details/109900534

版权

HTM5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            /* list-style-type:square; */
            background:brown;
            /* list-style-image:url(../images/a.png); */
            height:30px;

            /* list-style-position:outside; */
            list-style:none;
        }
    </style>
</head>
<body>
    <ul>
        <li>周五耶耶耶</li>
        <li>周五耶耶耶</li>
        <li>周五耶耶耶</li>
        <li>周五耶耶耶</li>
        <li>周五耶耶耶</li>
    </ul>
</body>;
</html>

<!-- 
    1.控制列表符号
        list-style-type:  circle / square .. 

    2.list-style-image:url();

    3.list-style-position:inside /  outside;


    ***list-style:none;   //去掉列表符号
 -->

二、border边框属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            /* border:10px solid pink; */
            border-width:10px 20px 30px 40px;
            border-style:dashed dotted;
            border-color:skyblue purple;

            /* 单一方向进行设置 */
            /* border-top:10px solid red;
            border-bottom:8px dashed orange;
            border-left:6px double pink;
            border-right:4px dotted purple; */
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!-- 
    边框：
       a:默认情况，宽高是长在宽高外面的
       **b:border:10px solid pink;   复合写法（简写）
           属性拆分：
               border-width:   边框的大小 
               border-color:   边框的颜色
               border-style:   边框类型（solid实线  dotted 点状线 dashed虚线  double双线  ）

      ** c:单一方向设置：
               border-top/border-bottom/border-left/border-right

       d:border-width/color/style:
            1个值    四周都统一设置
            2个值    上下  左右
            3个值     上  左右  下
            4个值     上   右   下  左
            
        e：用边框画三角形 
            透明：transparent;           
 -->

三、border话三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:0;
            height:0;
            border-top:20px solid yellow;
            border-bottom:30px solid blue;
            border-left:40px solid pink;
            border-right:30px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

四、背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:600px;
            height:600px;
            /* background: teal; */
            /* 背景颜色 */
            background-color:yellowgreen;

            /*  背景图*/
            background-image:url("../images/timg.jpg");

            /* 是否平铺 */
            background-repeat:no-repeat;

            /* 背景图位置 */
            background-position:right bottom;
        }
    </style>
</head>
<body>
    <div>
        我在哪里呀！！！
    </div>
</body>
</html>

<!-- 
    背景属性：
        background      简写

    背景颜色：
        background-color: 

    背景图片：
        background-image:url("图片路径");
        特点：背景图不占据有空间
            容器大小 大于 图片的大小       平铺
            容器大小 等于 图片大小         只能显示一张
            容器大小 小于 图片大小         只能显示部分图片

    背景图的显示状态：
        background-repeat:
             ***no-repeat; 
             repeat
             repeat-x
             repeat-
             
    背景图的位置：
        background-position:水平方向  垂直方向；
            取值：10px   50px;  固定大小（正值往右边下边  负值往左边上边）
                  left right  center    水平方位值
                  top  bottom center     垂直方向的方位值

    ***简写：
       background:颜色  url(图片路径) no-repeat center center;
 -->

五、css的继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
         /* 权重<1 */
         *{
            color:tomato;
            font-size:30px;
        }
        /* 继承的权重为  0 */
        div{
            color:yellowgreen;
            font-size:20px;
        }
       
       
    </style>
</head>
<body>
    <div>
        <p>我是小宝宝~~</p>
    </div>
</body>
</html>


<!-- 
    不可继承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

    所有元素可继承：visibility和cursor。
    ****内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。
    块状元素可继承：text-indent和text-align
    列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
    表格元素可继承：border-collapse。
 -->

六、盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:200px;
            height:200px;
            background:linear-gradient(to left top,skyblue,pink,tomato,yellowgreen);
            /* background:yellow url("../images/timg.jpg") no-repeat; */
            /* 添加泡沫 */
            /* padding:50px 10px 5px 1px; */
            /* padding:40px; */

            /* margin:100px 20px 10px 1px; */

            margin-bottom:100px;
        }
        p{
            width:100px;
            height:100px;
            background:purple;
            margin-top:10px;
            /* margin-top:150px; */
        }
    </style>
</head>
<body>
    <div>
        我是口红999
    </div>
    <p>我是其他快递盒子</p>
</body>
</html>

<!-- 
    盒模型：
        内容（文本、图片、视频、线条...）
        内填充（泡沫）
        盒子本身  （border）
        外边距

    盒模型具体的css属性：
        内填充： padding
        外边距： margin


    需求：
        让文本和盒子之间产生间距，给盒子添加泡沫（padding）

    padding的用法：
        1:padding是长在盒子与内容之间的，长在盒子里面的
        ***2：padding的作用：控制内容 和 盒子之间的距离
        3：padding属性是添加给父元素的
        4：padding会撑开盒子的大小，
               ***如果想要盒子保持原来的大小，需要在宽高的基础上减去padding的值
               注意：如果这个盒子没有固定大小（没有设置固定的大小），不用去减padding
        5:padding的设置方式：
            padding:50px;                  四周
            padding:50px 10px;             上下  左右
            padding:10px 20px 30px;         上  左右  下
            padding:10px 20px 30px 40px;    上 右 下 左

        6.单一方向设置padding：
            padding-top/padding-bottom/padding-left/padding-right

        7.padding不会影响背景图
        8.padding不支持负值



    需求：
         想要两个同级盒子之间产生距离，用margin

    margin的使用：
        1:margin是长在盒子外面的
        **2：margin控制当前盒子与  其他同级盒子之间的位置关系
        3:margin不会改变盒子的大小
        4：margin值的设置：
            margin:10px;     四周
            margin:10px 20px;   上下  左右
            margin：10px 20px 30px;  上  左右  下
            margin:10px 20px 30px 40px;  上右下左
        5.margin单一方向值的设置
             margin-top/margin-bottom/margin-left/margin-right
        6.margin可以取负值
        7.margin出现bug:
            a：同级元素 上下 之间的margin值，不会叠加计算，而是重叠，按照最大的进行
            b: 当父元素和子元素都没有浮动时候，给第一个子元素添加margin-top,会错误的添加给父元素
               解决：给父元素添加padding-top
        
 -->

七、margin的bug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:500px;
            height:300px;
            background:#ccc;
            padding-top:100px;
            
        }
        p{
            width:100px;
            height:100px;
            background:orange;
            /* 会错误的添加给父元素 */
            /* margin-top:100px; */
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

诺卡先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习：第一阶段05

一、列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li{
复制链接

扫一扫