Cisco Aironet ap3g1/ap3g2 8.5版本胖AP韌體網頁配置教程
阿新 • • 發佈：2021-12-22
顯示屬性
英語：Display
分類：
容器
<!DOCTYPE html> <html> <head> <meta charset="utf-8">//編碼方式 <title></title> </head> <body>//瀏覽器視窗 <div style="background-color: red;width: 200px;height: 200px;">這是一個div容器</div> //塊容器會自動佔滿一行，可以自定義寬高 <div style="background-color: yellow;width: 200px;height: 200px;">這是一個div容器</div> <div style="background-color: blue;width: 200px;height: 200px;">這是一個div容器</div> <span style="background-color: red;width: 200px;height: 200px;">這是一個span標籤</span> <!-- 行容器不佔滿一行，不能定義高度 -->// <button style="background-color: red;">這是一個按鈕</button> <button style="background-color: red;">這是一個按鈕</button> <button style="background-color: red;">這是一個按鈕</button> <button style="background-color: red;">這是一個按鈕</button> <!-- 內斂塊性容器，不會佔滿一行，可以自定義寬高 -->// </body> </html>
分類： 塊級元素vs內聯元素
塊級元素
塊級元素(block)特性：
- 總是獨佔一行，表現為另起一行開始，而且其後的元素也必須另起一行顯示;
- 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
- 塊級元素即使設定了寬度，仍然是獨佔一行的
操作
強制豎向排列
內聯元素
內聯元素(inline)特性：
- 和相鄰的內聯元素在同一行;
- 內聯容器不能對齊
- 寬度(width)、高度(height)無法改變，就是裡面文字或圖片的大小;
- 內鏈元素的padding和水平方向margin-left,margin-right 都產生邊距效果，但是豎直方向的margin-top,margin-bottom都不會產生邊距效果。（水平方向有效，豎直方向無效）
div
用class起名字： <div class="father">
- 注意申明時候需要在名字錢加
.
實現佈局控制分離
- 對div起名
- 利用
<style type="text/css">設定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .father{border:2px #f00 solid;} #box{} .con1{ width: 200px; height: 200px; background-color: #FF0000; } .con2{ width: 200px; height: 200px; background-color: #0000FF; } .uncle{ width: 400px; height: 400px; background-color: #445500; } </style> </head> <body> <div class="father"> <div class="con1">son1</div> <div class="con2">son2</div> </div> <div class="uncle">uncle</div> </body> </html>
使橫向排列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{border:2px #f00 solid;}
#box{}
.con1{
width: 200px;
height: 200px;
background-color: #FF0000;
float: left;
/* */
}
.con2{
float: left;
width: 200px;
height: 200px;
background-color: #0000FF;
}
.uncle{
width: 400px;
height: 400px;
background-color: #445500;
}
</style>
</head>
<body>
<div class="father">
<div class="con1">son1</div>
<div class="con2">son2</div>
</div>
<div class="uncle">uncle</div>
</body>
</html>