老男孩14期自動化運維day14隨筆和作業(二)
CSS
1. 在標籤上設定style屬性：
background-color:#2459a2; height:48px; ...
2. 編寫css樣式:
- 可以寫在標籤的style屬性裡
<div style="background-color:#2459a2;height:48px;">ff</div>
- 寫在head裡，style標籤中寫樣式
<head>
<meta charset="UTF-8">
<title>Title</ 幾種選擇器：
- id 選擇器：（用的少）知道 <style> #i1{ background-color:#2459a2;height: 48px; } </style> - class 選擇器：（用的最多）最推薦 .名稱{ } <標籤 class="名稱"> <標籤 /> - 標籤選擇器：要會 div { } 所有的div都此樣式 - 層級選擇器 要會 .c1 .c2 div { } class=c1 下 class=c2下的div - 組合選擇器（逗號）要會 #c1,c2,c3{} 逗號前後都可以用 - 屬性選擇器 必會 對選擇到的標籤再通過屬性再進行一次篩選 PS:優先順序：標籤上的style優先，其他的就按照編寫的順序，就近原則
3.css樣式檔案也可以寫在單獨檔案中
寫在css檔案中 用link載入 就可以直接使用css裡的樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/commons.css">
</head>
<body>
<div class="c1 c2">de</ 4.css 的註釋 / * --------- * /
5. 邊框
寬度：樣式：顏色
border：4px ;dotted ;red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border:1px solid red;">adad</div>
<div style="height:38px;width:80%;border:1px solid red;font-size:16px;text-align:center;line-height:48px;font-weight:1000;">1</div>
</body>
</html>
6.用的比較多的屬性：必須要會
height , 高度
width, 寬度 畫素，百分比也可以
text-align:center, 水平方向居中
line-height, 垂直方向根據標籤高度居中
color, 字型顏色
font-size, 字型大小
font-weight 字型加粗
7. float 應用最廣的
< float:right> < float:left>
讓標籤浪起來，塊級標籤也可以堆疊
父div管不住的時候，在內部最後面加上：< div style=“clear:both;”></ div>
8.display
display:none; 讓標籤消失 （後面寫js會用 比如彈窗 一開始就是隱藏，點開就顯示）
display:inline div變span
display:block span變div
display:inline-block; 具有inline,預設自己有多少佔多少
具有block,可以設定高度，寬度，padding,margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color:red;display:inline">aa</div>
<span style="background-color:red;display:block">aa</span>
</body>
</html>
dispay總結：
行內標籤：無法設定高度，寬度，padding,margin
塊級標籤：設定高度，寬度，padding,margin
9.邊距
內邊距 padding,
外邊距 marigin, marigin:0 auto
margin-left 外邊距 距離左邊的位置
margin-top 外邊距 距離頂部的位置
margin和padding是在html中的盒模型的基礎上出現的，margin是盒子的外邊距，即盒子與盒子之間的距離，而padding是內邊距，是盒子的邊與盒子內部元素的距離。
說明
這個簡寫屬性設定元素所有內邊距的寬度，或者設定各邊上內邊距的寬度。行內非替換元素上設定的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。
註釋：不允許使用負值。
例子 1
padding:10px 5px 15px 20px;
上內邊距是 10px
右內邊距是 5px
下內邊距是 15px
左內邊距是 20px
例子 2
padding:10px 5px 15px;
上內邊距是 10px
右內邊距和左內邊距是 5px
下內邊距是 15px
例子 3
padding:10px 5px;
上內邊距和下內邊距是 10px
右內邊距和左內邊距是 5px
例子 4
padding:10px;
<body style="margin:0 auto;">
<div class="pg-header">
<div style="width:980px;margin:0 auto;">
<div style="float:left;">收藏本站</div>
<div style="float:right;">
<a>登入</a>
<a>註冊</a>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div>
<div style="width:980px;margin:0 auto;">
<div style="float:left;">
logo
</div>
<div style="float:right;">
<div style="height:50px;width:100px;background-color:#dddddd;">購物車</div>
</div>
</div>
</div>
<div style="background-color:red;">
<div style="width:980px;margin:0 auto;">
<div style="float:left;">
logo
</div>
<div style="float:right;">
<div style="height:50px;width:100px;background-color:#dddddd;">購物車</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div style="width:300px;border:1px solid red;">
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="clear:both;"></div>
</div>
</body>
10.position
(1)fixed => 固定在某個位置
(2)relative + absolute:
absolute模組存放的位置是其父模組relative的相對位置
注意：
height: 400px;
width: 800px;
position: fixed;
background-color: white;
left: 50%;
top:50%;
margin-top: -200px;
margin-left: -400px;
border: 2px solid red;
中 left 50% top 50% 是指div的左上角那個點的位置
要想邊框居中 加入 margin-top: -200px;margin-left: -400px;調整位置
<div style="position:relative;">
<div style="position:absolute;">
</div>
</div>
11.opcity：0.5 透明度
12.z-index :層級順序，誰大在誰上
13.overflow
hidden 隱藏圖片
auto 當內容增多時，增加滾動條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top:0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color:white;
}
/*當滑鼠移動到當前標籤上時，以下css屬性才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42區</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">b</div>
</body>
</html>
14.backgrond
background-image:url(‘image/4.gif’); # 預設,div大，圖片重複訪
background-repeat: repeat-y;
position摳洞:
background-position-x:
background-position-y:
background-position: 10px 10px 跟上面x y一樣
綜合小練習 登入框
在使用者名稱 輸入框左側顯示一個使用者頭像的圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--綜合小練習 綜合了今天所有東西-->
<div style="height: 35px;width: 400px;position:relative;">
<input type="text" style="height:35px;width:370px;padding-right: 30px"/>
<span style="background-image:url(1.png);
height:16px;
width: 16px;
display:inline-block;
position: absolute;
right: 0;
top:10px;"></span>
</div>
</body>
</html>