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

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

程序员文章站 2022-03-29 11:01:19
一、水平居中 1.margin:0 auto在绝对定位中就失效了 2.如何让绝对定位的元素水平居中? 只需要设置绝对定位元素的left:50%;然后再设置绝对定位元素的margin-left:-元素宽的一半; 这样就可以完成水平居中了 div{ width:50px;/*如果数值为100%,就代表这 ......

一、水平居中

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>

 

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

二、团购界面

注意点:这里的标志以及电脑配置,都是通过设置背景图片和绝对定位、相对定位来​进行配置上的;这里面使用了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>

 

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

三、源码:

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大数据学习视频礼包

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