欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Python全棧之學習CSS(2)

 更新時間:2022年01月23日 16:59:53   作者:熬夜泡枸杞  
這篇文章主要為大家介紹了Python全棧之CSS,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

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;
            /* 控制背景圖像的位置 ; 參數(shù)1 控制左右 參數(shù) 控制上下 */
            /* 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>

請?zhí)砑訄D片描述

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;
            /* 參數(shù)1:寬 參數(shù)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>

請?zhí)砑訄D片描述

請?zhí)砑訄D片描述

請?zhí)砑訄D片描述

請?zhí)砑訄D片描述

請?zhí)砑訄D片描述

請?zhí)砑訄D片描述

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 控制層疊關(guān)系: 值越大越在上層,值越小越在下層
                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 
        效果:脫離文檔流,后面的內(nèi)容自動補位
        使用:絕對定位會參照父級的相對定位進行移動,如果父級中沒有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 
        效果:脫離文檔流,后面的內(nèi)容自動補位
        使用:絕對定位會參照父級的相對定位進行移動,如果父級中沒有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 '>: 檢索或設(shè)置對象中的參與過渡的屬性 
        <' transition-duration '>: 檢索或設(shè)置對象過渡的持續(xù)時間 
        <' transition-timing-function '>: 檢索或設(shè)置對象中過渡的動畫類型 
        <' transition-delay '>: 檢索或設(shè)置對象延遲過渡的時間  
        */
        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轉(zhuǎn)換元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display 轉(zhuǎn)換元素</title>
    <style>
        div
        /* display:inline; 轉(zhuǎn)換成行內(nèi)元素 */
        {display:inline;border:solid 1px red;width:1000px;height:20px;}
        span
        /* display:block; 轉(zhuǎn)換成塊狀元素 */
        {display:block;width:100px;height:50px;border:solid 1px red;}
        a
        /* display:inline-block; 轉(zhuǎn)換成行內(nèi)塊狀元素 */
        {display:inline-block;width:500px;height:30px;border:solid 1px red;}        
        p
        /* display:none 隱藏元素 */
        {display:none;}
    </style>
</head>
<body>
    <!-- 元素的分類:
        塊狀元素 : block
        行內(nèi)元素 : inline
        行內(nèi)塊狀元素  : 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  向左浮動  ,元素脫離原始文檔流,后面的內(nèi)容自動補齊;
    float:right 向右浮動  ,元素脫離原始文檔流,后面的內(nèi)容自動補齊;
    目的: 讓塊狀元素在一排顯示 
    clear:both; 清除兩邊的浮動
    -->
    <div class="content">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
    <!-- 
    # ###行內(nèi)元素浮動:
        如果對行內(nèi)元素進行浮動:
        默認會把行內(nèi)元素升級成行內(nèi)塊狀元素,可以設(shè)置寬和高 
        消除浮動產(chǎn)生的影響:clear:both;
    -->
    <div class="content2">
        <a href="#" id="a1">點擊我跳轉(zhuǎn)1</a>
        <a href="#" id="a2">點擊我跳轉(zhuǎn)2</a>
    </div>
</body>
</html>

4. html里面的bug

4.1 float內(nèi)容塌陷問題

<!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  向左浮動  ,元素脫離原始文檔流,后面的內(nèi)容自動補齊;
    float:right 向右浮動  ,元素脫離原始文檔流,后面的內(nèi)容自動補齊;
    目的: 讓塊狀元素在一排顯示 
    clear:both; 清除兩邊的浮動
    -->
    <div class="content">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
    <!-- 
    # ###行內(nèi)元素浮動:
        如果對行內(nèi)元素進行浮動:
        默認會把行內(nèi)元素升級成行內(nèi)塊狀元素,可以設(shè)置寬和高 
        消除浮動產(chǎn)生的影響:clear:both;
    -->
    <div class="content2">
        <a href="#" id="a1">點擊我跳轉(zhuǎn)1</a>
        <a href="#" id="a2">點擊我跳轉(zhuǎn)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 如果內(nèi)容超出邊框,會以下拉框的形式顯示,不會溢出 -->
    <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 對超出部分內(nèi)容進行隱藏 -->
        <div class="test">
            <p>蘇打速度</p>
            <p>蘇打速度</p>
            <p>蘇打速度</p>
            <p>蘇打速度</p>
            <p>蘇打速度</p>
        </div>
    </body>
</html>

總結(jié)

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

  • python關(guān)于第三方日志的QA記錄詳解

    python關(guān)于第三方日志的QA記錄詳解

    這篇文章主要為大家介紹了python關(guān)于第三方日志的QA記錄詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-10-10
  • python實現(xiàn)帶錯誤處理功能的遠程文件讀取方法

    python實現(xiàn)帶錯誤處理功能的遠程文件讀取方法

    這篇文章主要介紹了python實現(xiàn)帶錯誤處理功能的遠程文件讀取方法,涉及Python使用socket操作遠程文件的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下
    2015-04-04
  • python怎樣更加簡潔的解決小明種蘋果

    python怎樣更加簡潔的解決小明種蘋果

    這篇文章主要介紹了python怎樣更加簡潔的解決小明種蘋果。想了解數(shù)據(jù)結(jié)構(gòu)和算法的同學,可以參考下
    2021-04-04
  • 淺談PyTorch的可重復性問題(如何使實驗結(jié)果可復現(xiàn))

    淺談PyTorch的可重復性問題(如何使實驗結(jié)果可復現(xiàn))

    今天小編就為大家分享一篇淺談PyTorch的可重復性問題(如何使實驗結(jié)果可復現(xiàn)),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-02-02
  • Python 數(shù)據(jù)可視化之Bokeh詳解

    Python 數(shù)據(jù)可視化之Bokeh詳解

    這篇文章主要介紹了Python數(shù)據(jù)可視化庫Bokeh的使用總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2021-11-11
  • 如何在Cloud Studio上執(zhí)行Python代碼?

    如何在Cloud Studio上執(zhí)行Python代碼?

    這篇文章主要介紹了如何在Cloud Studio上執(zhí)行Python代碼?,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-08-08
  • 對python中的pop函數(shù)和append函數(shù)詳解

    對python中的pop函數(shù)和append函數(shù)詳解

    今天小編就為大家分享一篇對python中的pop函數(shù)和append函數(shù)詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-05-05
  • Python 函數(shù)裝飾器詳解

    Python 函數(shù)裝飾器詳解

    這篇文章主要介紹了Python函數(shù)裝飾器,結(jié)合實例形式詳細分析了Python裝飾器的原理、功能、分類、常見操作技巧與使用注意事項,需要的朋友可以參考下
    2021-10-10
  • python中24小時制轉(zhuǎn)換為12小時制的方法

    python中24小時制轉(zhuǎn)換為12小時制的方法

    最近需要實現(xiàn)一個需求,求用戶輸入24小時制的時間,然后顯示12小時制的時間。具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • python數(shù)據(jù)分析必會的Pandas技巧匯總

    python數(shù)據(jù)分析必會的Pandas技巧匯總

    用Python做數(shù)據(jù)分析光是掌握numpy和matplotlib可不夠,numpy雖然能夠幫我們處理處理數(shù)值型數(shù)據(jù),但很多時候,還有字符串,還有時間序列等,比如:我們通過爬蟲獲取到了存儲在數(shù)據(jù)庫中的數(shù)據(jù),一些Pandas必會的用法,讓你的數(shù)據(jù)分析水平更上一層樓
    2021-08-08

最新評論