官场小说排行榜,完美世界辰东小说下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

DIVCSS布局使用流程

你對(duì)DIV CSS布局的用法是否了解，這里向大家描述一下，DIV CSS布局大家都知道從平面設(shè)計(jì)人員拿來的PS（圖片）給CSS重構(gòu)者重構(gòu)時(shí)，需要對(duì)網(wǎng)頁美工圖片進(jìn)行分析，只有進(jìn)行很好的分析才能有CSS布局。

創(chuàng)新互聯(lián)建站長(zhǎng)期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為長(zhǎng)嶺企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站建設(shè)，長(zhǎng)嶺網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

DIV CSS布局

DIV CSS布局大家都知道從平面設(shè)計(jì)人員拿來的PS（圖片）給CSS重構(gòu)者重構(gòu)時(shí)，需要對(duì)網(wǎng)頁美工圖片進(jìn)行分析，只有進(jìn)行很好的分析才能有CSS布局。
因此DIV CSS布局在分析中占很大部分，我們分析網(wǎng)頁美工圖片不是分析圖片好看是否，而是從css布局出發(fā)分析網(wǎng)頁的美工圖片，而CSS布局分析直接影響以后的css重構(gòu)html頁面是否好寫的一步。

布局知識(shí)：

DIV CSS布局，CSS布局是網(wǎng)頁html通過div標(biāo)簽+css樣式表代碼開發(fā)制作的（html）網(wǎng)頁的統(tǒng)稱。
DIV CSS布局好處：便于維護(hù)，有利seo（谷歌將網(wǎng)頁打開速度作為排名因素及SEO因素），網(wǎng)頁打開速度更快，符合web標(biāo)準(zhǔn)等。

制作DIV CSS網(wǎng)頁前思考布局：

首先我們拿到一張網(wǎng)頁美工圖片我們將從上下、上中下、左右、上中（中包括左右）下布局框架來思考。
下面通過一個(gè)實(shí)例講解下CSS布局分析，我們以DIV CSS5列表頁面分析css布局：

首先我們可以分析出我們DIV CSS布局重構(gòu)此頁面結(jié)構(gòu)框架，我們可以看出是上、中、下結(jié)構(gòu)，其中又包括了左右結(jié)構(gòu)。

由此我們就要寫此頁面CSS和html時(shí)候就先從上到下從外到內(nèi)原則寫css與html。

我們首先建一個(gè)web的文件夾并在此文件夾里新建html頁面命名為index.html，css文件命名為index.css。這里有個(gè)訣竅就是可以導(dǎo)入模板方式來建css與html初始頁面，然后將css文件引用到html，也就是我在模板里介紹的css模板，再在CSS模板的基礎(chǔ)上再寫再添加css。

◆以下是index.html的html代碼：

以下為引用的內(nèi)容：

 
 
 
 
  
  
  
  
  
  
  
  
 
  
  
  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
  css布局案例實(shí)驗(yàn)頁面-www.DIV CSS5.com.cn 
  
  
  
   
  
  
  
  copyrightwww.DIV CSS5.comDIV CSS5  
  
  
  
   
  
  
  
  我是頭部（上）

我是中的左

我是中的右

我是底部（下）

◆index.css的CSS代碼如下：

以下為引用的內(nèi)容：

 
 
 
 
  
  
  
  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.5Arial,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:0auto;  
  
  
  
   
  
  
  
  clear:both;font-size:18px;line-height:68px;font-weight:bold;}  
  
  
  
  #header{height:68px;border:1pxsolid#CCCCCC;}  
  
  
  
  #centers{padding:8px0;}  
  
  
  
  #footer{border-top:1pxsolid#CCCCCC;background:#F2F2F2;}  
  
  
  
   
  
  
  
  #centers.c_left{float:left;width:230px;border:1pxsolid#00CC66;  
  
  
  
   
  
  
  
  background:#F7F7F7;margin-right:5px;}  
  
  
  
  #centers.c_right{float:left;width:500px;border:1pxsolid#00CC66;background:#F7F7F7}

你可以考出此兩段代碼新建個(gè)試試，我們就布局出以上美工頁面CSS和html框架，然后根據(jù)各內(nèi)容繼續(xù)添加CSS與html源代碼。

以上是我們今天講解的css布局_DIV CSS布局重要及說明，希望對(duì)您有幫助。以上案例未詳解希望你親自多實(shí)踐，只有實(shí)踐才能練好技術(shù)。

【編輯推薦】

CSS布局時(shí)需注意的八大技巧
IE6.0對(duì)padding的解讀分析
揭露CSS中margins折疊現(xiàn)象內(nèi)幕
DIV+CSS開發(fā)Xhtml網(wǎng)頁對(duì)SEO優(yōu)化的影響
DIV CSS網(wǎng)頁布局中對(duì)段落進(jìn)行排版的方法

分享文章：DIVCSS布局使用流程
文章來源：http://fisionsoft.com.cn/article/cdoesop.html

新聞中心

其他資訊