CSS 布局总结??变宽度布局_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

CSS 布局总结??变宽度布局_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:05 PM

css寬度佈局

变宽度布局

1-2-1 等比例变宽

总宽度设置 width: 85%; min-width: 650px; （关于IE6的min-width支持，可用）

content 设置 width: 66%; float: left;

side 设置 width: 33%; float: right;

加入clear 空div

HTML 结构：

	    	<title>1-2-1 等比例变宽</title>        <meta charset="utf-8">                        	<div id="header">            <p>Header</p>        </div>                    <div id="container">            <div id="content">                <h2 id="Content-Header">Content Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>            <div id="side">                <h2 id="Side-Header">Side Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>            <div id="clear"></div>        </div>                    <div id="footer">			<p>footer footer footer footer footer footer footer footer</p>        </div>

CSS：

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 650px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#content{				border: 1px solid black;				background-color: #999;				width: 66%;				float: left;			}			#side{				border: 1px solid black;				background-color: #999;				width: 33%;				float: right;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

1-2-1 单列变宽

side 固定宽度，content 随窗口宽度变化

side设置 width: 200px; float: left;

在content外层加入 contentWrap，contentWrap 设置为 width: 100%; margin-right: -220px; float: right;

而content 设置为 margin-right: 220px;

这样就利用了wrap实现了content的宽度为 100%-320px

HTML 结构：

	    	<title>1-2-1 单列变宽</title>        <meta charset="utf-8">                        	<div id="header">            <p>Header</p>        </div>                    <div id="container">            <div id="contentWrap">                <div id="content">                    <h2 id="Content-Header">Content Header</h2>                    <div class="main">                        <p>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                        </p>                    </div>                </div>            </div>                        <div id="side">                <h2 id="Side-Header">Side Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>            <div id="clear"></div>        </div>                    <div id="footer">			<p>footer footer footer footer footer footer footer footer</p>        </div>

CSS：

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 700px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#contentWrap{				width: 100%;				margin-right: -220px;				float: right;			}			#content{				border: 1px solid black;				background-color: #999;				margin-right: 220px;			}			#side{				border: 1px solid black;				background-color: #999;				width: 200px;				float: left;			}			#clear{				clear: both;			}			#footer{				border: 1px solid black;				background-color: #CCC;			}

1-3-1 单侧列宽固定

nav 固定宽度 width: 200px; float: left;

在content 和 side 外层加入两层 div：outerWrap 和 innerWrap

outerWrap 设置为 width: 100%; margin-right: -210px; float: right;

innerWrap 设置为 margin-right: 210px;

然后content 和 side 相当于在 innerWrap 内部等比例变宽

HTML结构：

	    	<title>1-3-1 单侧列宽固定</title>        <meta charset="utf-8">                        	<div id="header">            <p>Header</p>        </div>                    <div id="container">            <div id="nav">                <h2 id="Nav-Header">Nav Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>                        <div id="outerWrap">            	<div id="innerWrap">                    <div id="content">                        <h2 id="Content-Header">Content Header</h2>                        <div class="main">                            <p>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                            </p>                        </div>                    </div>                    <div id="side">                        <h2 id="Side-Header">Side Header</h2>                        <div class="main">                            <p>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                            </p>                        </div>                    </div>                </div>            </div>            <div id="clear"></div>        </div>                    <div id="footer">			<p>footer footer footer footer footer footer footer footer</p>        </div>

CSS：

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 800px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#nav{				border: 1px solid black;				background-color: #999;				width: 200px;				float: left;			}			#outerWrap{				width: 100%;				margin-right: -210px;				float: right;			}			#innerWrap{				margin-right: 210px;			}			#content{				border: 1px solid black;				background-color: #999;				width: 66%;				float: left;			}			#side{				border: 1px solid black;				background-color: #999;				width: 33%;				float: right;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

1-3-1 中间列宽固定

content 宽度固定

在 nav 和 side 分别加上外层 div ：navWrap 和 sideWrap

navWrap 设置为 width: 50%; margin-left: -210px; float: left;

nav 设置为 margin-left: 210px;

同理，sideWrap 和 side 也做类似的设置

HTML结构：

	    	<title>1-3-1 中间列宽固定</title>        <meta charset="utf-8">                        	<div id="header">            <p>Header</p>        </div>                    <div id="container">            <div id="navWrap">                <div id="nav">                    <h2 id="Nav-Header">Nav Header</h2>                    <div class="main">                        <p>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                        </p>                    </div>                </div>            </div>                <div id="content">                <h2 id="Content-Header">Content Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>                        <div id="sideWrap">                <div id="side">                    <h2 id="Side-Header">Side Header</h2>                    <div class="main">                        <p>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                        </p>                    </div>                </div>            </div>                        <div id="clear"></div>        </div>                    <div id="footer">			<p>footer footer footer footer footer footer footer footer</p>        </div>

CSS：

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 700px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#navWrap{				width: 50%;				margin-left: -210px;				float: left;			}			#nav{				border: 1px solid black;				background-color: #999;				margin-left: 210px;			}			#content{				border: 1px solid black;				background-color: #999;				width: 400px;				float: left;				margin-left: 10px;			}			#sideWrap{				width: 49.9%;				margin-right: -210px;				float: right;			}			#side{				border: 1px solid black;				background-color: #999;				margin-right: 210px;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

1-3-1 双侧列宽固定

nav 和 side 宽度固定

nav 设置为 width: 200px; float: left;

在 content 和 side 外层加上 outerWrap 和 innerWrap ，这样就相当于单列固定宽度的设置，nav 固定宽度

然后再在 content 外层加上 contentWrap ，也相当于在 innerWrap 内部单列固定宽度设置，side 固定宽度

HTML 结构：

	    	<title>1-3-1 双侧列宽固定</title>        <meta charset="utf-8">                        	<div id="header">            <p>Header</p>        </div>                    <div id="container">            <div id="nav">                <h2 id="Nav-Header">Nav Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>                        <div id="outerWrap">            	<div id="innerWrap">                    <div id="contentWrap">                        <div id="content">                            <h2 id="Content-Header">Content Header</h2>                            <div class="main">                                <p>                                    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                                    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                                </p>                            </div>                        </div>                    </div>                                        <div id="side">                        <h2 id="Side-Header">Side Header</h2>                        <div class="main">                            <p>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                            </p>                        </div>                    </div>                </div>            </div>            <div id="clear"></div>        </div>                    <div id="footer">			<p>footer footer footer footer footer footer footer footer</p>        </div>

CSS：

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 800px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#nav{				border: 1px solid black;				background-color: #999;				width: 200px;				float: left;			}			#outerWrap{				width: 100%;				margin-right: -210px;				float: right;			}			#innerWrap{				margin-right: 210px;			}			#contentWrap{				width: 100%;				margin-left: -110px;				float: left;			}			#content{				border: 1px solid black;				background-color: #999;				margin-left: 110px;			}			#side{				border: 1px solid black;				background-color: #999;				width: 100px;				float: right;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

1-3-1 中列和侧列宽固定

nav 和 content 固定宽度，side 外层加上 sideWrap ，相当于1-2-1单列变宽

HTML 结构：

	    	<title>1-3-1 中列和侧列宽固定</title>        <meta charset="utf-8">                        	<div id="header">            <p>Header</p>        </div>                    <div id="container">                    <div id="nav">                <h2 id="Nav-Header">Nav Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>                        <div id="content">                <h2 id="Content-Header">Content Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>                        <div id="sideWrap">                <div id="side">                    <h2 id="Side-Header">Side Header</h2>                    <div class="main">                        <p>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                        </p>                    </div>                </div>            </div>            <div id="clear"></div>        </div>                    <div id="footer">			<p>footer footer footer footer footer footer footer footer</p>        </div>

CSS：

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 800px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#nav{				border: 1px solid black;				background-color: #999;				width: 200px;				float: left;			}			#content{				border: 1px solid black;				background-color: #999;				margin-left: 10px;				width: 400px;				float: left;			}			#sideWrap{				width: 100%;				margin-right: -620px;				float: right;			}			#side{				border: 1px solid black;				background-color: #999;				margin-right: 620px;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

陳述

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

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles