漫谈css布局_html/css_WEB-ITnose-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

漫谈css布局_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:50 AM

介绍

这个布局是基于一个截面图，然后把它转化为一个html页面，但是介绍的目的不是仅限于这一个特定的例子，而是可以用于所有以后的布局过程。

在我们开始之前，需要有几点准则指导着我们，避免我们误入歧途、走火入魔，中毒太深：

每次进行一步，每一步都用一组浏览器来测试开始布局踏出第一步很容易，但是半途碰到问题并不是我们所期望的。为了避免这种情况的发生，我们每进行一步，都要用一组浏览器来进行测试。这样你就能清楚的看到布局是如何进行的，也可以避免一些问题的出现。

基于现代浏览器构建，但是也要向前兼容最好基于标准兼容的浏览器构建布局，但是也要让一些老版的浏览器兼容。

校验你的HTML代码和CSS时常检验你的HTML代码和CSS，这样的话很多的布局问题就能够得到解决。

这下面这两个地址会对你有所帮助：
① WC3 HTML validator
② WC3 CSS validator

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>

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

        <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/imghwm/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 © <a href="http://www.wenboxz.com" target="_blank">文波の小站</a> 2014,All Rights Reserved.    </div>    </div>

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

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Apakah atribut Boolean dalam HTML? Beri beberapa contoh.Apr 25, 2025 am 12:01 AM

Atribut Boolean adalah atribut khas dalam HTML yang diaktifkan tanpa nilai. 1. Atribut Boolean mengawal tingkah laku elemen dengan sama ada ia wujud atau tidak, seperti dilumpuhkan melumpuhkan kotak input. 2. Prinsip kerja mereka adalah untuk mengubah tingkah laku elemen mengikut kewujudan atribut apabila penyemak imbas. 3. Penggunaan asas adalah untuk menambah atribut secara langsung, dan penggunaan lanjutan dapat dikawal secara dinamik melalui JavaScript. 4. Kesalahan umum adalah tersilap berfikir bahawa nilai -nilai perlu ditetapkan, dan kaedah penulisan yang betul harus ringkas. 5. Amalan terbaik adalah untuk memastikan kod ringkas dan menggunakan sifat Boolean dengan munasabah untuk mengoptimumkan prestasi laman web dan pengalaman pengguna.

Bagaimana anda boleh mengesahkan kod HTML anda?Apr 24, 2025 am 12:04 AM

Kod HTML boleh menjadi bersih dengan pengesahan dalam talian, alat bersepadu dan proses automatik. 1) Gunakan W3CMarkupValidationService untuk mengesahkan kod HTML dalam talian. 2) Pasang dan konfigurasikan sambungan HTMLHINT dalam visualStudiocode untuk pengesahan masa nyata. 3) Gunakan HTMLTidy untuk mengesahkan dan membersihkan fail HTML secara automatik dalam proses pembinaan.

HTML vs CSS dan JavaScript: Membandingkan Teknologi WebApr 23, 2025 am 12:05 AM

HTML, CSS dan JavaScript adalah teknologi teras untuk membina laman web moden: 1. HTML mentakrifkan struktur laman web, 2. CSS bertanggungjawab untuk kemunculan laman web, 3.

Html sebagai bahasa markup: fungsinya dan tujuannyaApr 22, 2025 am 12:02 AM

Fungsi HTML adalah untuk menentukan struktur dan kandungan laman web, dan tujuannya adalah untuk menyediakan cara yang standard untuk memaparkan maklumat. 1) HTML menganjurkan pelbagai bahagian laman web melalui tag dan atribut, seperti tajuk dan perenggan. 2) Ia menyokong pemisahan kandungan dan prestasi dan meningkatkan kecekapan penyelenggaraan. 3) HTML adalah diperpanjang, membolehkan tag tersuai untuk meningkatkan SEO.

Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebApr 19, 2025 am 12:02 AM

Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.

HTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuApr 18, 2025 am 12:09 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.

Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebApr 17, 2025 am 12:12 AM

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

See all articles