Shulou(Shulou.com)06/01 Report--

This article mainly explains the "HTML level centering method and how to design a group buying interface". The content in the article is simple and clear, and it is easy to learn and understand. please follow the editor's train of thought to study and learn "HTML level centring method and how to design a group buying interface".

I. level is in the middle

1.margin:0 auto is invalid in absolute positioning.

two。 How to center the absolutely positioned elements horizontally?

You only need to set the left:50%; of the absolute positioning element and then set half the width of the margin-left:- element of the absolute positioning element.

In this way, we can finish the horizontal center.

Div {if the value of width:50px;/* is 100%, it means that the width of the div is the entire width of the browser * / height:50px; background-color: the percentage of red; position:absolute; left:50%;/* usage means that the left side of the absolutely positioned block is half the distance from the browser. Omit the code.

Second, group purchase interface

Note: the logo and computer configuration here are all through the setting of background pictures and absolute and relative positioning? For configuration; this uses the span tag, which does not need to be set to display:inline-block; because it has been separated from the standard stream

D155_GroupPurchase * {margin:0px; padding:0px;} div {width: 500px; height: 550px; border:1px black solid; margin:0 auto; margin-top:100px; position:relative / * the trademark and configuration information of typesetting images is wanted here * /} 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;}

? Thank you for your reading, the above is the content of "HTML level centralization method and how to design a group purchase interface". After the study of this article, I believe you have a deeper understanding of the HTML level center method and how to design a group purchase interface, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.