团购网商品展示页面html,HTML连载60 |
您所在的位置:网站首页 › 团购页面html › 团购网商品展示页面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; } ? |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |