Home  >  Article  >  Web Front-end  >  Talking about css layout_html/css_WEB-ITnose

Talking about css layout_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:50:591031browse

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

  • container
  • header
  • mainnav
  • menu
  • contents
  • footer
  • 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;    }   

    Step7. Finally, some detailed work needs to be done

    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn