漫谈css布局_html/css_WEB-ITnose-html教學-PHP中文網

Step1.考量一下对浏览器的支持性：

Step2.查看容器布局

Step3.为容器命名

Step4.开始写样式和代码

Sitename

Step1.考量一下对浏览器的支持性：

在开始设计CSS布局之前，你应该想一下你要支持的浏览器或者说支持到什么程度。客户、用户、测试日志文件等可能会对你有一定的帮助。

Step2.查看容器布局

看看你的设计，想一下主要由哪些容器组成。

Step3.为容器命名

上面所说的容器将会是你的页面布局中放置内容的容器，所以你需要为他们起一个能够描述他们特征的名字，就像

container

header

mainnav

contents

footer

如果这些容器对页面来说是唯一的，在标签代码中最后使用ID来表示，而不是class来标示。这在为其他元素来写样式的时候显得很重要，因为当出现冲突时，用ID来标识的样式会重写用class来标识的代码。

Step4.开始写样式和代码

首先确定文档类型，在这里我们采用HTML4.01strict

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">

登入後複製

然后是增加头信息和字符编码等,将外联样式命名为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>

登入後複製

最后，加入上面我们分析好的一些元素：

    <body>    <div id="container">    <div id="header" title="sitename">    <div id="skipmenu"><a href="#content">Skip to content</a></div>    <h1 id="Sitename">    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 id="Archives">    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 id="Last-Entries">    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 id="a-href-title-Permanent-link-to-this-item-Heading-here-a">    <a href="#" title="Permanent link to this item">Heading here</a>    </h2>    <h3 id="Sunday-August">    Sunday, 24 August 2014    </h3>    <p>    <img class="imagefloat lazy"  src="/static/imghw/default1.png"  data-src="flower.jpg"  alt=""    style="max-width:90%"  style="max-width:90%">    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>

登入後複製

Step6.指定样式

    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.最后需要进行一些细化工作

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7801

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1236

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。