Home >Web Front-end >HTML Tutorial >Talking about css layout_html/css_WEB-ITnose
Talking about css layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:591053browse
Introduction
This layout is based on a cross-section diagram and then converting it into an html page, but the purpose of the introduction is not limited to this specific example, but can be used for all future layout process.
Before we start, there are a few guidelines to guide us to prevent us from going astray, going astray, and being poisoned too deeply:
Every time It's easy to take the first step and test each step with a set of browsers to start the layout, but hitting problems halfway is not what we expect. In order to avoid this from happening, every step we take is tested with a set of browsers. This way you can clearly see how the layout is going and avoid some problems.
Build based on modern browsers, but also be forward compatible. It is best to build layouts based on standards-compliant browsers, but also make some older browsers compatible.
Verify your HTML code and CSS. Verify your HTML code and CSS frequently, so that many layout problems can be solved.
The following two addresses will be helpful to you:
① WC3 HTML validator
② WC3 CSS validator
Step1. Consider the browser requirements Supportability:
Before starting to design a CSS layout, you should think about the browsers you want to support or to what extent. Customers, users, test log files, etc. may be of some help to you.
Step2. View container layout
Look at your design and think about which containers it mainly consists of.
Step3. Name the container
The containers mentioned above will be the containers for placing content in your page layout, so you need to give them a descriptive name Names of their features, like
If these containers are unique to the page, use ID at the end in the tag code instead of class. This is important when writing styles for other elements, because when a conflict occurs, the style identified by ID will override the code identified by class.
Step4. Start writing styles and code
First determine the document type, here we use HTML4.01strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">
Then add headers Information and character encoding, etc., name the external style as style.css
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Page title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> <!--[if IE 6]> <link rel="stylesheet" href="ie6.css" type="text/css" media="screen"> <![endif]--> </head>
Finally, add some of the elements we analyzed above:
6c04bd5ca3fcae76e30b72ad730ca86d ba47b51c1d9a4677225a86e24d2d9e29 483fd430d978f2d013b8aa7b8f5be738 dc97c77decd4263fc555f4b3a1fe8199efdd781c51f44595792a60a60e0d283eSkip to content5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68 4a249f0d628e2318394fd9b75b4636b1 Sitename 473f0a7621bec819994bb5020d29372a 16b28748ea4df4d9c2150843fecfba68 008bd371ec9a48c83864687f6f53aa57 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Section 15db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Section 25db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Section 35db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Section 45db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 16b28748ea4df4d9c2150843fecfba68 3e3c05952ed41d38147759ed4980cf51 684271ed9684bde649abda8831d4d355 Archives 39528cedfa926ea0c01e69ef5b2ea9b0 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4December 20145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4November 20145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4October 20145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4September 20145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4August 20145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 684271ed9684bde649abda8831d4d355 Last 10 Entries 39528cedfa926ea0c01e69ef5b2ea9b0 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Entry 120 (4)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Entry 119 (0)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Entry 118 (9)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Entry 117 (3)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 16b28748ea4df4d9c2150843fecfba68 550837d8de2366c0b1fcae8dc4e335a6 7e594b31ea2ed98c8daf53251aec0770 c1a436a314ed609750bd7c7d319db4da 93de5eb615c25610247f2399cddaee46Heading here5db79b134e9f6b82c0b36e0489ee08ed 2e9b454fa8428549ca2e64dfac4625cd 684271ed9684bde649abda8831d4d355 Sunday, 24 August 2014 39528cedfa926ea0c01e69ef5b2ea9b0 e388a4556c0f65e1904146cc1a846bee 69ea336ffe0af410570543696a3c6d55 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 9dba6f1f949f5e07bed667bf670fd9c4Duis autem vel eum5db79b134e9f6b82c0b36e0489ee08ed iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent. 94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 94b3e26ee717c64999d7867364b1b4a3 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Comments (4)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Pingbacks (1)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6Category: 8bf4b24366211183bf4e17ceb3fb5ce5CSS5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 33a922c0ba3c41a8b1829949e269a139 Copyright © e71c46e55e88870dbc2cd6d282a5443b文波の小站5db79b134e9f6b82c0b36e0489ee08ed 2014,All Rights Reserved. 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956
Step6. Specify style
body { margin: 0; padding: 0; background: #ddd; } #container { margin: 1em auto; width: 650px; background: #fff; } #header { background: #CF3; } #mainnav { background: #9F3; } #menu { float: right; width: 165px; background: #6F9; } #contents { float: left; width: 440px; background: #9FC; margin: 0 0 0 20px; } #footer { clear: both; background: #FF9; }