HTML连载60-水平居中与设计一个团购界面

本文链接：https://blog.csdn.net/weixin_44630050/article/details/103797799

一、水平居中
1.margin:0 auto在绝对定位中就失效了
2.如何让绝对定位的元素水平居中？
只需要设置绝对定位元素的left:50%；然后再设置绝对定位元素的margin-left:-元素宽的一半；
这样就可以完成水平居中了

        div{
            width:50px;/*如果数值为100%，就代表这个div的宽度就是浏览器的整个宽度*/
            height:50px;
            background-color: red;
            position:absolute;
            left:50%;/*使用百分比意味着这个绝对定位的块左边距离浏览器一半的距离*/
        }
 .......省略代码......
 <body>
<div></div>
</body>

60.1
二、团购界面
注意点：这里的标志以及电脑配置，都是通过设置背景图片和绝对定位、相对定位来进行配置上的；这里面使用了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>

60.2
三、源码：
D154_CenterHorizontally.html
D155_GroupPurchase.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D154_CenterHorizontally.html
https://github.com/ruigege66/HTML_learning/blob/master/D155_GroupPurchase.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
60.3