HTML連載59-子絕父相

時間 2019-12-27

標籤 html 連載欄目 HTML 简体版

原文原文鏈接

1、子絕父相html

1.只使用相對定位，對圖片的位置進行精準定位。git

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            list-style:none;

            width:800px;

            height:50px;

            background-color: red;

            margin:0 auto;

        }

        ul li{

            float:left;

            width:100px;

            height: 50px;

            text-align:center;

            background-color: yellow;

            line-height: 50px;

        }

        ul li:nth-of-type(4){

            /*這裏複習了同類標籤選擇第幾個進行設置它的樣式*/

            background-color: blue;

        }

        ul li img{

            position:relative;

            left: -30px;

            top: -14px;

            width: 20px;

            height: 16px;

            /*這裏能夠先寫個大概的數字，而後利用谷歌開發者定位進行滾動數據調節*/

           

        }

</style>

</head>

<body>

<ul>

    <li>拍賣金融</li>

    <li>美妝館</li>

    <li>京東超市</li>

    <li>

        全球購<img src="bear.jpg">

    </li>

    <li>閃購</li>

    <li>團購</li>

    <li>拍賣</li>

    <li></li>

</ul>

</body>

</html>

這種方式的的缺點：能夠看到雖然利用相對定位進行了數據調節來達到讓圖片定位的效果，可是因爲相對定位是在標準流的基礎上進行調節，因此原來圖片的位置（也就是全球購後面的那塊區域）依然是被佔用着的。github

2.下面只使用絕對定位來進行試驗。微信

        ul li img{

            position:absolute;

            left: 900px;

            top: 1px;

            width: 20px;

            height: 16px;

    }

這種方式的缺點：上次連載說到，絕對定位會以首屏來進行定位，所以當改變網頁大小的時候，將會形成變形，定位到了不合理的地方。學習

3.所以要同時運用絕對定位和相對定位進行編排才最合理大數據

 

        ul li:nth-of-type(4){

            /*這裏複習了同類標籤選擇第幾個進行設置它的樣式*/

            background-color: blue;

            position:relative;

        }

        ul li img{

            /*介紹一個方法：子絕父相，即子元素使用絕對定位，父元素使用相對定位*/

            position:absolute;

            left: 41px;

            top: 1px;

            width: 20px;

            height: 16px;

    }

3、源碼：ui

D153_SubAbsoluteFathRelative.htmlspa

地址:.net

https://github.com/ruigege66/HTML_learning/blob/master/D153_SubAbsoluteFathRelative.html3d

2.CSDN：https://blog.csdn.net/weixin_44630050

3.博客園：https://www.cnblogs.com/ruigege0000/

4.歡迎關注微信公衆號：傅里葉變換，我的帳號，僅用於技術交流，後臺回覆「禮包」獲取Java大數據學習視頻禮包