DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV CSS布局
DIV CSS布局
編輯:CSS詳解     

大家都知道從平面設計人員拿來的PS(圖片)給者重構時,需要對網頁美工圖片進行分析,只有進行很好的分析才能有CSS布局
因此DIV CSS布局在分析中占很大部分,我們分析網頁美工圖片不是分析圖片好看是否,而是從布局出發分析網頁的美工圖片,而CSS布局分析直接影響以後的css重構頁面是否好寫的一步。

布局知識
布局,CSS布局是網頁html通過div標簽+代碼開發制作的(html)網頁的統稱。
div+css布局好處:便於維護,有利seo(),網頁打開速度更快,符合等。

制作div+css網頁前思考布局:
首先我們拿到一張網頁美工圖片我們將從上下、上中下、左右、上中(中包括左右)下布局框架來思考。
下面通過一個實例講解下布局分析,我們以列表頁面分析css布局:

首先我們可以分析出我們布局重構此頁面結構框架,我們可以看出是 上、中、下結構,其中又包括了左右結構。

由此我們就要寫此頁面CSS和html時候就先從上到下 從外到內原則寫css與html。

我們首先建一個web的文件夾並在此文件夾裡新建html頁面命名為index.html ,命名為index.css。這裡有個訣竅就是可以導入模板方式來建css與html初始頁面,然後將,也就是我在模板裡介紹的,再在CSS模板的基礎上再寫再添加css。

以下是index.html 的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=gb2312" />
<title>css布局案例實驗頁面-www.divcss5.com.cn</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">我是頭部(上)</div>
<div id="centers">
<div class="c_left">我是中的左</div>
<div class="c_right">我是中的右</div>
<div class="clear">&nbsp;</div>
</div>
<div id="footer">我是底部(下)</div>
</body>
</html>

 

index .css的如下:

 

以下為引用的內容:
body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;}
ol, ul ,li{list-style: none;}
img {border: 0;}
body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;}
.clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;}
.clear{clear:both;height:1px; margin-top:-1px; width:100%;}

.dis{display:block;}
.undis{display:none;}

/*此上面代碼是初始CSS模板,下面是新寫CSS布局框架代碼*/

#header ,#centers ,#footer{ width:100%; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;}
#header{ height:68px; border:1px solid #CCCCCC; }
#centers{ padding:8px 0;}
#footer{ border-top:1px solid #CCCCCC; background:#F2F2F2;}

#centers .c_left{ float:left; width:230px; border:1px solid #00CC66; background:#F7F7F7; margin-right:5px; }
#centers .c_right{ float:left; width:500px;border:1px solid #00CC66; background:#F7F7F7}

 

你可以考出此兩段代碼新建個試試,我們就布局出以上美工頁面CSS和html框架,然後根據各內容繼續添加CSS與。

以上是我們今天講解的css布局_div css布局重要及說明,希望對您有幫助。以上案例未詳解希望你親自多實踐,只有實踐才能練好技術。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved