亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

1、網(wǎng)頁布局

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

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

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

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

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

2、一列布局
一列布局多用于網(wǎng)站的首頁，比如360搜索，一列布局的結(jié)構(gòu)簡潔明了，主題突出，適合排列簡單的內(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í)際開發(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">頁頭</div>  
  28. <div id="main">主體內(nèi)容</div>  
  29. <div id="footer">頁腳</div>  
  30. </body>  
  31. </html>  

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

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

要想寬度自適應(yīng)，只需要按照百分比來設(shè)置寬度，內(nèi)容就可以根據(jù)瀏覽器窗口自動調(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í)際開發(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">頁頭</div>  
  28. <div id="main">主體內(nèi)容</div>  
  29. <div id="footer">頁腳</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í)際開發(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">頁頭</div>  
  36.     <div id="main">主體   
  37.         <div class="content">內(nèi)容</div>  
  38.     </div>  
  39.     <div id="footer">頁腳</div>  
  40. </div>  
  41. </body>  
  42. </html>  

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

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

相關(guān)文章

最新評論