常用的DIV+CSS網站佈局的基本框架結構－完整版

文藝小青年發表於2017-11-17
CSS網站框架

這個模板是左右兩列布局模板，不再是最基礎的搭建框架，更多的塊結構也做出來了，如果符合這種結構的可以直接拿來使用（我做的網站大部分都是這種結構的，嘿嘿^_^）。在IE和FF下測試沒變形，但沒測試W3C認證，估計還通不過（個別相容的樣式通不過）。

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>常用的DIV+CSS網站佈局的基本框架結構－完整版</title>

<link href=”/css/layout.css” rel=”stylesheet” type=”text/css” />

</head>

<body>

<div id=”container”>

<div id=”header”>

<h1>頭部</h1>

</div>

<div class=”clearfloat”></div>

<div id=”nav”>

<ul>

<li><a href=”#”>導航一</a></li>

<li><a href=”#”>導航二</a></li>

<li><a href=”#”>導航三</a></li>

<li><a href=”#”>導航四</a></li>

<li><a href=”#”>導航五</a></li>

</ul>

</div>

<div id=”mainContent”>

<div id=”main”>

<div class=”mainbox”>

<h2>塊標題</h2>

<ul>塊內容</ul>

</div>

</div>

<div id=”side”>

<div class=”sidebox”>

<h4>塊標題</h4>

<ul>塊內容</ul>

</div>

</div>

</div>

<div class=”clearfloat”></div>

<div id=”footer”>

底部

</div>

</div>

</body>

</html>

CSS樣式表layout.css程式碼：

@charset “utf-8”;

/* CSS Document */

@import url(“/css/global.css”);

/*body*/

#container {margin:0 auto; width:950px;}

/*header*/

#header { height:50px; background:#ff911a;}

#header h1 { padding:10px 20px;}

#nav { background:#FF6600; height:24px; margin-bottom:6px;}

#nav ul li { float:left;}

#nav ul li a { display:block; padding:4px 10px 2px 10px; color:#fff; text-decoration:none;}

#nav ul li a:hover { text-decoration:underline;}

/*main*/

#mainContent { overflow:auto; zoom:1; margin-bottom:6px;}

#side { width:200px; float:left;}

.sidebox { border:1px solid #ed6400; margin-bottom:6px;}

.sidebox h4 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;}

.sidebox ul { padding:4px 6px;}

#main{ width:742px; float:right;}

.mainbox { border:1px solid #ed6400; margin-bottom:6px;}

.mainbox h2 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;}

.mainbox ul { padding:4px 6px;}

/*footer*/

#footer { border-top:3px solid #ccc; height:50px; text-align:center; padding:6px;}

被包含的CSS樣式表global.css程式碼（把用於全域性的樣式單獨放在一個樣式表中，避免重複，方便呼叫）：

@charset “utf-8”;

body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}

ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}

h1 { font-size:20px; font-family:`microsoft yahei`;}

h2 { font-size:14px;}

h3 { font-size:14px; font-weight:normal;}

h4 { font-size:12px;}

h5 { font-size:12px; font-weight:normal;}

ul { list-style:none;}

img { border:0px;}

a { color:#195cb5; text-decoration:none;}

a:hover { color:#f00;}

.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

本文轉自寒意部落格園部落格，原文連結：http://www.cnblogs.com/hnyei/archive/2011/10/14/2211139.html，如需轉載請自行聯絡原作者


相關文章