目錄
一、利用div+css实现以上“自适应布局”
(1)两列:左边宽度固定,右边宽度自适应
(2)三列:左右两列宽度固定,中间部分自适应
(3)三列:左右两列宽度自适应,中间列宽度固定不变
二、利用table+css实现以上“自适应布局”
(1)两列:左边宽度固定,中间部分自适应
(3)左右两列宽度自适应,中间列宽度固定不变
三、div+css和table+css布局的比较
首頁 web前端 html教學 抛砖引玉之宽度自适应布局_html/css_WEB-ITnose

抛砖引玉之宽度自适应布局_html/css_WEB-ITnose

Jun 24, 2016 am 11:26 AM

抛砖引玉之宽度自适应布局

什么是宽度自适应布局呢?

就是当浏览器窗口大小改变时,浏览器里的元素宽度也随之改变,从而达到自适应布局。

常见的宽度自适应布局有:

1、  两列:左边宽度不变,右边宽度自适应

2、  三列:左右两边宽度不变,中间部分自适应

3、  三列:左右两边宽度自适应,中间部分不变

一、利用div+css实现以上“自适应布局”

(1)两列:左边宽度固定,右边宽度自适应

利用div+float+margin,已在随笔‘float剖析’中讲解,具体代码和效果图见下:

<!DOCTYPE html>    <head>        <title>width_layout</title>        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>        <style type="text/css">            .content {                min-width:300px;            }            .div1 {                width:200px;                height:300px;                background:green;                float:left;            }            .div2 {                height:300px;                background:pink;                margin-left:200px;            }        </style>    </head>    <body>        <div class="content">            <div class="div1"></div>            <div class="div2"></div>        </div>            </body></html>
登入後複製

(2)三列:左右两列宽度固定,中间部分自适应

思路:将左右两列分别设置为左浮动和右浮动,中间的列宽度不管,将它的margin-left和margin-right设置为与左右两列的固定宽度一致。

具体代码和效果图见下:

<!DOCTYPE html>    <head>        <title>layout2</title>        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>        <style>            * {                margin:0;                padding:0;            }            .main {                height:300px;                width:100%;                min-width:400px;            }            .main_left {                height:300px;                width:200px;                float:left;                background-color:green;                text-align:center;            }            .main_center {                height:300px;                margin-left:200px;                margin-right:100px;                text-align:center;                background-color:pink;            }            .main_right {                height:300px;                width:100px;                float:right;                text-align:center;                background-color:blue;            }        </style>    </head>    <body>        <div class="main">            <div class="main_left">我是左边部分,宽度不变</div>            <div class="main_right">我是右边部分,宽度不变</div>            <div class="main_center">                我是中间部分,宽度自适应            </div>        </div>    </body></html>
登入後複製

(3)三列:左右两列宽度自适应,中间列宽度固定不变

思路:倘若左右两列宽度一样,左右两列将其宽度各设置为父元素的50%,然后再将左右两列的margin-left设置为中间列固定宽度的一半,然后将这三列都左浮动,就ok了。

具体代码及效果见下:

<!DOCTYPE html>    <head>        <title>layout3</title>        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>        <style>            body {                min-width:500px;            }            #left,            #right {                float: left;                margin: 0 0 0 -101px;                width: 50%;                height:58px;                *width: 49.9%;            }            #main {                width: 200px;                height:58px;                float: left;                background: green;            }            .inner {                height: 100%;            }                #left .inner,            #right .inner {                margin: 0 0 0 101px;                background: orange;            }        </style>    </head>    <body>        <div id="left">            <div class="inner">left</div>        </div>        <div id="main">            <div class="inner">中间width不变,两边自适应</div>        </div>        <div id="right">            <div class="inner">right</div>        </div>    </body></html>
登入後複製

二、利用table+css实现以上“自适应布局”

由于table自带一些特性,所以实现以上三种布局,比较容易。

在这里用到的table特性就是文字自动垂直居中,当不设置td的宽度width时,浏览器自动渲染。

(1)两列:左边宽度固定,中间部分自适应

<!DOCTYPE html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>        <title>table_layout</title>        <style>            .m_table {                width:100%;                height:100px;                text-align:center;            }            .left_td {                width:300px;                background-color:#98FF1A;            }            .right_td {                               background-color:#7CC0FF;            }        </style>    </head>    <body>        <table class="m_table">            <tr>                <td class="left_td">这个是左边部分,宽度确定</td>                <td class="right_td">这个是右边部分,宽度自动扩展</td>            </tr>        </table>    </body></html>
登入後複製

(2)三列:左右两列宽度固定,中间部分自适应

<!DOCTYPE html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>        <title>table_layout2</title>        <style>        .m_table {            width:100%;            height:400px;            text-align:center;        }        .left_td {            width:200px;            height:300px;            min-width:200px;            background-color:green;        }        .center_td {            height:300px;            background-color:pink;        }        .right_td {            width:200px;            height:300px;            min-width:200px;            background-color:blue;        }    </style>    </head>    <body>        <table class="m_table">            <tr>                <td class="left_td">我是左边部分,宽度不变</td>                <td class="center_td">我是中间部分,宽度自适应</td>                <td class="right_td">我是右边部分,宽度不变</td>            </tr>        </table>    </body></html>
登入後複製

(3)左右两列宽度自适应,中间列宽度固定不变

<!DOCTYPE html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>        <title>table_layout3</title>        <style>        .m_table {            width:100%;            min-width:500px;            height:58px;            text-align:center;        }        .left_td {            height:58px;            background-color:orange;        }        .center_td {            height:58px;            width:200px;            background-color:green;        }        .right_td {            height:58px;            background-color:orange;        }        </style>    </head>    <body>        <table class="m_table">            <tr>                <td class="left_td">我是左边部分,宽度自适应</td>                <td class="center_td">我是中间部分,宽度不变</td>                <td class="right_td">我是右边部分,宽度自适应</td>            </tr>        </table>    </body></html>
登入後複製

三、div+css和table+css布局的比较

对于这两个概念的区别以及优劣势,网站建设的设计师和SEO者已经是再熟悉不过了,众所周知DIV+CSS的优势,也都清楚table布局已经趋于淘汰,现在极少数人会使用table去建网站了。对于二者的区别,网上早有大量的文章,在下就列举几点谈谈。

1、 table结构的网站是按照表格一格一格的打开的速度很慢;DIV+CSS结构的网站打开速度快。

2、 div+css的网站适合百度蜘蛛爬行。可以这么说,百度蜘蛛喜欢div+css结构的站,不喜欢table结构的站,因为后者爬起来太费劲。

3、 table结构的站,架构过于单调,一眼看去就显得方方框框的感觉,如果想实现圆润或者流线的效果,必须绘制大量的边框图片。而div+css的站,样式及其丰富,可以利用结构做出丰富的效果。

4、 table结构的站,页面样式都在页面代码里面,不但代码冗余,可读性和再次开发性差,而且修改起来麻烦;Div+css的结构,结构与样式分离,可读性和二次修改都极其方便。

 

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1273
29
C# 教程
1252
24
了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML,CSS和JavaScript的未來:網絡開發趨勢 HTML,CSS和JavaScript的未來:網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述 HTML與CSS vs. JavaScript:比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:建立網頁的結構 HTML:建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML與CSS和JavaScript:比較Web技術 HTML與CSS和JavaScript:比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML:是編程語言還是其他? HTML:是編程語言還是其他? Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

See all articles