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