DIV CSS ._html/css_WEB-ITnose

What is DIV CSS

DIV CSS is a web page layout method. This web page layout method is different from the tables in the traditional HTML web design language. (table) positioning method separates web page content and presentation through CSS style files.

CSS (CascadingStyle Sheets), a cascading style sheet, is used to define the display form of HTML elements. It is a standard technology introduced by W3C for formatting web content.

Advantages:

1. Make the page load faster: Since most of the page code is written in CSS, the page size becomes smaller . Compared with the table nesting method, DIV CSS separates the page into more areas, which are loaded layer by layer when the page is opened. Instead of enclosing the entire page in a large table like table nesting, the loading speed is very slow.

2. Refactored page modification is convenient: div css page separates html and css files. That is to say, the content and presentation of a web page are separated. Generally, the style layout of the real website can be modified by modifying the css style attributes in a small part of the css file, such as background color, font color, website width, etc. It is convenient that table does not have.

3. Reduce traffic costs: The page size becomes smaller and the browsing speed becomes faster, which is the biggest advantage for some websites that control host traffic.

Disadvantages:

1. Development difficulty: (1) The technology required to develop div css is relatively high, although it is not unattainable, and it is much more complicated than table positioning , even for website design experts it is easy for problems to arise. (2) div css has not yet achieved unified compatibility with all browsers. Sometimes, a normal page displayed in IE may be completely different in Firefox. Therefore, div css needs to be tested on many browser versions, such as: various versions of IE browser, Firefox, Google

2. Long development time: div css layout takes longer to develop and produce than table layout.

3. The development cost is higher than that of table: Because of technical and time constraints, divcss pages are more expensive than table pages.

The concept of CSS box model

The core of using CSS is to use the box model. In our daily life, we encounter boxes that are rectangular and square boxes that can hold things, such as shoe boxes and gift boxes. CSS boxes are also used to store things. For example, we need to lay out text content and images on a web page.

Boxes in real life

Boxes in CSS

We can modify the content (content) and fill it through the CSS box model (padding), border (border) and margin (margin), and change the style of the content in the web page.

Specific example:

DIV CSS login interface code implementation:

DIV code:

[ html] view plain copy print ?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>                                         

           

           

网站会员登录

           

                      

用户名：           

           

密　码：           

           

                              

               

               

                                                               " %> < !-- Reference CSS style sheet-->

Website member login

< p>Username:

Password:

CSS code:

[css] view plain copy print ?

* /* Set the inner and outer borders of all elements to 0 */ { margin:0px; } .caption { margin-left:150px; } .logo { float:left ; 0px; } #login { margin-top: 25px; } #login p { margin-top:20px; } #image { float:left; } .txtbox { width:180px; }

* /* Set the inner and outer 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; } .txtbox { width:180px; } Rendering: