欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Python全栈之学习CSS(2)

程序员文章站 2022-03-07 14:34:12
目录1. css背景图1.1 背景属性1.2 背景图片引入2. 相对_绝对_固定2.1 相对定位2.2 绝对定位2.3 固定定位3. float浮动3.1 display转换元素3.2 float浮动...

1. css背景图

1.1 背景属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 背景属性</title>
    <style>
        .c1
        {
            /* 具体写法 */
            width:600px;
            height:600px;
            border:solid 1px red;
            background-color: yellow;
            /* 控制背景图 */
            background-image:url("./images/xiao.jpg");
            /* 控制是否平铺 repeat-x  repeat-y  no-repeat  repeat(默认)*/
            background-repeat:no-repeat;
            /* 控制背景图像的位置 ; 参数1 控制左右 参数 控制上下 */
            /* background-position:  50%  50%; */
            /* 固定背景图使用 fixed 了解 */
            background-attachment: fixed;
        }
        .c2
        {
            /* 简写 */
            width:600px;
            height:600px;
            margin:10px 20px;
            border:solid 1px red;        
            /* 图片 是否平铺 [图片位置] */
            background: url("./images/xiao.jpg") no-repeat 50% 50%;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>

Python全栈之学习CSS(2)

1.2 背景图片引入

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片的引入</title>
    <style>
        /* 鼠标滑过,点亮图片 */
        div.c1
        {width:60px;height:60px;border:solid 1px gray;background: url("./images/tag.jpg") no-repeat;}
        div.c1:hover
        {
            background: url("./images/tag.jpg") no-repeat;
            background-position: -312px -3.5px;
        }
        .gg
        {
            width:400px;
            height:400px;
            border:solid 1px red;
        }
        /* 一张图片的导入 */
        div.c2
        {
            background: url("./images/xiao.jpg") no-repeat;
            /* 参数1:宽 参数2:高  50px 50px / 100% 100% */
            /* 控制背景图像的尺寸大小 background-size: 100% 100% ; */
            background-size: 100% auto;
        }
        /* 多张图片导入 */
        div.c3
        {
            background: 
                url("./images/game/map_19.gif") no-repeat 30px 80px,
                url("./images/game/map_20.gif") no-repeat 50px 50px,
                url("./images/game/map_18.gif") no-repeat 100px 50px,
                url("./images/game/map_14.gif") no-repeat 180px 100px,
                url("./images/game/map_03.gif");
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2 gg"></div>
    <div class="c3 gg"></div>
</body>
</html>

Python全栈之学习CSS(2)

Python全栈之学习CSS(2)

Python全栈之学习CSS(2)

Python全栈之学习CSS(2)

Python全栈之学习CSS(2)

Python全栈之学习CSS(2)

2. 相对_绝对_固定

2.1 相对定位

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位:相对定位 relative</title>
    <style>
        .gg
        {
            width:200px;
            height:200px;
            border:solid 1px red;
        }
        .c1
        {background:violet;}
        .c2
        {
            background:tan;
            position:relative;
            top:10px;
            left:100px;
            z-index:2;
        }
        .c3
        {background:blue;}
        .c4
        {background:green;}
    </style>
</head>
<body>
        <!-- 
            相对定位: 参考点是他自己本身,相对于原始的位置进行定位;
            如果添加了定位:无论是添加(相对,绝对,固定)属性,添加之后会增加额外的其他属性:
            z-index 控制层叠关系: 值越大越在上层,值越小越在下层
                left
                top
                right
                bottom 
                z-index
        
        -->
        <div class="c1 gg"></div>
        <div class="c2 gg"></div>
        <div class="c3 gg"></div>
        <div class="c4 gg"></div>
</body>
</html>

2.2 绝对定位

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位:绝对定位 absolute</title>
    <style>
        .gg
        {width:200px;height:200px;border:solid 1px red;}
        .big
        {
            width:1000px;
            height:1000px;
            border:solid 1px red;
            margin:100px 220px;
        }
        .c1
        {
            background:violet;
            /* 无效 */
            position: relative; 
        }
        .c2
        {
            background:tan;
            position: absolute;
            top:0px;
            left:0px;
            /* bottom:0px;
            right:0px; */
            /* z-index:-1; */
        }
        .c3
        {background:blue;}
        .c4
        {background:green;}
    </style>
</head>
<body>
    <!-- 
        绝对定位:参考点默认参考的是body 
        效果:脱离文档流,后面的内容自动补位
        使用:绝对定位会参照父级的相对定位进行移动,如果父级中没有relative,相对于body进行定位;
            (1)把想要的父级元素变成relative
            (2)把要定位的元素变成 absolute
    -->
    <div class="big">
        <div class="c1 gg"></div>
        <div class="c2 gg"></div>
        <div class="c3 gg"></div>
        <div class="c4 gg"></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>定位:绝对定位 absolute</title>
    <style>
        .gg
        {width:200px;height:200px;border:solid 1px red;}
        .big
        {
            width:1000px;
            height:1000px;
            border:solid 1px red;
            margin:100px 220px;
        }
        .c1
        {
            background:violet;
            /* 无效 */
            position: relative; 
        }
        .c2
        {
            background:tan;
            position: absolute;
            top:0px;
            left:0px;
            /* bottom:0px;
            right:0px; */
            /* z-index:-1; */
        }
        .c3
        {background:blue;}
        .c4
        {background:green;}
    </style>
</head>
<body>
    <!-- 
        绝对定位:参考点默认参考的是body 
        效果:脱离文档流,后面的内容自动补位
        使用:绝对定位会参照父级的相对定位进行移动,如果父级中没有relative,相对于body进行定位;
            (1)把想要的父级元素变成relative
            (2)把要定位的元素变成 absolute
    -->
    <div class="big">
        <div class="c1 gg"></div>
        <div class="c2 gg"></div>
        <div class="c3 gg"></div>
        <div class="c4 gg"></div>
    </div>
</body>
</html>

2.3 固定定位

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位:固定定位 fixed</title>
    <style>
        /* *号代表通配选择符,代表所有标签,默认标签中含有默认的间距,要在一开始的时候全部去掉; */
        *
        {margin:0px;padding:0px;}
        body
        {height:2000px;}
        .c1
        {
            width:500px;
            height: 600px;
            border:solid 1px red;
            background-color: green;
            position: fixed;
            left:50%;
            margin-left:-250px;
            top:50%;
            margin-top:-300px;
        }
        /* 
        <' transition-property '>: 检索或设置对象中的参与过渡的属性 
        <' transition-duration '>: 检索或设置对象过渡的持续时间 
        <' transition-timing-function '>: 检索或设置对象中过渡的动画类型 
        <' transition-delay '>: 检索或设置对象延迟过渡的时间  
        */
        img
        {
            position:fixed;
            bottom:20px;
            left:-100px; 
            transition: all 1s ease 0.1s;           
        }
        
        img:hover
        {
            left:0px;
            background-color: red;
        }

    </style>
</head>
<body>
     <img src="images/xiao.jpg"/>
     <div class="c1">我没动</div>
     <p>1111222333444</p>
</body>
</html>

3. float浮动

3.1 display转换元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display 转换元素</title>
    <style>
        div
        /* display:inline; 转换成行内元素 */
        {display:inline;border:solid 1px red;width:1000px;height:20px;}
        span
        /* display:block; 转换成块状元素 */
        {display:block;width:100px;height:50px;border:solid 1px red;}
        a
        /* display:inline-block; 转换成行内块状元素 */
        {display:inline-block;width:500px;height:30px;border:solid 1px red;}        
        p
        /* display:none 隐藏元素 */
        {display:none;}
    </style>
</head>
<body>
    <!-- 元素的分类:
        块状元素 : block
        行内元素 : inline
        行内块状元素  : inline-block
    -->
    <div>第一个div</div>
    <div>第二个div</div>
    <span>我是span1</span>
    <span>我是span2</span>
    <a href="#">我是链接1</a>
    <a href="#">我是链接2</a>
    <p>12345</p>
</body>
</html>

3.2 float浮动

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float 浮动</title>
    <style>
        .content
        {width:700px;clear:both;}
        .content .c1
        {background: red;width:100px;height:100px;float:left;}
        .content .c2
        {background: tan;width:100px;height:100px;float:left;}
        .content .c3
        {background:blue;width:100px;height:100px;float:left;}
        .content .c4
        {background:green;width:100px;height:100px;float:left;}
        .content2
        {width:700px;height:500px;border:solid 1px red;clear:both;}
        #a1
        {float:left;width:100px;height:100px;border:solid 1px red;}
        #a2
        {display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;}
    </style>
</head>
<body>
    <!-- 
    # ###块状元素浮动:
    float:left  向左浮动  ,元素脱离原始文档流,后面的内容自动补齐;
    float:right 向右浮动  ,元素脱离原始文档流,后面的内容自动补齐;
    目的: 让块状元素在一排显示 
    clear:both; 清除两边的浮动
    -->
    <div class="content">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
    <!-- 
    # ###行内元素浮动:
        如果对行内元素进行浮动:
        默认会把行内元素升级成行内块状元素,可以设置宽和高 
        消除浮动产生的影响:clear:both;
    -->
    <div class="content2">
        <a href="#" id="a1">点击我跳转1</a>
        <a href="#" id="a2">点击我跳转2</a>
    </div>
</body>
</html>

4. html里面的bug

4.1 float内容塌陷问题

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float 浮动</title>
    <style>
        .content
        {width:700px;clear:both;}
        .content .c1
        {background: red;width:100px;height:100px;float:left;}
        .content .c2
        {background: tan;width:100px;height:100px;float:left;}
        .content .c3
        {background:blue;width:100px;height:100px;float:left;}
        .content .c4
        {background:green;width:100px;height:100px;float:left;}
        .content2
        {width:700px;height:500px;border:solid 1px red;clear:both;}
        #a1
        {float:left;width:100px;height:100px;border:solid 1px red;}
        #a2
        {display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;}
    </style>
</head>
<body>
    <!-- 
    # ###块状元素浮动:
    float:left  向左浮动  ,元素脱离原始文档流,后面的内容自动补齐;
    float:right 向右浮动  ,元素脱离原始文档流,后面的内容自动补齐;
    目的: 让块状元素在一排显示 
    clear:both; 清除两边的浮动
    -->
    <div class="content">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
    <!-- 
    # ###行内元素浮动:
        如果对行内元素进行浮动:
        默认会把行内元素升级成行内块状元素,可以设置宽和高 
        消除浮动产生的影响:clear:both;
    -->
    <div class="content2">
        <a href="#" id="a1">点击我跳转1</a>
        <a href="#" id="a2">点击我跳转2</a>
    </div>
</body>
</html>

4.2 margin-top失效问题

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin-top失效问题</title>
    <style>
        *
        {margin:0px;padding:0px;}
        .box1
        {width:100px;height:100px;margin-top:10px;border:solid 1px red;}
        .father
        {width:300px;height:300px;background: yellow;overflow: hidden;}
        .son
        {width:150px;height:150px;margin-top:50px;}
    </style>
</head>
<body>
    <!-- overflow: hidden; overflow auto 如果内容超出边框,会以下拉框的形式显示,不会溢出 -->
    <div class="box1">
        sdfsf
    </div>
    <div class="father">
        <div class="son">12</div>        
    </div>
</body>
</html>

4.3 overflow

<!doctype html>
<html>
    <head>
    <meta charset="utf-8" />
    <style>
        .test {
            overflow: hidden;
            width: 200px;
            height: 100px;
            background: #eee;
        }
    </style>
    </head>
    <body>
        <!-- overflow:hidden 对超出部分内容进行隐藏 -->
        <div class="test">
            <p>苏打速度</p>
            <p>苏打速度</p>
            <p>苏打速度</p>
            <p>苏打速度</p>
            <p>苏打速度</p>
        </div>
    </body>
</html>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!

相关标签: Python 全栈 CSS