欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

學(xué)習(xí)DIV+CSS網(wǎng)頁(yè)布局之一列布局

  發(fā)布時(shí)間：2016-03-15 09:15:53   作者：彼岸時(shí)光   我要評(píng)論
學(xué)習(xí)DIV+CSS網(wǎng)頁(yè)布局中的一列布局，本文為大家分享的是DIV+CSS網(wǎng)頁(yè)布局教程的第一篇，感興趣的小伙伴們可以參考一下

DIV+CSS 網(wǎng)頁(yè)布局第一篇：一列布局

1、網(wǎng)頁(yè)布局

　　布局（layout）即對(duì)事物的全面規(guī)劃和安排，頁(yè)面布局是對(duì)頁(yè)面的文字、圖像或表格進(jìn)行格式化版式排列。網(wǎng)頁(yè)布局對(duì)改善網(wǎng)站的外觀非常重要，又稱版式布局，大多數(shù)網(wǎng)站會(huì)把內(nèi)容安排到多個(gè)列中，就像雜志或報(bào)紙那樣，網(wǎng)頁(yè)版面的設(shè)計(jì)延續(xù)了傳統(tǒng)紙媒的特點(diǎn)，但又比傳統(tǒng)的紙媒更靈活，傳統(tǒng)的紙媒由于紙張大小的限制，只能在有限的空間內(nèi)排列內(nèi)容，而網(wǎng)頁(yè)版面的布局，可以根據(jù)內(nèi)容自適應(yīng)寬度和高度。在 HTML 中，常使用 div 元素來(lái)創(chuàng)建多列，使用 CSS 對(duì)元素進(jìn)行浮動(dòng)、定位等，從而將網(wǎng)頁(yè)設(shè)計(jì)稿中的布局樣式呈現(xiàn)在網(wǎng)頁(yè)上。網(wǎng)頁(yè)布局是網(wǎng)頁(yè)制作的基礎(chǔ)，通常使用的方式有三中：流式布局，即元素按照標(biāo)準(zhǔn)文檔流進(jìn)行排列；浮動(dòng)布局和絕對(duì)定位布局。而在各大網(wǎng)站中，常見(jiàn)的布局結(jié)構(gòu)分為：一列布局，兩列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照網(wǎng)站的實(shí)際需求使用多列進(jìn)行布局。

　　目前，大多數(shù)的網(wǎng)站仍采用一套通用的排版模式，頁(yè)頭、頁(yè)腳、側(cè)邊欄和內(nèi)容區(qū)域，構(gòu)成了這種直截了當(dāng)?shù)牟季?。就像傳統(tǒng)的報(bào)刊雜志編輯一樣，而這是人們預(yù)期中的網(wǎng)頁(yè)版面，大致可分為：國(guó)字型，即三列布局，最常見(jiàn)的一種布局結(jié)構(gòu)。標(biāo)題正文型，即單列布局，類(lèi)似文章頁(yè)面。左右框架型，即兩列布局；上下框架型，和兩列布局類(lèi)似，只不過(guò)是上下結(jié)構(gòu)?；旌闲?，即多列布局的結(jié)合，多種類(lèi)型的變化，相對(duì)復(fù)雜的一種框架結(jié)構(gòu)，也叫綜合框架類(lèi)型。封面型，常用于網(wǎng)站的首頁(yè)，大多數(shù)在第一屏放置一張精美的圖片，類(lèi)似宣傳海報(bào)的樣式，再結(jié)合一些小的動(dòng)畫(huà)效果，可用于產(chǎn)品的展示，會(huì)給人帶來(lái)賞心悅目的感覺(jué)。

　　隨著 HTML5 和 CSS3 新技術(shù)的出現(xiàn)，以及移動(dòng)設(shè)備的飛速發(fā)展，互聯(lián)網(wǎng)發(fā)生了翻天覆地的變化，對(duì)于如今來(lái)說(shuō)，布局已不必再拘泥于固定格式。近些年網(wǎng)頁(yè)排版設(shè)計(jì)的趨勢(shì)，都是非常規(guī)布局，他們并不嚴(yán)格遵循某種準(zhǔn)則或既定體系。視覺(jué)交互方面的，比如全屏布局，瀑布流，無(wú)縫拼圖布局等，這些都不局限于傳統(tǒng)的布局方式。而對(duì)于傳統(tǒng)類(lèi)的，信息類(lèi)的網(wǎng)站大多都采用單列，兩列或三列布局，還有混合布局結(jié)構(gòu)。頁(yè)面的布局結(jié)構(gòu)會(huì)直接影響頁(yè)面的用戶體驗(yàn)，比如很受歡迎的卡片式網(wǎng)頁(yè)設(shè)計(jì)，不僅外觀漂亮，而且具有很強(qiáng)的實(shí)用性，信息和內(nèi)容高度整合，卻又如此簡(jiǎn)單優(yōu)雅?？ㄆ皆O(shè)計(jì)的流行，離不開(kāi)響應(yīng)式設(shè)計(jì)，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)不僅是創(chuàng)建一個(gè)移動(dòng)端站點(diǎn)，而是使網(wǎng)站適用于各種瀏覽器尺寸，不論是 PC 端、平板還是智能手機(jī)，響應(yīng)式設(shè)計(jì)的目的，就是創(chuàng)建一個(gè)不論大小尺寸都美觀的網(wǎng)站。

　　下面是平時(shí)在做練習(xí)時(shí)，發(fā)現(xiàn)的幾個(gè)不錯(cuò)的網(wǎng)頁(yè)版面設(shè)計(jì)：QQ瀏覽器，360瀏覽器，小米手機(jī)展示頁(yè)，堅(jiān)果手機(jī)展示頁(yè)，花瓣網(wǎng)。

　　相對(duì)于國(guó)內(nèi)網(wǎng)站的布局結(jié)構(gòu)，還是要多欣賞一些國(guó)外的網(wǎng)站設(shè)計(jì)。

2、一列布局
一列布局多用于網(wǎng)站的首頁(yè)，比如360搜索，一列布局的結(jié)構(gòu)簡(jiǎn)潔明了，主題突出，適合排列簡(jiǎn)單的內(nèi)容，不適合多行內(nèi)容，通常一列布局都是固定寬度的。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>一列布局</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #header{   
  9.     height:50px;   
  10.     background:blue;   
  11. }   
  12. #main{   
  13.     width:960px;   
  14.     height:800px; /* 在實(shí)際開(kāi)發(fā)中不設(shè)置列的高度，讓高度自適應(yīng)。 */   
  15.     background:green;   
  16.     margin:0 auto;   
  17. }   
  18. #footer{   
  19.     width:960px;   
  20.     height:100px;   
  21.     background:gray;   
  22.     margin:0 auto;   
  23. }   
  24. </style>  
  25. </head>  
  26. <body>  
  27. <div id="header">頁(yè)頭</div>  
  28. <div id="main">主體內(nèi)容</div>  
  29. <div id="footer">頁(yè)腳</div>  
  30. </body>  
  31. </html>  

新浪和網(wǎng)易的首頁(yè)，就使用了一列布局。

3、單列寬度自適應(yīng)布局

要想寬度自適應(yīng)，只需要按照百分比來(lái)設(shè)置寬度，內(nèi)容就可以根據(jù)瀏覽器窗口自動(dòng)調(diào)節(jié)大小。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>一列自適應(yīng)布局</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #header{   
  9.     height:50px;   
  10.     background:blue;   
  11. }   
  12. #main{   
  13.     width:80%;   
  14.     height:800px; /* 在實(shí)際開(kāi)發(fā)中不設(shè)置列的高度，讓高度自適應(yīng)。 */   
  15.     background:green;   
  16.     margin:0 auto;   
  17. }   
  18. #footer{   
  19.     width:80%;   
  20.     height:50px;   
  21.     background:gray;   
  22.     margin:0 auto;   
  23. }   
  24. </style>  
  25. </head>  
  26. <body>  
  27. <div id="header">頁(yè)頭</div>  
  28. <div id="main">主體內(nèi)容</div>  
  29. <div id="footer">頁(yè)腳</div>  
  30. </body>  
  31. </html>  

4、自適應(yīng)單列布局

這種布局結(jié)構(gòu)比較適合密集型內(nèi)容的網(wǎng)站。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8" />  
  5. <title>單列布局</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #wrap{   
  9.     width:80%;   
  10.     margin:0 auto;   
  11.     border:2px solid black;   
  12. }   
  13. #header{   
  14.     width:100%;   
  15.     height:100px;   
  16.     background:blue;   
  17.     margin-bottom:10px;   
  18. }   
  19. #main{   
  20.     width:100%;   
  21.     margin-bottom:10px;   
  22. }   
  23. #main .content{   
  24.     height:500px; /* 在實(shí)際開(kāi)發(fā)中不設(shè)置列的高度，讓高度自適應(yīng)。 */   
  25.     background:yellow;   
  26. }   
  27. #footer{   
  28.     width:100%;   
  29.     height:100px;   
  30.     background:gray;   
  31. }   
  32. </style>  
  33. <body>  
  34. <div id="wrap">  
  35.     <div id="header">頁(yè)頭</div>  
  36.     <div id="main">主體   
  37.         <div class="content">內(nèi)容</div>  
  38.     </div>  
  39.     <div id="footer">頁(yè)腳</div>  
  40. </div>  
  41. </body>  
  42. </html>  

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

原文：http://www.cnblogs.com/Mtime/p/5272407.html

相關(guān)文章

最新評(píng)論