css部分筆記上傳
可參考w3school網站學習
標記語言.html hyperText 超文字（文字 圖片 連結） markup language
標記 閉合標籤:<></> 開始標籤,結尾標籤
單標籤 :</> 結尾標籤
語義化： 會被瀏覽器抓取
1.標題標籤: h h1–h6
語義化：h1對瀏覽器關鍵字抓取很重要
2.段落標籤： p
3.換行 ：
4.水平線 ：
5.img圖片：
6.加粗文字： 和
7.斜體標籤: 和 em具有語義化
8.下劃線： 和
9.刪除線： 和 （以上加粗斜體刪除線的單詞寫法都有語義化，儘量用字母寫法bisu）
10.去除連結下劃線：text-decoration:none
10.錢符號： ¥
11.a標籤（轉連線）：名字
12.連線標籤：
13.target="_blank":連線在新視窗開啟
day2
1.對齊:
align:center居中對齊
text-align:center 文字居中對齊
2連結下劃線：texst-decoration:
overline(上劃線)
underline(下劃線)
line-through(中劃線)
2.列表:
1.無序列表(無編號) <ul style="color:red;list-style:none"> <li>列表項</li> </ul> 2.有序列表(有編號) <ol type=“A” start=“3”> <li>列表項</li> </ol> 3.自定義列表(表頭，複合標籤) <dl>
3.web 結構 html + 樣式（衣服css）+ 行為js
1.css 行內 文字內 外部檔案
4.style物件
style=“width:
height:
color:”
5.選擇器 /樣式 1:選擇元素 選擇器 10/
1：標籤選擇器 標籤名 { 屬性名：屬性值；屬性名：屬性值；.....} 2:類選擇器 一組相同名字的元素 class="" .類名 { } 3:id選擇器 唯一識別 唯一一個 id = "id名" #id名 { } 4.*選擇器：全域性元素 5.後代選擇器： 父 子 { } 孩子+孫子 6.子代選擇器： 父 > 子 {} 孩子 8.偽類選擇器： 父 子:first-child :last-child :nth-child(2) 第一個孩子 :visited(點選過的,訪問過得) :active（點選瞬間） :link 9.交集選擇器： 沒有空格，沒有>，黏在一起就可以 10.並集選擇器： 多個具有相同樣式的元素 .dv1,.myP {} 11.屬性選擇器：[src="....."] {} 優先順序（權重）： !important(無限大)>id#100>類.10>標籤1>*0
6.邊框 邊寬2px 1px 5px 邊型 solid 實現 變色
border:2px solid red
7.hover:滑鼠移動
8.font-size:200px 字型大小
9.table標籤
10.tr 行
11.th 欄位
12.td 單元格
13.border 表格邊框
14.cellspacing 單元格間距
15.cellpadding 內容和單元格的距離(內邊距）
16.表格背景色 bgcolor
17.base target="_blank" 所有連線都重開一個視窗
18.合併單元格（先確定是跨行還是跨列合併）
1.跨行合併：由上至下 rowspan=“合併行數”
2.跨列合併：由左至右 colspan=“合併列數”
19.表單（蒐集使用者資訊） 控制元件：input 型別：text(文字框),password（密碼）,radio（單選框）,checkbod(複選框)，select(*選擇
框),textarea(*文字框)，button,image,file,submit(提交)，reset(重置)
<form action="#" method="post" name="zhuce">
<!--type = "text" 文字框-->
使用者名稱：<input type="text" name="username"><br>
密碼：<input type="password" name="passwd"><br>
<!--單選按鈕-->
性別：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br>
愛好：<input type="checkbox">唱歌
<input type="checkbox">睡覺
<input type="checkbox" checked="checked">刷抖音
<input type="checkbox">搖一搖<br>
城市：<select name="" id="">
<option value="">北京</option>
<option value="" selected="selected">上海</option>
<option value="">廣州</option>
<option value="">深圳</option>
</select><br>
<input type="button" value="登入">
<input type="image" src="images/up.jpg">
<input type="file">
<textarea name="" id="id1" cols="30" rows="20"
style="resize:none"></textarea>
<!--提交按鈕必須的-->
<input type="submit" value="提交">
<input type="reset">
</form>
day-03
div:裝載容器（塊級元素）
span:容器（行內元素）
solid
標籤分類：
1.塊級元素block（可設高，滿寬）：div p table form ul li ol li dl dt
2.行內元素inline(不可設高，可並排)：span em a strong b
3.行內塊inline-block(可以設定高度，也可以並排) ：img,input
所有元素都是盒子
包裹優先順序：塊級元素>行內元素>
元素轉換：display：塊級/行內/行內塊元素
行高line-height:
上行文字的頂/底到下行文字的頂/底
頂線、中線、基線、底線
文字垂直居中:
行高=盒子高時
文字水平居中：
text-align:center
內邊距：padding（內容和邊框的距離）：(4)上，右，下，左 (3)上，左右，下 (2)上下，左右 （1）上下左右
外邊距：margin（邊框和邊框的距離）：
外邊距移動： margin-left:10px 左移
border:border-width border-style border-color
盒子水平居中：margin:200px auto;
day-04
1.浮動（解決文字環繞，盒子並排）：float : left(左漂流) / right(右) / none （要想並排幾個元素就要把幾個元素都加上浮動
屬性）
head:樣式
body:結構
2.偽元素(在結構中新增一個元素) ::after/before {}
3.偽元素清除浮動流
.father::after/before {
content:""
clear:both;
display:block;
}
清除浮動流，要新增到父親身上
4.溢位隱藏/滾動
overflow:hidden/scroll
5.圓角邊框
border-radius:10px(50%是圓)
6.陰影
陰影 box-shadow:
1:水平方向的陰影大小
2：垂直方向的陰影大小
3：陰影的模糊距離
4：陰影的尺寸
5：陰影的顏色
6：外側(outset預設) 內側inset
7.定位：
position:static(靜態)/relative(相對)/absolute(絕對)/fixed(固定)
top:
left:
bottom:
right:
8.層級：
z-index:
9.透明度：
background-color: rgba(0,0,0,.5);
10.字型大小設定：
1.font-size:2em
若父元素設定14px 則孩子的font-size：1em就是14px 2em==28px
2.font-family:“Adobe Arabic”,“微軟雅黑”,"…",sans-serif;
3.font-weight:100–900(字型粗細，400 nmormal 600 bold <400 lighter)
4.font-style:italic(斜) oblique(斜),normal
font:font-style font-weight font-size/line-height font-family
11.顏色：
white balck red green
#fff #000 #000–#fff
#000000–#ffffff
rgba(255,255,2555,);
12.首行縮排：
text-indent:3em
13.背景（1顏色 2地址 3是否平鋪repeat/no-repeat（預設平鋪repeat） 4.是否固定fixed/score(預設) 5.位置x y）
background：#000 url(“adv.jpg”);
14.幾種隱藏
1.display:none (瀏覽器中不留位置）
2.visibility:hidden:(佔位置)
15.自動換行：
word-break：normal(預設)
break-all:允許單詞內換行
keep-akk:只能被半形空格或連字付處換行
- white-space:nowrap(不換行)
17.文字溢位
text-overflow：clip 不顯示省略標記（…），而是簡單的裁切
ellipsis 顯示省略號
必須和overflow:hidden; white-space:nowrap； text-overflow:ellipsis;三個一起用
18.版心居中：width:(是要居中盒子的寬度)
阿里巴巴向量圖示庫
建京東專案資料夾
images資料夾
css樣式資料夾
js資料夾
index.html首頁html
assets靜態檔案
線佈局在寫樣式
版心樣式