Talking about css layout_html/css_WEB-ITnose-HTML Tutorial-php.cn

Talking about css layout_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:50:59

Original

1077 people have browsed it

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

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">

Copy after login

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>

Copy after login

Finally, add some of the elements we analyzed above:

    <body>    <div id="container">    <div id="header" title="sitename">    <div id="skipmenu"><a href="#content">Skip to content</a></div>    <h1>    Sitename    </h1>    </div>    <div id="mainnav">    <ul>    <li><a href="#">Section 1</a></li>    <li><a href="#">Section 2</a></li>    <li><a href="#">Section 3</a></li>    <li><a href="#">Section 4</a></li>    </ul>    </div>    <div id="menu">    <h3>    Archives    </h3>    <ul>    <li><a href="#">December 2014</a></li>    <li><a href="#">November 2014</a></li>    <li><a href="#">October 2014</a></li>    <li><a href="#">September 2014</a></li>    <li><a href="#">August 2014</a></li>    </ul>    <h3>    Last 10 Entries    </h3>    <ul>    <li><a href="#">Entry 120 (4)</a></li>    <li><a href="#">Entry 119 (0)</a></li>    <li><a href="#">Entry 118 (9)</a></li>    <li><a href="#">Entry 117 (3)</a></li>    </ul>    </div>    <div id="contents">    <div class="blogentry">    <h2>    <a href="#" title="Permanent link to this item">Heading here</a>    </h2>    <h3>    Sunday, 24 August 2014    </h3>    <p>    <img class="imagefloat" src="flower.jpg" alt="" width="100" height="100">    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. <a href="#">Duis autem vel eum</a> 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.    </p>    <p>    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.    </p>    <ul>    <li><a href="#">Comments (4)</a></li>    <li><a href="#">Pingbacks (1)</a></li>    <li>Category: <a href="#" title="Category">CSS</a></li>    </ul>    </div>    </div>    <div id="footer">    Copyright &copy; <a href="http://www.wenboxz.com" target="_blank">文波の小站</a> 2014,All Rights Reserved.    </div>    </div>    </body>

Copy after login

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;    }

Copy after login