目錄
css入門
三要素
1) html (網頁骨架) 塊 ，行 （table/form）
2) css（頁面裝飾，佈局，動畫過渡效果）
原則：對於動畫效果能用css實現的絕對不用js
3) Javascript（樹莓派）
動態DOM, 類似於jstl
數據交互
如何在html中使用css(3種方式)
1) 嵌入在標籤內部
將css代碼寫在了html中，較爲混亂
複用性較低
好處：優先級高，簡單直接（修改別人代碼的時候，weex rn）
2) 集中嵌入在style標籤中
3) 將css獨立寫在外部的css文件中，並且通過link導入進來
適用於企業級開發
css語法
選擇器 {
/*規則*/
color:#ffffff;
background-color:pink;
}
css選擇器 (jQuery選擇器)
核心選擇器
用法：選擇較大範圍
1. 標籤（元素）選擇器
div {}
h1 {}
2. id選擇器
#one {}
<div id="one">one</div>
<div id="two">two</div>
3. class選擇器
.first {}
<div id="one" class="first">one</div>
<div id="two" class="first">two</div>
<div id="three" class="first">one</div>
<div id="four" class="second">two</div>
<p id="five" class="first">p</div>
詞窮！！！
4. 並且選擇器
div.first {}
p#five {}
5. 或者選擇器
div,.first {}
6. 普遍選擇器
*
層次選擇器【一般不超過5層】
1. 子代選擇器
.top_nav > ul > li
選中class爲top_nav的元素的直接後代ul元素的直接後代li元素
2. 後代選擇器
.top_nav li
3. 下一個兄弟選擇器
.top_nav li + *
4. 之後所有兄弟選擇器
.top_nav li ~ *
過濾器
對已經選擇到的元素進行過濾
1. 屬性過濾器
selector[name] 已選擇到的元素具有name屬性
selector[name=v] 已選擇到的元素具有name屬性，並且name屬性的值爲v
selector[name^=v] 已選擇到的元素具有name屬性，並且name屬性的值以'v'開頭
selector[name$=v] 已選擇到的元素具有name屬性，並且name屬性的值以'v'結尾
selector[name*=v] 已選擇到的元素具有name屬性，並且name屬性的值中包含了'v'
2. 僞類過濾器
以:開頭的
selector:first-child 過濾出已選擇元素中的是第一個孩子的元素
selector:last-child
selector:nth-child(2)
selector:nth-child(even)
selector:nth-child(odd)
selector:nth-child(3n+1)
selector:only-child
selector:not(selector)
...
selector:hover
selector:active
selector:visited
selector:focus
3. 僞元素過濾器
可以產生出來一個虛擬元素（行內元素）
以::開頭的
div::before {
}
div::after {
}
<div>
::before
<p>one</p>
<p>two</p>
::after
</div>
css規則【簡單大方】
單位值
px 像素
字體【設計師-架構師規定】【可以被繼承】
<div style="font-size:12px">
one
<div>
two
</div>
</div>
font-size 字體大小 默認16px
font-weight 字體粗細程度
normal【默認】
bold 加粗
bolder 比當前元素上繼承的值要大一些
100~900
font-style 風格 （是否打開斜體）
normal【默認】
italic
font-family 字體族
line-height 行高
絕對單位：1px
速寫
font: [font-weight] [font-style] font-size/line-height font-family
網絡字體（字體圖標庫）
iconfont【阿里巴巴的字體圖標庫】
1. 選取自己想要圖標
2. 生成項目
3. 按照說明進行使用
文本【可以被繼承】
text-align
left 居左排列
center
right
text-indent 文本縮進
text-decoration
line-through
overline
underline
none
text-transform 字體大小寫轉換
uppercase
lowercase
列表
list-style:none
盒子
margin
padding
border
width
height
背景
background-color 背景色
關鍵字 teal red black white
十六進制 #ffffff #000000 #ff0000
rgb函數 rgb(255,255,255)
rgba函數 rgba(0,0,0,.5)
background-clip 背景覆蓋區域
border-box 邊框及邊框以內全部覆蓋
padding-box 內邊距及內邊距以內全部覆蓋
content-box 內容區域全部覆蓋
background-origin: border-box;
背景圖鋪設的起點
background-image: url('./images/a.jpg');
背景圖
background-repeat: no-repeat;
背景圖的重複方式
background-size: contain;
背景圖的覆蓋方式
background-position: 50px 50px;
關鍵字 center
座標點 1px 2px
背景圖開始鋪設的座標
backgroud:
速寫形式
css佈局 *
佈局就是爲了解決多個塊元素在一行中顯示的問題。
默認文檔流
塊元素從上往下進行排列
浮動佈局
float:left;
向左側浮動
clear:left;
當前元素左側不允許有浮動元素，換行
display:block;
將一個元素設置爲塊元素
<span style="display:block"></span>
應該加在塊元素上
1> 特點：
1. 寬高默認由內容決定（一般要給浮動元素指定寬度）
2. 脫離文檔流，在默認文檔流不會再佔據空間
3. 在同一層次中，所有的浮動元素會在一行顯示，當一行中無法容納這些浮動元素的時候，就會自動換行
4. 浮動元素會失去對父元素的支撐
2> 浮動元素的父元素沒有高度的問題
1. 所有子元素浮動，通過僞元素進行支撐
2. 保留一個子元素不浮動，用於支撐父元素，爲了讓他顯示出來，可以加margin
定位佈局
position:static; 【靜態】
position:relative
position:absolute
position:fixed
position:sticky
如果一個元素具有position規則，並且規則值爲relative,absolute,fixed,sticky之一,那麼，我就認爲這個元素是一個定位元素；只有定位元素才能使用如下規則：
left:
right:
bottom:
top:
相對定位
position:relative
特點：
1. 相對於當前元素所在位置
2. 當前元素不會脫離文檔流(即使發生了移動也不會被其他元素搶佔位置)
應用：
一般情況下相對定位要配合絕對定位來進行移動
絕對定位
position:absolute
特點：
1. 相對於距離它最近的父定位元素，如果它的父元素沒有定位元素，那就相對於瀏覽器視口
2. 脫離文檔流（不佔據默認文檔流的空間；塊元素的寬度不再爲100%）
固定定位
position:fixed
特點：
1. 相對於瀏覽器視口
2. 脫離文檔流（不佔據默認文檔流的空間；塊元素的寬度不再爲100%）
3. 不會隨着屏幕的移動而移動
粘滯定位(補充)
1. 塊元素居中
給塊元素一個寬度
margin:0 auto;
選擇器的優先級 *
Importance 特權
!important
Specificity 權重（積分機制）
1000 style屬性中
100 id選擇器
10 類選擇器，僞類過濾器，屬性過濾器
1 元素選擇器，僞元素選擇器
Source order 順序
問題反饋及解決
1. 移動端網頁的理解、PC網頁的理解
1) 兩套代碼【針對複雜的網頁】
一套用於在pc中打開（浮動，定位）【https://you.163.com/】
容器一個寬度 .wrapper 1200px
一套用於在移動端打開【https://m.you.163.com/】
2) 一套代碼【針對簡單的網頁】
跟隨者屏幕的寬度而自動改變佈局方式
2. display:
block 將一個元素設置爲塊元素
可以設置width,height
寬度默認爲100%,高度默認由內容決定
獨佔一行空間
inline 將一個元素設置爲行內元素
不可以設置width,height
與其他行內元素共享一行空間
inline-block 將一個元素設置爲行內塊元素
可以設置width,height
可以與其他行內元素共享一行空間
...
3. vertical-align【用於在一個盒子中，有多個行內元素，但是這個多個行內元素高度不一致，通過這個屬性可以調整多個元素的垂直位置，一般用於一行既有文本，也有圖片/邊框】
用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。
伸縮盒佈局
響應式佈局（bootstrap[封裝了一些佈局代碼，完成響應式佈局]，柵格系統）
<div class="row">
<div class="col-sm-2">1</div>
<div class="col-sm-2">2</div>
<div class="col-sm-2">3</div>
<div class="col-sm-2">4</div>
<div class="col-sm-2">5</div>
<div class="col-sm-2">6</div>
</div>
佈局代碼：浮動，定位，伸縮盒
bs3 float 穩定（絕大多數瀏覽器都兼容）
bs4 flex 兼容（今年來，絕大多數瀏覽器都兼容）
spring security jdk8 拉姆達 jdk1.6(銀行)
1. 語法
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
【聲明在父元素上的規則】
display:flex;
這個規則應用到父元素上，表示當前元素爲伸縮盒。默認情況下，主軸在x軸上，交叉軸在y軸上
flex-direction: row/column
默認情況下，爲row (主軸在x軸上)
flex-wrap:no-wrap/wrap
默認情況下，爲no-wrap，表示當容器中的子元素寬度和超過了容器寬，不換行
justify-content 對主軸上剩餘空間的排列設置（不要使用flex-grow對剩餘空間進行分配了！）
flex-start
flex-end
center
space-around
space-between
align-items 交叉軸上的顯示
flex-start 交叉軸的開始排列
flex-end 交叉軸結束排列
center 交叉軸的中間排列
【聲明在子元素上的規則】
flex-basis: 指定子元素的寬度基準【固定，相對】,width
flex-grow: 1; 對容器剩餘空間的分配，1表示當前元素佔據剩餘空間的一份
flex-shrink:1;對於虧損空間的墊付，1表示棧虧損空間的一份
flex: flex-grow flex-shrink flex-basis;
2. 封裝
數據問題？模擬數據【電商】
商品管理
一條條錄入
python 爬蟲 jd
1) 華爲p40 5999 介紹 主圖 ... (300條)
前端 -> Java -Jpython->python
表格與表單（html）
【一般應用在後臺管理系統中】
html標籤（塊、行內、功能【table、iframe、form】）
css3
選擇器（基本，層次，屬性過濾器，僞元素過濾器，僞類過濾器）
規則（文本，字體，背景，列表，盒子）
盒子模型
佈局（浮動，定位佈局，伸縮盒佈局）
-- bootstrap()
1) 表格
與列表類似，用於展現一些數據，一般不用於佈局，因爲他的默認樣式太複雜
你是不是做技術？？？ 你是不是IT（猥瑣，邋遢，有錢）【外界】 表格
格局？ div 架構
table 表格容器
caption 表格標題
thead 表格的表頭
tr > th > *
tbody 表格的主體
tr > td > *
tfoot 表格底部
tr > td > *
表格美化
1. 屬性
align:center
colspan 跨列 【通過excel來操作模擬】
rowspan 跨行
2. css 首選方案！！
table {
border-collapse:collapse
width:90%;
margin:0 auto;
}
table td,
table th {
border:1px solid #ccc;
text-align:center;
}
2) iframe
div.container
div.header
div.content
div.left
div.right
iframe
將外部的一個網頁鏈接進來你當前的網頁中
3) 表單
注意：
1. 在企業級開發的時候，一般不直接使用這些表單，因爲表單元素在不同的瀏覽器中顯示的樣子是不同的。一般使用組件（bootstrap/element-ui...）
2. 看點資訊精選
發佈文章功能：
標題 input type="text"
文章所屬分類 select 如果是二級分類，需要插件，樹形下拉菜單
正文 富文本編輯器（需要插件）
3. 在表單學習的時候
掌握表單和表單元素的屬性及特性
掌握交互原理
獲取用戶輸入的數據，是用戶與我們程序之間一個數據橋樑
同步
form表單的直接提交就是同步操作
異步
form表單通過ajax提交
form
action url(相對路徑、絕對路徑)
method get/post
enctype 【只有在method=post考慮，如果是get方式，參數將會被直接編碼爲查詢字符串，無法更改】
application/x-www-form-urlencoded
默認值 保存或更新品牌數據【字符，photo,name,introduce】
查詢字符串
username=terry&password=123321&department=1
規則：
屬性名與屬性值之間通過=分割
鍵值對之間通過&分割
屬性值中如果有特殊字符，會將這個特殊字符轉換爲百分比格式【這也是爲什麼二進制不能使用這種編碼】
/ => %2F
multipart/form-data 附件上傳【二進制圖片】
如果表單中出現了二進制文件，<input type="file" name="file"/>,就無法使用查詢字符串，只能用這種協議
text/plain
application/json【目前在同步請求中不支持，但是在ajax中是支持的】
表單及元素
<form>
<input type="text"/> 單行文本框
<input type="password"/> 單行密碼框
<input type="file"/> 文件選擇按鈕，encotype必須爲multipart/form-data
<input type="radio"/> 單選按鈕
單選按鈕一般會同時出現多個，着多個按鈕的name值必須相等才能達到互斥的要求
value必須通過，這樣當勾選某個單選按鈕的時候會提交該按鈕上的value值
<input type="checkbox"/> 複選按鈕
<input type="reset"/> 將表單內容恢復默認
<input type="submit"/> 提交表單
<input type="button/> 普通按鈕
...【h5新增】
<input type="search" placeholde="請輸入關鍵字"/> 搜索框
<input type="date" /> 日期框
<select name="department">
<option value="1">JavaEE</option>
<option value="2">WebUI</option> 當用戶選擇WebUI的時候，department的值爲2
<option value="3">BigData</option>
</select>
<textarea name="introduce rows="" cols="">提示...</textarea>
</form>
鄙視鏈
iphone產品工程師 -> 富士康 -> 大衆iphone用戶 -> 不會使用iphone
研究協議，自定義協議 -> 使用協議（http,請求頭）->前端（http 知道） -> 美工（不知道）
嵌入式 c -> java -> 前端 -> 美工
動畫（前端【移動互聯】）- 美觀誇張【扁平化】
夢幻西遊，呼吸燈...
語法
animation
1)關鍵幀定義
隨着時間移動的一些列的css規則
@keyframes name {
0% {
width:100px
}
50% {
width:300px
}
100%{
width:150px;
}
}
2)動畫定義
.move {
animation-name: move; 指定關鍵幀名稱
animation-duration: 2000ms; 設置動畫持續時間（from-to）
animation-timing-function: linear; 時間曲線
animation-fill-mode:backwards; 動畫完成後保持的規則（from/to）
animation-delay: 1000ms; 持續時間
animation-iteration-count: infinite;重複次數
animation-direction:alternate-reverse; 動畫運行的方向
animation: 以上的速寫形式
}
3) 應用
<div class="move"></div>
開源組件庫
自定義組件庫
flash (直播流-監控)
海康 flash
4) animation.css（css3 animation動畫輪子）
1. 導入animation.css
2. 調用class
框架
過渡效果
一般表示在元素狀態切換的時候的過渡效果
transition-property
規則名
規則名1,規則名2[,...]
all
指明在狀態切換的時候，哪些屬性添加過渡效果
transition-duration
持續時間 ms/s
transition-timing-function
linear
steps
transition-delay
延遲 ms/s
transition
transition-property transition-duration [transition-delay][transition-timing-function]
變形
transform
指定變形函數
1)旋轉
rotate(deg) 旋轉度數
rotateX(deg)
rotateY(deg)
rotateZ(deg)
2) 平移
translate(長度)
translateX(長度)
translateY(長度)
translateZ(長度)
3) 放大
scale()
scaleX()
scaleY()
4) 拉伸
skew(deg)
skewX(deg)
skewY(deg)
transform-origin
指定變形的原點
媒體查詢（響應式佈局）
@media(媒體查詢條件) {
選擇器 {
規則
}
}
1) 媒體查詢的應用位置
1.直接應用在規則內部
<style>
html{
font-size:20px
}
@media screen and (max-width:1500px){
}
</style>
2.應用在link標籤中
<link rel="stylesheet" href="./css/screen_small.css" media="(max-width: 1380px)">
<link rel="stylesheet" href="./css/screen_middle.css" media="(min-width: 1380px) and (max-width: 1500px)">
<link rel="stylesheet" href="./css/screen_large.css" media="(min-width: 1500px) and (max-width: 1780px)">
<link rel="stylesheet" href="./css/screen_xlarge.html" media=" (min-width: 1780px) ">
3.應用在style標籤中
<style>
</style>
<style media="screen and (max-width: 1380px)">
.wrapper {
width: 1105px;
}
html {
font-size: 20px;
}
</style>
<style media="screen and (min-width: 1380px) and (max-width: 1500px)">
.wrapper {
width: 1200px;
}
html {
font-size: 25px;
}
</style>
2)注意：
1. 如果我們編寫的網頁運行在pc中，那麼一般要給固定寬度，但是這個寬度如果隨着屏幕的寬度發生改變，我們就成爲響應式（.wrapper）
2. 如果我們編寫的網頁運行在大屏上，一般就採用滿屏鋪，不用指定wrapper
3. 如果我們編寫的網頁運行在mobile中，一般就採用滿屏鋪，不用指定wrapper,但是需要響應式佈局
如果手機寬屏（橫放）
原先一行放4列，橫放後一行放2列
手機
pad
at規則（@）
1) @font-face
2) @keyframes
3) @media
4) @import
@import url
@import url list-of-media-queries;
5) @charset
指定當前css文件的編碼格式（說明當前文件是使用xx編碼）
css腳本語言（css預處理語言）【瞭解】
sass
less
bootstrap4(思路，封裝)【瞭解】
第三方庫：iconfont/animation.css/bootstrap
bs 是css3的一個庫，也就說我們如果用了這個庫，就可以很少的去寫css代碼,因爲css中提供了大量的選擇及規則。我們只管通過類調用即可
css庫
js庫
組件庫
bootstrap-reboot.css 重置樣式，類似於我們自己寫的common.css，要比我們寫的好多了
bootstrap-grid.css 柵格佈局（封裝了flex佈局【bs4封裝float佈局】）
bootstrap.css 完整樣式（包含重置樣式，柵格佈局，按鈕，表格，下拉菜單，模態框...）
vue (組件庫-柵格系統、組件[table,form,button])