HTML連載60-水平居中與設計一個團購界面

時間 2020-01-02

標籤 html 連載水平居中設計一個團購界面欄目 HTML 简体版

原文原文鏈接

1、水平居中html

1.margin:0 auto在絕對定位中就失效了git

2.如何讓絕對定位的元素水平居中？github

只須要設置絕對定位元素的left:50%；而後再設置絕對定位元素的margin-left:-元素寬的一半；瀏覽器

這樣就能夠完成水平居中了微信

        div{

            width:50px;/*若是數值爲100%，就表明這個div的寬度就是瀏覽器的整個寬度*/

            height:50px;

            background-color: red;

            position:absolute;

            left:50%;/*使用百分比意味着這個絕對定位的塊左邊距離瀏覽器一半的距離*/

        }

 .......省略代碼......

 <body>

<div></div>

</body>

2、團購界面學習

注意點：這裏的標誌以及電腦配置，都是經過設置背景圖片和絕對定位、相對定位來進行配置上的；這裏面使用了span這個標籤，因爲已經脫離了標準流，所以不須要在設置爲display:inline-block;了大數據

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D155_GroupPurchase</title>

    <style>

        *{

            margin:0px;

            padding:0px;

        }

        div{

            width: 500px;

            height: 550px;

            border:1px black solid;

            margin:0 auto;

            margin-top:100px;

            position:relative;/*這裏想要利用子絕父相來進行排版圖片的商標和配置的信息*/

        }

        div img{

            width: 500px;

            height: 500px;

        }

        div .brand{

            width: 111px;

            height: 29px;

            background: url("image/laptop_label.jpg") no-repeat -21px -12px;

            position:absolute;

            left: 20px;

            top:0px;

        }

        div .configuration{

            width: 435px;

            height: 40px;

            background:url("image/laptop_label.jpg") no-repeat -78px -515px;

            position:absolute;

            left:20px;

            top:505px;

        }

</style>

</head>

<body>

<div>

    <img src="image/laptop.jpg" alt="">

    <span class = "brand"></span>

    <span class = "configuration"></span>

</div>



</body>

</html>