团购网商品展示页面html,HTML连载60-水平居中与设计一个团购界面

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

一、水平居中

1.margin:0 auto在绝对定位中就失效了

2.如何让绝对定位的元素水平居中？

只需要设置绝对定位元素的left:50%；然后再设置绝对定位元素的margin-left:-元素宽的一半；

这样就可以完成水平居中了

div{

width:50px;/*如果数值为100%，就代表这个div的宽度就是浏览器的整个宽度*/

height:50px;

background-color: red;

position:absolute;

left:50%;/*使用百分比意味着这个绝对定位的块左边距离浏览器一半的距离*/

}

.......省略代码......

二、团购界面

注意点：这里的标志以及电脑配置，都是通过设置背景图片和绝对定位、相对定位来?进行配置上的；这里面使用了span这个标签，由于已经脱离了标准流，因此不需要在设置为display:inline-block;了

D155_GroupPurchase

*{

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;

}

?