首頁 > 文章 > web前端 > css佈局需要注意的幾點

css佈局需要注意的幾點

php中世界最好的语言原創: 2017-11-20 17:07:181720瀏覽

一個網頁的佈局，對於使用者體驗以及百度的排名的影響是很重大的，就算你網站的內容再好，只要佈局很差，那也是沒用，所以當我們從設計那邊拿到的圖片後面不是能隨便的亂加到自己的網頁上，只有對圖片進行分析後，才能很好的CSS版面。

佈局在分析中佔很大部分，我們分析網頁美工圖片不是分析圖片好看是否，而是從css佈局出發分析網頁的美工圖片，而CSS佈局分析直接影響以後的css重構html頁面是否好寫的一步。

佈局知識：

DIV+CSS佈局，CSS佈局是網頁html透過div標籤+css樣式表程式碼開發製作的（html）網頁的統稱。

div+css佈局好處：方便維護，有利seo（Google將網頁開啟速度作為排名因素及SEO因素），網頁開啟速度更快，符合web標準等。

製作div+css網頁前思考佈局：

首先我們拿到一張網頁美工圖片我們將從上下、上中下、左右、上中（中包括左右）下佈局框架來思考。

下面透過一個實例講解下CSS佈局分析，我們以DIVCSS5列表頁面分析css佈局：

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

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

我們先建立一個web的資料夾並在此資料夾裡新建html頁面命名為index.html ，css檔案命名為index.css。這裡有個訣竅就是可以匯入模板方式來建立css與html初始頁面，然後將css檔案引用到html，也就是我在模板裡介紹的css模板，再在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"> </div> 
</div> 
<div id="footer">我是底部（下）</div> 
</body> 
</html>
index .css的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與html原始碼。

關於css佈局_div css佈局重要性就這麼多，希望對您有幫助。以上案例未詳解希望你親自多實踐，只有實踐才能練好技術。

css佈局需要注意的幾點

相關文章