What is Div + CSS?
Div + CSS is a webpage layout method. This webpage layout method is different from the table Positioning Method in the traditional HTML webpage design language, separate the content and performance of the webpage.
CSS (cascadingstyle sheets) stacked style sheet, used to define the display form of HTML elements, is a W3C standard technology for formatting web content.
Advantages:
1. Make the page Load faster: because most of the page code is written in CSS, the page size becomes smaller. Compared with table nesting, div + CSS splits pages into more areas and loads them layer by layer when opening pages. Unlike table nesting, the whole page is circled in a big table, making loading slow.
2. Convenient modification of page reconstruction: The DIV + CSS page separates HTML and CSS files. That is to say, the content of a Web page is separated from the form of representation. Generally, you can modify the CSS style attribute in a small part of the CSS file to modify the style layout of the real site, such as the background color, font color, and website width.
3. Reduce traffic fees: The page size becomes smaller and the browsing speed becomes faster, which makes it the biggest advantage for some websites that control host traffic.
Disadvantages:
1. Difficult Development: (1) the development of Div CSS requires a high level of technology. Although it is not highly difficult, it is much more complicated than table positioning, even for website design experts, problems may also occur. (2) Div + CSS is not yet compatible with all browsers. Sometimes, when a normal page is displayed in IE, the Firefox browser may be totally invisible. Therefore, div + CSS requires a large number of browser versions, such as IE browsers, Firefox, and Google
2. Long development time: the div css layout is relatively longer than the table layout development time.
3. Development costs are higher than table: because of the technical and time nature, divcss pages are higher than table pages.
Concept of CSS Box Model
The core of CSS is to use the box model. In daily life, we encounter boxes used to hold rectangular and square boxes, such as shoe boxes and gift boxes. CSS boxes are also loaded. For example, we need to layout text content and images on webpages.
Boxes in real life
Box in CSS
We can use the CSS box model to modify content, padding, borders, and margin to change the style of content on the webpage.
Specific instance:
Code Implementation of the DIV + CSS logon interface:
Div code:
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. CS "inherits =" _ default "%> <HTML>CSS code:
*/* Set the internal and external borders of all elements to 0 */{margin: 0px ;}. caption {margin-left: 150px ;}. logo {float: Left; margin-Right: 15px; margin-top:-15px;} body/* Set Font */{font-size: 14px;} # loginfrm {margin: 200px 500px; width: 400px ;}# login {margin-top: 25px ;}# login P {margin-top: 20px ;}# image {float: left?#.txt box {width: 180px ;}:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
