整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
通過使用框架，你可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁面。每份HTML文檔稱為一個(gè)框架，并且每個(gè)框架都獨(dú)立于其他的框架。
使用框架的壞處：
框架結(jié)構(gòu)標(biāo)簽（<frameset>）
Frame 標(biāo)簽定義了放置在每個(gè)框架中的 HTML 文檔。
在下面的這個(gè)例子中，我們設(shè)置了一個(gè)兩列的框架集。第一列被設(shè)置為占據(jù)瀏覽器窗口的 25%。第二列被設(shè)置為占據(jù)瀏覽器窗口的 75%。HTML 文檔 "frame_a.htm" 被置于第一個(gè)列中，而 HTML 文檔 "frame_b.htm" 被置于第二個(gè)列中：
<html> <frameset cols="25%,75%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> </frameset> </html>
HTML基礎(chǔ)教程：框架基礎(chǔ)
最近在寫一個(gè)律師推薦前臺的網(wǎng)站，在上面搜索框這里出現(xiàn)了問題，我想把搜索的圖標(biāo)放在搜索框里面，但是弄了半天都不大如意……
話不多說，我們直接進(jìn)入主題 ：
其實(shí)就把輸入框與后面的圖標(biāo)一起放在一個(gè)div里面，然后將輸入框的border設(shè)置為0px，最后設(shè)置div的border為最終的外邊框
我們最直接上代碼：HTML：
<div class="search">
<form action="http://baidu.com">
<input type="text" placeholder="請輸入查找的律師或?qū)ｉL">
<span>
<a href="#"><img src="img/icon1.png" alt=""></a>
</span>
</form>
</div>
CSS:這里是設(shè)置外面整個(gè)div的樣式
.search {
width: 250px;
height: 35px;
border: 1px solid white;
border-radius: 30px;
}
這里是設(shè)置里面的輸入框的長寬、boder為0px、里面的字體大小、點(diǎn)擊不會(huì)亮邊框(outline:none)設(shè)置透明度這里使用rgba()，最后一個(gè)屬性就是透明度（在0-1之間 ）
個(gè)網(wǎng)頁前端是由HTML DOM與嵌套組合形成視圖結(jié)加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機(jī)制來響應(yīng)用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負(fù)責(zé)控制DOM元素的頁面布局和顏色、大小的屬性。
在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置?；赿iv+css技術(shù)的“盒子模型”的出現(xiàn)大大代替了傳統(tǒng)的table表格嵌套。
雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個(gè)屬性和內(nèi)容之間的聯(lián)系個(gè)區(qū)別。
所有頁面的元素都可以看做一個(gè)盒子，占據(jù)著一定的頁面空間。一般來說這些被占據(jù)的空間往往會(huì)比單純的內(nèi)容要大。因此，可以通過盒子的邊框和距離等參數(shù)來控制內(nèi)容的位置。
Div+CSS 盒子模型
說明：
1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區(qū)域，外邊距是透明的。
2、Border：中文叫邊框，是圍繞在內(nèi)邊距（Padding）和內(nèi)容外的邊框。注意，它不是透明的。
3、Padding：中文叫內(nèi)邊距，控制內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
4、Content：內(nèi)容，盒子的內(nèi)容，顯示文本和圖像。
5、在Css文件中設(shè)置的Div的Css.width和Css. height就是內(nèi)容的寬和高。
6、盒子實(shí)際尺寸有可能大于內(nèi)容尺寸：
盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;
盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
接下來通過實(shí)例演示的方式來一一講解Margin、Border、Padding的作用和區(qū)別。
頁面如圖所示：
原始樣式
代碼：
HTML:
<body>
<div class="TsetUpper"></div>
<div class="TsetMiddle"></div>
<div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}
.TsetMiddle{
width: 600px;
height: 200px;
background-color: red;
position: relative;
margin: auto;
}
.TsetDown{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}元素邊框：我們可以在CSS邊框?qū)傩灾性O(shè)置元素邊框的樣式和顏色。
按如下代碼設(shè)置Div(TsetMiddle)的Border（邊框）：
border-style:solid;
border-width: 10px;
border-color: aqua;刷新頁面如下圖：此時(shí)TsetMiddle這個(gè)盒子的總寬度已經(jīng)變成200+30+30了，而且可以設(shè)置其底色和線條樣式。
Border
margin 控制周圍的元素區(qū)域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；
按如下代碼設(shè)置Div(TsetMiddle)的margin（外邊距）：
margin: 30px auto;刷新頁面如下圖：此時(shí)TsetMiddle這個(gè)盒子的總寬度已經(jīng)變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
Margin
Padding：當(dāng)元素的 padding（填充）內(nèi)邊距被清除時(shí)，所釋放的區(qū)域?qū)?huì)受到元素背景顏色的填充。
按如下代碼設(shè)置Div(TsetMiddle)的margin（外邊距）：
padding: 30px;刷新頁面如下圖：此時(shí)TsetMiddle這個(gè)盒子的總寬度已經(jīng)變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。
Padding
1、各屬性的值可以用px為單位，也可以用em，百分比等。
2、可以利用盒子的各種屬性，調(diào)整其內(nèi)容在父容器中的位置。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
