當前位置：首頁 » 編程語言 » html的布局

html的布局

發布時間: 2021-03-10 22:38:42

A. html布局策略

B. HTML+CSS實現網頁布局

<!DOCTYPEhtml>
<htmllang="en">
<head>
	<metacharset="UTF-8">
	<title>Layout</title>
	<style>
	body{margin:0;padding:0;}
	.Header,.Footer{height:100px;background-color:#369;}
	.Left,.Right{
		:absolute;
		top:100px;
		width:100px;
		height:300px;
		background-color:pink;
	}
	.Left{left:0;}
	.Right{right:0;}
	.Cont{margin:0100px;}
		.con1,.con2{height:150px;}
		.con1{background-color:silver;}
		.con2{background-color:slateGrey;}
	</style>
</head>
<body>
	<divclass="Header">Header</div>
	<divclass="Left">Left</div>
	<divclass="Cont">
		<divclass="con1">con1</div>
		<divclass="con2">con2</div>
	</div>
	<divclass="Right">Right</div>
	<divclass="Footer">Footer</div>
</body>
</html>

C. HTML CSS 布局

用表格啊，布局神器

D. html布局問題

<code><formaction="9in8.php"method="post"><div><label>許可權組名稱</label><inputstyle="width:400px"type="text"name="title"id="inputString"autocomplete="off"onkeyup="lookup(this.value);"onblur="fill();"/></div><divclass="suggestionsBox"id="suggestions"><divclass="suggestionList"id="autoSuggestionsList"><lionClick="fill(''所以'');">所以我想知道這里到底能裝多少字</li></div></div><buttontype="submit"class="btnbtn-primary"data-toggle="modal">提交</button></form></code>css：<code>.suggestionsBox{position:relative;left:272px;margin-top:-2px;}.suggestionList{width:290px;margin:0px;padding:0px;}.suggestionListli{width:280px;margin:0px;padding:0px;cursor:pointer;list-style-type:none;text-align:left;}.suggestionListli:hover{background-color:#659CD8;}</code>

把text-align:right;改成text-align:left;

E. html 布局

F. 製作HTML怎樣用布局

一般來說用DIV+CSS來布局，也就是層和樣式。 css 說白了就是網頁的衣服！
比如說背景顏色，字體屬性，這一類的！
div是一個標簽！
要把css 這件衣服嵌套在div標簽中，從而讓代碼變的簡單！
並且美觀！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css8</title>
<style type="text/css">

</style>
</head>

<body>
<div id="main">
<div id="hader"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
上面的代碼是找來的也是DIV+CSS 布局的以上答案供參考

G. html中如何布局

一個網頁分為：頁首區、主要內容區和頁尾區，這三大區依次由上往下排，每個區都用表格分開，而每個區的表格中又可以層層內嵌多個表格，這樣才能使網頁更有層次感，當然，我們都不想看到一個個表格邊框的邊線，這時，可以將表格邊框粗細設置為：0.
（以上做法更適用於FrontPage網頁製作軟體）

H. HTML要怎麼布局

這個的話很空泛，你想要怎麼布局就怎麼布局。
但是一般的結構就是上中下。
對應header conteng footer 這三部分，中間的部分可以根據自己的需要劃分，可以是左右，右左，左中右，上下，下上，上中下等等。

I. HTML網頁製作中，總共有幾種布局方式

1.自然布局。
沒有任何修飾的布局是自動靠左的。
2.流動布局
上面講的float:left的情況。
3.定位布局
相對定位和絕對定位都是相對於父div標簽的。
相對------以這個元素的本來應該在的位置為參照點
絕對——以父div標簽的原點（左上角）為參照點。
由於外層是position:relative，所以里層是absolute的話，則會以外層的左上角為位移參考對齊。當然外層只寫position:relative，寫上left,top這兩個值，則表示以：以這個元素的本來應該在的位置為布局參照原點進行left,top對齊。
還有一種情況是，只是一個position:absolute;外層沒有position:relative，這時會找尋那個點為參考呢？這時候的原則是：如果某父級元素中有relative者，則以某父級元素為參考原點，如果沒有position:relative，則以body為參考原點。如果position:absolute外層沒有relative時，這兩個布局上是沒有區別的。
當然最後一種情況是：外層是：position:absolute;里邊是position:relative，那會是什麼情況？按著原來的原則，absolute會參考body為布局原點，relative會參考他本來應該在的位置為布局原點，這時候其實就是參考外層左上角為布局原點。

J. html5頁面怎麼布局

1）像<span>這樣的行內標記，定義它的margin-top和margin-bottom是無效的，除非你把它設置為塊狀元素才可以。Display:block
2）對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 DIV 等等，
3）無論什麼元素，一旦設置為是浮動顯示，就擁有了完整的盒模型結構，我們就可以使用外邊距，內邊距，邊框，高和寬來控制的大小以及與其他對象之間的位置關系。
4）浮動是從網頁布局的角度來定義元素的顯示，而行內和塊狀屬性主要是從元素自身的性質來定其顯示的。
5）當元素沒有定義邊框時，可以把內邊距作為外邊距使用。有時候外邊距會有重疊現象的。
6）當為元素定義背景圖像時，內邊距區域內可以顯示背景圖像，而對外邊距區域來說，背景圖像是達不到的，他永遠都是透明狀態
7）用div+css設計網頁結構時，設計師滿腦子都是網頁內容，而非內容所呈現的效果。
8）塊狀元素：不管塊狀元素寬度是多少，他總會自動占據一行，因為在他末尾附加了一個換行符，而行內元素沒有這個特點。塊狀元素有完整的盒模型結構，可以定義寬度和高度，而行內元素沒有這個特性，無法通過高度來改變文本行的行高。
塊元素的代表標記 div
行內元素的代表標記 span ，行內標記不具備組織結構框架
9）網頁布局分為：自然布局，浮動布局，定位布局
10）當一個元素被定義為浮動顯示時，即定義為塊狀元素。並且該元素就會收縮自身體積為最小狀態。所以，應該有個好的習慣即把浮動元素設置高和寬。如果沒有設置，則元素會按照它所包含的內容大小來確定它的大小。
11）當元素浮動後，周邊的對象會自動環繞浮動元素周圍，形成一種環繞關系。
12）塊狀元素之間的外邊距會有重疊現象，但是浮動元素之間的外邊距不會發聲重疊現象。
13）浮動元素移動，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此類推。
14）一般定位元素（絕對或是相對元素）都會覆蓋在文檔流對象之上。但是，select元素的窗口控制項還不完全支持z-index
15）在css定位布局中，一般遵循「外部相對定位，內部絕對定位」
16）在body中設置min-width:760px,可以避免布局重疊現象。

閱讀全文

html的布局

與html的布局相關的閱讀推薦