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靜態檔案
線佈局在寫樣式
版心樣式