天天看點

網頁制作簡單入門——用<div>設計簡單子產品

(1)用<div>元素把頁面的第一層次結構切分出來:

隻需要三對<div>标簽,代碼如下:

</pre><span style="white-space:pre"><div id="header"></div><div id="</span>main<span style="white-space:pre">"></div><div id="</span>footer<span style="white-space:pre">"></div></span><p></p><p>(2)把頭部的第二層次結構切分出來,其代碼如下面所示:</p><p><span style="white-space:pre"><div id="header"><span style="white-space:pre"></span><div id="logo"></div>    </span>    <span style="white-space:pre"><div id="banner"></div>   </span>   <span style="white-space:pre"> <div id="nav"></div></div</span>></p><p>(3))把主體的第二層次結構切分出來,其代碼如下面所示:</p><p><div id="main"><span style="white-space:pre"></span><div id="left"></div>    <div id="middle"></div>    <div id="right"></div></div></p><p><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
</head>

<body>
<div id="header">
	<div id="logo"></div>
    <div id="banner"></div>
    <div id="nav"></div>
</div>

<div id="main">
	<div id="left">
    	<div id="l_top"></div>
        <div id="l_bottom"></div>
    </div>
    <div id="middle">
    	<div id="m_top"></div>
        <div id="m_bottom"></div>
    </div>
    <div id="right"></div>
</div>

<div id="footer"></div>
</body>
</html>
           

繼續閱讀