The basis of CSS DIV web page reconstruction technology_html/css_WEB-ITnose

DIV CSS is one of the commonly used terms in website standards (or "WEB standards"), usually to explain the difference from the positioning of tables in HTML web design language, because XHTML websites In the design standards, table positioning technology is no longer used, but DIV CSS is used to achieve various positioning.
CSS is the abbreviation of Cascading Style Sheets in English. It is a computer language used to express file styles such as HTML or XML.
Since HTML4.01, the HTML language has no longer released new versions. The reason is that the HTML language is becoming more and more complex and specialized. That is, there are more and more tags, and even various browser manufacturers have developed HTML tags that are only suitable for their specific browsers, which obviously hinders the compatibility of HTML web pages. So the W3C organization then regained nutrition from SGML, and then released XML. XML is a more strict markup language than HTML, and its full name is Extensible Markup Language (EXtensible Markup Language). However, XML is too complex, and most current browsers do not fully support XML. So the language XHTML comes in handy. The XHTML language is a language that can standardize the HTML language. HTML pages rewritten in the XHTML language can apply many XML application technologies. It makes web pages easier to expand, suitable for automatic data exchange, and more regular. Having said so much, it’s time to get to the point? CSS. In fact, apart from being a little troublesome when used alone, CSS has no obvious advantages over HTML. The key lies in its integration with scripting languages ​​(such as Javascript) and XML technology, namely CSS Javascript XML (actually there is a better integration: XML XSL Javascript)?? But XSL, the extensible style sheet language, is compared to CSS is too complex and not easy to use. Since the advent of CSS, HTML has finally gotten rid of the nightmare of clutter and begun to separate page content from style. Having said so much, in fact, the true meaning can only be known after using it, so start learning to use it now.
The DIV element is an element used to provide structure and background for block-level content within an HTML document. Everything between the start and end tags of the DIV is used to form the block, and the properties of the contained elements are controlled by the properties of the DIV tag, or by formatting the block using a stylesheet.
In the foreseeable future, the status of table will still be very important, so businesses like Google will still prosper. But div represents the direction of development of the online world. One of them is simple, the other is advanced, radish and cabbage, whatever you choose has its merits. We will serve you seriously according to your requirements!
div is an element in html (hypertext language). div css is a web page layout method. This web page layout method is different from the traditional table layout and truly achieves the separation of w3c content and performance. .
div is a tag and css is a cascading style sheet
DIV CSS advanced layout has gradually become popular, but the so-called DIV CSS layout makes people more worried. Don’t let DIV become a substitute for Table. Multi-layer Nested DIVs will seriously affect the readability of the code. Let's make use of the tags provided by HTML.
When should DIV be used? 90% of the time when Global Security Network is built, CSS DIV is used. Although there are no hard and fast rules in this regard, I personally think that DIV is more suitable for positioning the general framework. For example, we want To define a header area, you usually define a DIV like this:
This is the content to be written in the header frame
Of course, you can use class to define it, but generally speaking, it will be repeated if it is not on the same page. Elements can be better distinguished by using id.
View the following definition code

/li>
　
• 
  　 Topics

　
• 
  　About

　< li id="contact">
Contact
　
• 
  Contribute


Feed

"/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" />
　

　No. 214
　Defines the top navigation (ul part ), the big logo on the left and the round No. tags, and the definition of style names
Other most commonly used layout tags
h1
There may be very few people who actually use this tag, because the font it displays is really too "big", but we are CSSers, what tag style can't be changed? And the meaning it can express is the same as it originally was. The function is equally obvious (big title) I think you already know how to use it ^_^
　ul
This tag is often used to define the navigation part. Of course, it can also be replaced by ol, but the navigation There is no order of connection, so it is more accurate to use ul (the effect is more obvious after removing the CSS)
b
China Secretarial Network Personal Work Summary Half-year Work Summary Year-end Work Summary Financial Work Summary Teacher Work Summary Teaching Work Summary Moral Education Work Summary School Work Summary Safety Work Summary Youth League Committee Work Summary Party Member Work Summary Enterprise Work Summary Class Teacher Work Summary Party Branch Work Summary Party Host Speech Opening Celebration Speech New Year Speech Wedding Host Speech Festival Speech Evening Speech Memorial Speech Leadership Speech Condolences and Congratulatory Messages for the Year Work plan Personal work plan School work plan Party branch work plan Youth League committee work plan Class teacher work plan Work report Thought report Reporting materials Experience experience Learning experience Training experience Work experience Personal appraisal research report Work report Internship report Government report Inspection report Integrity report Competition speech Inauguration Speech Patriotic Speech Contest Speech Advanced Deeds Learning Materials Examination Materials Experience Materials Exchange Materials Personal Deeds and Deeds Materials Declaration Materials Event Planning Work Plan Rectification Plan Implementation Plan Marketing Plan Rules and Regulations Company Notice Laws and Regulations Harmonious Society This label is no longer recommended, in the layout It can bring a lot of convenience (because it is short). Although I am not too in favor of using this tag, it is still a good choice in some cases (such as layout definition in small places)
h2
The place where h2 is used most It should not be about the layout, but the subtitle, but if you need to define the column style in some places, it is more appropriate to use this tag. For the column content, use p
[Edit this paragraph] What are the advantages of DIV CSS?
1. Comply with W3C standards. Microsoft and other companies are W3C supporters. This is the most important, as it ensures that your website will not be obsolete due to future web application upgrades. 2. Support browser backward compatibility, which means that no matter whether IE7 or Firefox wins the browser war in the future, your website will be very compatible. 3. Search engines are more friendly. Compared with traditional tables, web pages using DIV CSS technology are more friendly to search engines. 4. Style adjustment is more convenient. The separation of content and style makes page and style adjustments more convenient. Nowadays, international portals such as YAHOO and MSN, domestic portals such as NetEase and Sina, and mainstream WEB2.0 websites all adopt the DIV CSS framework model, which further proves that DIV CSS is the general trend. 5. The great advantage of CSS lies in its concise code, which can save a lot of bandwidth for a large website, and as we all know, search engines like clean code. 6. The separation of performance and structure makes it easier to divide labor and cooperate in team development and reduce interrelation.
[Edit this paragraph] Several ways to put CSS into web pages
Inline application
We can declare styles directly in HTML files.
For example, Thisisfontsize16.
The above HTML file will appear on the browser as: Thisisfontsize16.
Embedded application styles can be embedded in HTML files (usually in the ).
For example, div{div{background-color:#FF0000;} The background color is red
The above HTML will show: The background color is red
External links are applied in this way, and all CSS style declarations are is stored in another file.
The file is usually named .css.
In the

..

of the HTML document, we will use the following code to link the .css file:

The above line will add the styles declared in the external-stylesheet.css file to the HTML file.
Import application Import application External CSS styles can also be imported into HTML files.
The way to import is to use the @import command.
The syntax of @import is: <@import">!--@importurl(http ://www.divhome.com/#.mysite.com/style.css);@importurl(
The original intention of the @import directive is to enable different browsers to use different Style. However, this is no longer necessary. The most common purpose of using @import is to add multiple CSS styles when multiple CSS styles conflict with each other. The added CSS styles have priority (see CSS concatenation for details).div css - other most commonly used layout tags
h1 This tag may be used by very few people because the font it displays is really too "big", but we are CSSers, there are any tag styles that cannot be changed What? And the meaning it can express is as obvious as its original function (big title) I think you already know how to use it^_^. ul This tag is often used to define the navigation part, of course. You can use ol instead, but there is no order in the navigation connection, so it is more accurate to use ul (the effect is more obvious after removing the CSS).
b This tag is no longer recommended, but in terms of layout It can bring a lot of convenience (because it is short). Although I am not too in favor of using this tag, it is still a good choice in some cases (such as layout definition in small places)
h2 The place where h2 is used most is probably not in layout. It is a subtitle, but if you need to define the column style in some places, it is more appropriate to use this tag, and use p for the column content.
[Edit this paragraph] CSS+DIV website design issues
Ideological propaganda, anti-corruption and integrity, analysis materials of the 17th National Congress of the Communist Party of China, rural issues, rural issues, eight honors and eight shames, advanced nature, education, organization, personnel skills, experience, resume, job application template, sample program, game, letter, diary Speech at the Party Meeting Party Membership Application Education and Teaching Corporate Culture Youth League Membership Application Related Finance and Economics Urban Construction Environmental Protection Party and Government Judiciary and Economic Work Contracts and Agreements Etiquette The Color of Gold The Color of Gold The Mai Family Novel Wind and Wind Chapter 4 Chengdu Car Collision Case The Industry and Commerce Director’s Speech Example Great Wall National Day Parade Speech to Welcome the 60th Anniversary of the National Day, Speech to Welcome the National Day, PHP Dynamic Web Technology Speech, Wulin Gaiden Tongfu Inn Speech Sample, Sample Animation, Lijiang Tourist Holy Land, Go Travel, China Military Parade, Although DIV CSS has certain advantages, at this stage, CSS DIV website construction exists The problems are also obvious, mainly reflected in:
First, the high dependence on CSS makes web design more complicated. Compared with the table layout (table) in HTML4.0, although CSS DIV is not out of reach, it is at least much more complicated than table positioning. Even for website design experts, it is easy to have problems, let alone beginners. To a certain extent, it has affected the popularization and application of XHTML website design language.
Second, abnormal CSS files will affect the normal browsing of the entire website. The design elements produced by CSS websites are usually placed in several external files. This one or several files may be quite complex or even large. If the CSS file is called abnormally, the entire website will become miserable.
Third, the browser compatibility issue with CSS website design is quite prominent. Web design based on HTML4.0 has almost no browser compatibility issues in versions after IE4.0. However, a website designed with CSS DIV may display pages normally in IE but not in Firefox. It’s unrecognizable (which is why Internet marketers are advised to use Firefox). CSS DIV still needs further support from various browser manufacturers.
Fourth, whether CSS DIV is optimized for search engines depends on the professional level of web design rather than CSS DIV itself. Global Security Network also took experience speed into consideration when it was first built. CSS DIV web design does not guarantee that the web page will be optimized for search engines, or even guarantee that it will have a simpler code design than the HTML website, not to mention the inclusion and sorting of web pages by search engines. Obviously it is not measured by whether tables and CSS positioning are used, which is why many websites made with traditional table layouts are ranked high in search results, while many web pages made using CSS and web standards are still ranked low. Because for search engines, factors such as website structure, content, and related website links are always the most important indicators for website optimization.
[Edit this paragraph] Advantages and disadvantages of using DIV CSS to layout websites
With the popularization of the WEB2.0 standardized design concept, many large domestic portals have adopted the DIV CSS production method, and Endeavor Network has also become a CSS A pioneer site for learning web page layout technology. Judging from the actual application, this method is definitely better than the table-based page creation method.
Nowadays, most websites still use tables and nested content to create websites. Although this method is familiar and easy to use for us, it hinders a better, more friendly, and more convenient way. Flexible, and more powerful website design method - DIV CSS.
The significance of CSS web page layout is reflected in the following aspects:
1. Make the page load faster
Since most of the page code is written in CSS, the page volume and capacity become 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. 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.
3. More efficient when modifying the design
Due to the use of DIV CSS production method, it is easier and more time-saving when modifying the page. According to the regional content tag, find the corresponding ID in CSS, which makes it more convenient to modify the page without destroying the layout style of other parts of the page.
4. Maintain visual consistency
One of the most important advantages of DIV CSS: maintain visual consistency; the previous nested table production method will make the display between pages or between regions difficult. The effect will be biased. Using the DIV CSS production method, all pages or all areas are uniformly controlled by CSS files, which avoids effect deviations reflected in different areas or different pages.
5. Better indexed by search engines
Since most of the HTML code and content styles are written into CSS files, this makes the text part of the web page more prominent and easier to be indexed by search engines. .
6. More friendly to viewers and browsers
We all know that websites are made for viewers and are more friendly to viewers and browsers. DIV CSS has more advantages in this regard. Because CSS is rich in styles, it makes the page more flexible. It can achieve unified and non-deformed display effects according to different browsers.
Having said so much about the significance and advantages of CSS web page layout, we cannot underestimate the side effects of CSS web page layout. Take the problems encountered by the security network as an example:
1. Although DIV CSS is not unattainable, it is at least better than Table positioning is much more complicated and can easily lead to problems even for website design experts, let alone beginners.
2. The design elements of CSS website production are usually placed in one external file, or several files, which may be quite complex or even large. If the CSS file is called abnormally, the entire website will become terrible.
3. Although DIV CSS solves most browser compatibility issues, there are also exceptions when used in some browsers. For example, Firefox displays a normal page in IE, but it may be completely unrecognizable in Firefox. . Of course, this should be a browser problem, but it can be said that at present, DIV CSS has not yet achieved unified compatibility with all browsers.
4. Whether DIV CSS is optimized for search engines depends on the professional level of web design, not DIV CSS itself. DIV CSS web design does not guarantee that the web page will be optimized for search engines, or even guarantee that it will have a simpler code design than the HTML website. Moreover, the inclusion and sorting of web pages by search engines is obviously not measured by whether tables and CSS positioning are used. This This is the reason why many websites made with traditional table layouts are ranked high in search results, while many web pages made using CSS and web standards are still ranked low. Because for search engines, factors such as website structure, content, and related website links are always the most important indicators for website optimization.
Based on the advantages and trends of DIV CSS discussed above, I think we should not blindly follow the trend. How to use WEB2.0 design standards more effectively and reasonably will require a long time of study and exercise. As for how to use DIV CSS better, I think this requires continuous practice and physical examination, and accumulation of rich design experience in order to master this technology well.
[Edit this paragraph] Summary of Div CSS common errors
CSS+DIV is one of the commonly used terms in website standards (or "WEB standards"), usually to explain the positioning of tables in the HTML web design language The difference in method is that in the XHTML website design standards, table positioning technology is no longer used, but CSS div is used to achieve various positioning. It's easy to make some mistakes when using DIV CSS coding. This article lists some common mistakes:
1. Check the HTML elements for spelling errors and forgetting the closing tag
Even veterans often make mistakes in the nesting relationship of divs. You can use Dreamweaver's verification function to check for errors.
2. Check whether the CSS is correct
Check whether there are spelling errors, whether you forgot the ending }, etc. You can use CleanCSS to check CSS for spelling errors. CleanCSS is a tool to reduce weight for CSS, but it can also check for spelling errors.
　3. Determine the location where the error occurred
If the error affects the overall layout, you can delete the div blocks one by one until the display returns to normal after deleting a certain div block, then you can determine the location where the error occurred.
4. Use the border attribute to determine the layout characteristics of the error element
Using the float attribute for layout may cause errors if you are not careful. At this time, add the border attribute to the element to determine the element boundary, and the cause of the error will be revealed.
5. The parent element of a float element cannot specify the clear attribute
If you use the clear attribute on the parent element of a float element under MacIE, the layout of the surrounding float elements will be confused. This is a famous bug of MacIE. If you don't know it, you will take detours.
6. Float elements must specify the width attribute
Many browsers have bugs when displaying float elements without specified width. So regardless of the content of the float element, the width attribute must be specified for it.
In addition, when specifying elements, try to use em instead of px as the unit.
7. Float elements cannot specify attributes such as margin and padding
There is a bug in IE when displaying float elements with margin and padding specified. Therefore, do not specify margin and padding attributes on float elements (you can nest a div inside the float element to set margin and padding). You can also use hacks to specify special values ​​for IE.
8. The sum of the widths of float elements must be less than 100%
If the sum of the widths of float elements is exactly 100%, some ancient browsers will not display properly. Therefore, please ensure that the sum of the widths is less than 99%.
9. Have you reset the default style?
Different browsers have different interpretations of certain attributes such as margin, padding, etc. Therefore, it is best to set all margin and padding to 0, list style to none, etc. before development.