html框架布局網(wǎng)頁代碼(html框架布局網(wǎng)頁代碼靜態(tài))
大家好!今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于html框架布局網(wǎng)頁代碼的問題,以下是小編對(duì)此問題的歸納整理,讓我們一起來看看吧。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè),服務(wù)客戶遍布全國(guó),相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043,或微信:1454722008
本文目錄:
一、HTML基本框架怎么寫
框架可以生成獨(dú)立變化和滾動(dòng)的窗口,從而能將一個(gè)窗口分割為若干個(gè)字窗口。在每一個(gè)字窗口中顯示一個(gè)HTML文檔。我們這回就來看看多文檔的基本結(jié)構(gòu)和子窗口之間的交叉鏈接。
一,基本結(jié)構(gòu)HTML使用<Frameset>,<Frame>和<noFrames>標(biāo)簽來定義框架。下面我們就來了解一下這三個(gè)標(biāo)簽的作用和相應(yīng)的屬性。
(一),<Frameset>標(biāo)簽。
該標(biāo)簽是框架設(shè)計(jì)標(biāo)簽,成對(duì)使用。首尾標(biāo)簽之間的內(nèi)容就是使用到框架的HTML主體部分。在使用框架的HTML文檔中不能出現(xiàn)<body>標(biāo)簽,否則會(huì)導(dǎo)致瀏覽器忽略所有的框定義而只顯示<body>和</body>之間的內(nèi)容。
<Frameset>標(biāo)簽作用是將窗口分割為若干個(gè)自窗口,子窗口的數(shù)目取決于嵌套在該標(biāo)簽中<Frame>標(biāo)簽的書目。<Frameset>標(biāo)簽有兩個(gè)屬性。rows和cols,分別用來確定個(gè)子窗口的高度和寬度,格式為<Frameset rows="值1,值2,……值n">;<Framest cols="值1,值2,……值n">.各參數(shù)之間以逗號(hào)分割,依次表示各個(gè)自窗口的高度(寬度)。這兩個(gè)屬性的參數(shù)值可以是數(shù)字、百分?jǐn)?shù)或符號(hào)“*”。下面我們來分別解釋一下:
(1)數(shù)字。表示子窗口高度(寬度)所占的像素點(diǎn)數(shù)。
(2)百分?jǐn)?shù)。表示子窗口高度(寬度)占整個(gè)瀏覽器窗口高度(寬度)的百分比。 (3)符號(hào)“*”。當(dāng)符號(hào)*只出現(xiàn)一次。即其他子窗口的大小都有明確的定義時(shí),表示該子窗口的大小將根據(jù)瀏覽器窗口的大小而自動(dòng)調(diào)整。當(dāng)符號(hào)*出現(xiàn)一次以上時(shí),表示按比例分割瀏覽器窗口的剩余空間。例如:
<Frameset cols="40%,2*,*">表示將瀏覽器窗口分割為3列,第一個(gè)子窗口在第一列,窗口寬度為整個(gè)瀏覽器窗口寬度的40%;第二個(gè)子窗口在第二列,占瀏覽器窗口剩余空間的2/3,即其寬度為整個(gè)瀏覽器窗口寬度的40%,第三個(gè)子窗口占剩余空間的1/3,寬度為整個(gè)瀏覽瀏覽器窗口寬度的20%。
(二),<frame>標(biāo)簽。HTML用<frame>標(biāo)簽來標(biāo)識(shí)子窗口。<frame>標(biāo)簽是嵌套在框架設(shè)置標(biāo)簽<Frameset>標(biāo)簽中來使用的單獨(dú)標(biāo)簽。在<Frameset>中定義了多少個(gè)子窗口就要有多少個(gè)<frame>標(biāo)簽與之匹配,依次定義各個(gè)窗口的性質(zhì)。<frame>標(biāo)簽有7個(gè)屬性,除SRC屬性是不可缺省的外,其他屬性都是可選的。
(1)SRC屬性。用以定義子窗口的名稱。
(2).name屬性。用于定義子窗口的名稱。
(3)frameboder屬性。該屬性的參數(shù)值為1或0。當(dāng)參數(shù)值為1時(shí),表示該子窗口有邊框,為0時(shí)沒有邊框。該屬性缺省值為1。
(4)bordercolor屬性。用以規(guī)定子窗口的邊框顏色。如果在一個(gè)以上的<frame>標(biāo)簽中定義了子窗口的邊框顏色,則以第一次指定的顏色為標(biāo)準(zhǔn)。在指定邊框顏色時(shí),可以使用顏色的RBG代碼或直接使用與該顏色想對(duì)應(yīng)的英文單詞。bordercolor屬性的參數(shù)值可以是16種顏色中的任意一種。
(5)sclling屬性。屬性的參數(shù)值為yes,no或auto之一。參數(shù)值為yes時(shí)表示該子窗口始終有滾動(dòng)條。為no時(shí)是始終沒有滾動(dòng)條。為auto時(shí)表示當(dāng)文檔的內(nèi)容超出窗口范圍時(shí),瀏覽器自動(dòng)為該子窗口添加滾動(dòng)條。scolling屬性的缺省值為auto.
(6)maginwidth和marginwidht屬性。這兩個(gè)屬性是用來指定顯示內(nèi)容與窗口邊界之間的空白距離大小的。其中maginwidth屬性用于確定顯示內(nèi)容與左右邊界之間的距離;maginwidht用來確定顯示內(nèi)容與上下邊界之間的距離。這兩個(gè)屬性的參數(shù)值都是數(shù)字。分別表示左右邊距所占的像素點(diǎn)數(shù)。
(三),<noframes>標(biāo)簽。使用該標(biāo)簽可以在用戶瀏覽器不支持框架顯示時(shí)告之用戶一些相關(guān)信息,以免瀏覽者對(duì)空白窗口畫面感覺莫名其妙。<noframes>標(biāo)簽是成對(duì)使用的。首尾標(biāo)簽之間的內(nèi)容就上告之瀏覽者的信息。如“如您看到空白的畫面說明您的瀏覽不支持框架顯示”。雖然常用的兩中瀏覽器IE和NC都是支持框架顯示的。但為了加強(qiáng)文檔的適用性,我們最好還是養(yǎng)成使用這個(gè)標(biāo)簽的習(xí)慣。
(四),基本結(jié)構(gòu)。
我們舉例說明HTML中框架文檔的基本結(jié)構(gòu):
<html>
<head>
<title>文檔標(biāo)題</title>
</head>
<Frameset Cols="值1,值2,……,值n>將瀏覽器窗口分割為n個(gè)窗口。
<Frame SRC="1.html">
<frame SRC="2.html">
.
.
.
<frame SRC="n.html">
</Frameset>
<noframes>如果您看到空白的畫面,說明您的瀏覽器是不支持框架機(jī)構(gòu)的</noframes>
</html>
其中,<frameset>標(biāo)簽是可以嵌套使用的,也就是說,可以將其中某一個(gè)或幾個(gè)子窗口劃分為若干個(gè)更小的窗口。例如:
<html>
<Frameset cols="30%,90,*">
<frame SRC="1.html"name=cont>
<frame SRC="caipage.gif">
<frame SRC="2.html">
</frameset>
<frame SRC="f2.html"name=another marginheight=120>
</frameset>
<noframes>您使用的瀏覽器不支持框架</noframes>
</html>
二,目標(biāo)窗口的交叉鏈接。
為了方便用戶進(jìn)行搜索和瀏覽,我們經(jīng)常用到一系列錨標(biāo)組成的索引目錄顯示在一個(gè)子窗口中,而將錨標(biāo)所指向的內(nèi)容放在另一個(gè)子窗口中。顯示錨標(biāo)的子窗口通常被成為”源窗口“,顯示目標(biāo)文檔的窗口則稱之為“目標(biāo)窗口”。
在進(jìn)行交叉<frame>標(biāo)簽的name屬性定義目標(biāo)窗口的名稱,然后再修改顯示在源窗口中的文檔。在所有的<A>標(biāo)簽中添加語句target="目標(biāo)窗口名稱"來指定目標(biāo)文檔的顯示位置。例如:/P>連接時(shí),我們必須先用
<html>
<head>
<title>目標(biāo)窗口測(cè)試頁</title>
</head>
<frameset cols="30%,90,*">
<frame src='f1.html"marginheight=60>
<frameset rows="120,*">
<frame src="caipage.gif">
<frame src="2.html">
</frameset>
<frame src="f2.html"name=another marginheight=60>
</frameset>
<noframes>您的瀏覽器不支持框架結(jié)構(gòu)</noframes>
其中,第一個(gè)子窗口是源窗口。我們?cè)谠创翱诘膶?duì)應(yīng)文檔f1.html中定義了一系列錨標(biāo),該文檔的內(nèi)容如下:
<html>
<body>
<<center>(說明:文檔主體內(nèi)容舉重顯示
<P><A href="田園風(fēng)光.jpg" target="another">田園風(fēng)光</A><P>
<A href="qiu.jpg" target="another">金色秋天</A><P>
<A href="tong.html" target="another">漁哥唱晚</A><P>
<A href="pig.gif" target="another">夕陽無限</A><P>
</body>
</html>
當(dāng)用戶點(diǎn)擊錨標(biāo)“田園風(fēng)光”后,瀏覽器將在目標(biāo)文檔顯示錨標(biāo)的連接對(duì)象
二、如何做html框架?
首先注意一點(diǎn),在<frameset></frameset>所在的文件中不需要寫<body>體,否則會(huì)不顯示網(wǎng)頁的分頁。
做一個(gè)有頂,有左側(cè)網(wǎng)頁,有右側(cè)網(wǎng)頁的框架集網(wǎng)頁應(yīng)該怎么做?
先把各個(gè)小的分散頁面做好
all2.html
top.html
left.html
right1.html
right2.html
來看每個(gè)文件的具體代碼:
all2.html
<!--這里開始是整體框架結(jié)構(gòu),為上下結(jié)構(gòu)-->
<frameset rows="20%,*"
frameborder=0>
<frame src="top.html" noresize scrolling=no
/>
<!--這里開始是另外一個(gè)框架集結(jié)構(gòu)為左右結(jié)構(gòu)-->
<frameset cols="20%,*">
<frame src="left.html" noresize
/>
<!--frame元素中有一個(gè)name屬性,相當(dāng)于給frame取名,以方便識(shí)別位置-->
<frame src="right1.html" name="right"
/>
</frameset>
</frameset>
top.html
這里是頂部?jī)?nèi)容
left.html
<a href="right1.html"
target="right">青花瓷1</a><br
/>
<a
href="right2.html"
target="right">青花瓷2</a><br
/>
right1.html
這里是right1.html的內(nèi)容
right2.html
這里是right2.html的內(nèi)容
三、在HTML開發(fā)中如何利用DIV實(shí)現(xiàn)這樣的布局?
田字格布局,要求大小相同的四個(gè)正方形。而html里div如果不加控制的話是獨(dú)占一行的,現(xiàn)在要做的是把四個(gè)大小相同的方塊,排列成“田”字。
第一步、新建html文檔并搭建框架
新建一個(gè)TXT文檔,重命名為“田子格布局.html”,然后用記事本打開,輸入表頭信息,已經(jīng)html整體框架搭建。包括head與body。
第二步、DIV布局
分別復(fù)制4個(gè)不同的div作為4部分,并且分別命名為不同id;顯示內(nèi)容為塊1、塊2、塊3、塊4。
【提示】div在html里是單獨(dú)占一列的(如果不控制),現(xiàn)在4個(gè)div布局完成。
【代碼如下】
</head>
<body>
<div id="prat1">塊1</div>
<div id="prat2">塊2</div>
<div id="prat3">塊3</div>
<div id="prat4">塊4</div>
</body>
</html>
第三步、CSS控制4個(gè)DIV顯示
輸入style然后開始對(duì)4個(gè)div進(jìn)行控制,分別對(duì)四個(gè)塊進(jìn)行大小和顏色的設(shè)定,處理之后在瀏覽器中打開顯示如下圖所示。
【提示】由于是田子格,所以四個(gè)div大小應(yīng)該相同,為了可以區(qū)分顏色分別采用不同的顏色。
【代碼如下】
<style>
#prat1{
width: 200px;
height: 200px;
background: blue;/*邊長(zhǎng)200像素的藍(lán)色方塊*/
}
#prat2{
width: 200px;
height: 200px;
background: red;/*邊長(zhǎng)200像素的藍(lán)色方塊*/
}
#prat3{
width: 200px;
height: 200px;
background: yellow;/*邊長(zhǎng)200像素的藍(lán)色方塊*/
}
#prat4{
width: 200px;
height: 200px;
background: green;/*邊長(zhǎng)200像素的藍(lán)色方塊*/
}
</style>
第四步、使用浮動(dòng)
在CSS里控制輸入float:left;四個(gè)div全部輸入一樣內(nèi)容,這時(shí)候看到的是四個(gè)并排的div,而沒有達(dá)到想要的效果,如下圖所示。
【代碼如下】
<style>
#prat1{
width: 200px;
height: 200px;
background: blue;
float: left;
}
#prat2{
width: 200px;
height: 200px;
background: red;
float: left;
}
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
}
#prat4{
width: 200px;
height: 200px;
background: green;
float: left;
}
</style>
第五步、清除浮動(dòng)
在第三塊上使用清除浮動(dòng)clear:left;其余的代碼保持不變,然后保存代碼,刷新打開的頁面,就會(huì)看到一個(gè)田字格了,如下圖所示。
【代碼如下】
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
clear: left;
【注意】只清除第三塊的就可以了。
【完整的代碼】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>田字格布局</title>
<style>
#prat1{
width: 200px;
height: 200px;
background: blue;
float: left;
}
#prat2{
width: 200px;
height: 200px;
background: red;
float: left;
}
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
clear: left;
}
#prat4{
width: 200px;
height: 200px;
background: green;
float: left;
}
</style>
</head>
<body>
<div id="prat1">塊1</div>
<div id="prat2">塊2</div>
<div id="prat3">塊3</div>
<div id="prat4">塊4</div>
</body>
</html>
四、html網(wǎng)頁調(diào)用代碼 如何在1網(wǎng)頁里面調(diào)用網(wǎng)頁2
主流常用的有兩種方式,div和iframe
1.DIV
將頁面嵌入到當(dāng)前頁的div中,是用div對(duì)象的load方法,需要使用jquery.js包
<div id="page"></div>$('#page').load('new.html');
2.iframe
使用iframe標(biāo)簽進(jìn)行頁面加載,只需指定src屬性即可
<iframe src="new.html" width="400" height="200" scrolling="yes" />
Src值為被嵌入網(wǎng)頁地址
Scrolling 是否有滾動(dòng)條,yes有,no無,auto 根據(jù)被顯示html自動(dòng)顯示或隱藏
Width寬度
Height高度
總結(jié):
div是當(dāng)前html頁的固有元素,Iframe是外部html的調(diào)用,相當(dāng)于內(nèi)嵌。
div是用來組織結(jié)構(gòu)的,IFrame是拿來引用外部HTML的。現(xiàn)在使用DIV嵌套頁面的比較多,一個(gè)頁面的布局少不了大大小小的DIV,使用DIV方式可以靈活布局調(diào)整嵌入頁面的位置及大小。Iframe則是將頁面進(jìn)行分割,在頁面上開辟一個(gè)獨(dú)立的空間來放別的頁面
以上就是關(guān)于html框架布局網(wǎng)頁代碼相關(guān)問題的回答。希望能幫到你,如有更多相關(guān)問題,您也可以聯(lián)系我們的客服進(jìn)行咨詢,客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。
推薦閱讀:
免費(fèi)html中文網(wǎng)頁模板(免費(fèi)html中文網(wǎng)頁模板)
杭州htv1綜合頻道(杭州綜合1頻道節(jié)目預(yù)告)
猜你喜歡
辦公室設(shè)計(jì)風(fēng)格有哪些(辦公室設(shè)計(jì)風(fēng)格有哪些)
杭州市財(cái)經(jīng)職業(yè)學(xué)校學(xué)費(fèi)多少(杭州市財(cái)經(jīng)職業(yè)學(xué)校學(xué)費(fèi)多少錢一年)
中華商標(biāo)協(xié)會(huì)(中華商標(biāo)協(xié)會(huì)會(huì)長(zhǎng))
動(dòng)漫專業(yè)就業(yè)方向(動(dòng)漫設(shè)計(jì)的就業(yè)前景和就業(yè)方向)
杭州啟唯進(jìn)出口有限公司(杭州啟唯進(jìn)出口有限公司怎么樣)
杭州AP會(huì)議什么時(shí)候開的(杭州apec會(huì)議時(shí)間)
商業(yè)空間設(shè)計(jì)PPT(商業(yè)空間設(shè)計(jì)ppt模板)
關(guān)于杭州的美文(關(guān)于杭州的美文摘抄)
農(nóng)村別墅庭院設(shè)計(jì)實(shí)景圖(農(nóng)村最簡(jiǎn)單的庭院設(shè)計(jì))