柚子快報邀請碼778899分享：HTML5 + CSS3
HTML 基礎
準備開發(fā)環(huán)境
1.vscode 使用
新建文件夾 --->? 左鍵拖入 vscode 中
2.安裝插件
擴展 → 搜索插件 → 安裝打開網(wǎng)頁插件：open in browser漢化菜單插件：Chinese
3.縮放代碼字號
放大,縮?。篊trl + 加號，減號
4.設置默認瀏覽器
標簽基本語法
5.HTML定義
6. vscode 折疊側邊欄 ctrl + b
7. HTML 基本骨架
8.標簽的關系
向前向后縮進 Tab / Shift + Tab
9.注釋
10.標題標簽
11.段落標簽
12.換行與水平線標簽
13.文本格式化標簽（加粗）
14.圖像標簽-基本使用
15.路徑--相對路徑和絕對路徑
16.超鏈接
16.音頻標簽
17.視頻標簽
18.綜合案例一
尤雨溪
尤雨溪，前端框架Vue.js的作者，HTML5版Clear的打造人，獨立開原開發(fā)者。曾就職于Google Creative Labs 和 Meteor Development Group。由于工作中大量接觸開源的項目JavaScript，最后自己也走上了開源之路，現(xiàn)全職開發(fā)和維護Vue.js。
學習經(jīng)歷
尤雨溪畢業(yè)于上海復旦附中，在美國完成大學專業(yè)，本科畢業(yè)于Colgate University，后在Parsons設計學院獲得Design & Technology藝術碩士學位，任職于紐約Google Creative Lab。
主要成就
尤雨溪大學專業(yè)并非是計算機專業(yè)，在大學期間他學習專業(yè)是室內藝術和藝術史，后來讀了美術設計和技術的碩士，正是在讀碩士期間，他偶然接觸到了JavaScript，從此北這門編程語言深深吸引，開啟了自己的前端生涯。
社會任職
2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex團隊，尤雨溪稱他將以技術顧問的身份加入Weex團隊來做Vue和Weex的JavaScript runtime 整合，目標是讓大家能用Vue的語法跨三端。
19.綜合案例二
Vue.js
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式JavaScript框架。 [5] 與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用（SPA）提供驅動。
其作者為尤雨溪
主要功能
Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue采用自底向上增量開發(fā)的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復雜單頁應用。
Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。
Vue.js 自身不是一個全能框架——它只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時 [2] ，Vue.js 也能驅動復雜的單頁應用。
列表、表格、表單
20.列表
21.無序列表
- 列表條目
- 列表條目
- 列表條目
22.有序列表
- 列表條目
- 列表條目
- 列表條目
23.定義列表
- 服務中心
- 申請售后
- 售后政策
- 線下門店
- 小米之家
- 服務網(wǎng)點
24.表格
| 姓名 | 語文 | 數(shù)學 | 總分 |
|---|---|---|---|
| 張三 | 99 | 100 | 199 |
| 李四 | 98 | 100 | 198 |
| 總結 | 全市第一 | 全市第一 | 全市第一 |
25.表格結構標簽
| 姓名 | 語文 | 數(shù)學 | 總分 |
|---|---|---|---|
| 張三 | 99 | 100 | 199 |
| 李四 | 98 | 100 | 198 |
| 總結 | 全市第一 | 全市第一 | 全市第一 |
26.合并單元格
行合并
列合并
27.表單
28.input標簽基本使用
文本框：單行文本
文本框：
密碼框：
密碼框：
單選框：
多選框：
上傳文件：
29.input標簽占位文本
文本框：
密碼框：
29.單選框radio
單選框： 男
女
30. 上傳文件
上傳文件：
31.多選框：默認選中 Checked
興趣愛好：
敲代碼
敲前端代碼
敲前端 HTML代碼
32.下拉菜單
城市：
33.文本域
34.label標簽
性別：
35.按鈕button
需要用 form 標簽 包裹
36.div 和 span 無語義的布局標簽
這是 span 標簽
這是 span 標簽
37.字符實體
乾坤未定，你我皆是黑 馬。
<p>
38.綜合案例一
主帥安東尼奧回西班牙休假
梅州主帥：申花有強有力的教練組
馬德興：00后球員將首登亞洲舞臺
39.綜合案例二
注冊信息
CSS基礎
1.css初體驗
體驗 css
2.css引入樣式
rel：關系? stylesheet：樣式表
html文件中：
這是 p 標簽
my.css中
/* 此處放css代碼 */
/* 選擇器 {css屬性} */
p {
color: red;
}
3.選擇器
4.標簽選擇器
這是 p 標簽
111
222
5.類選擇器
111
222
5.id選擇器
6.通配符選擇器
p 標簽
h1 標簽
- li
- li
7.畫盒子
8.文字控制屬性
9.字體大?。篺ont-size
測試字體大小
10.字體粗細:font-weight
h3 標題
11.字體樣式（是否傾斜）font-style
em 標簽
12.行高：line-height
數(shù)字 2 代表 2 * font-size 即 2 * 16 px = 32px
今年受成本驅動、需求拉動以及全球糧價上漲等各種因素疊加影響，我國糧食價格整體上揚，小麥、玉米、大豆價格高位波動，水稻價格運行平穩(wěn)，優(yōu)質優(yōu)價特征明顯，農(nóng)民擇機擇時售糧，實現(xiàn)種糧收益最大化。但種糧成本持續(xù)攀升成為影響農(nóng)民增收的“攔路虎”。這是因為，在去年高糧價的刺激下，今年土地租金以及化肥、農(nóng)藥、柴油等農(nóng)資價格大幅上漲，種糧成本隨之增加。加之今年糧食生產(chǎn)遭遇去年北方罕見秋雨秋汛、今年“南旱北澇”等極端天氣，雖然沒有帶來災害性后果，但一些農(nóng)戶為抗災付出更多生產(chǎn)成本，種糧農(nóng)戶收益空間進一步收窄。
13.行高-垂直居中
14.字體族 font-family
15.font 復合屬性
一般在開發(fā)初期使用，直接從京東淘寶復制
字號和字體值必須書寫，否則 font 屬性不生效
font:30px 楷體;
16.文本縮進 text-indet 2em
今年受成本驅動、需求拉動以及全球糧價上漲等各種因素疊加影響，我國糧食價格整體上揚，小麥、玉米、大豆價格高位波動，水稻價格運行平穩(wěn)，優(yōu)質優(yōu)價特征明顯，農(nóng)民擇機擇時售糧，實現(xiàn)種糧收益最大化。但種糧成本持續(xù)攀升成為影響農(nóng)民增收的“攔路虎”。這是因為，在去年高糧價的刺激下，今年土地租金以及化肥、農(nóng)藥、柴油等農(nóng)資價格大幅上漲，種糧成本隨之增加。加之今年糧食生產(chǎn)遭遇去年北方罕見秋雨秋汛、今年“南旱北澇”等極端天氣，雖然沒有帶來災害性后果，但一些農(nóng)戶為抗災付出更多生產(chǎn)成本，種糧農(nóng)戶收益空間進一步收窄。
17.文本對齊方式 text-align
標題文字
18.水平對齊方式-圖片
Xiaomi Buds 4 Pro
48dB智能動態(tài)降噪 | 骨聲紋通話降噪...
999元 1099元
19.文本修飾線 text-decoration
p 標簽，添加刪除線
span 標簽，添加頂劃線
20.color 文字顏色
rgba中a越小越透明，a越大越清晰。a=0.3? 和? ?a=0.7
??
h1 標簽
21.調試工具-谷歌瀏覽器
22.綜合案例一 - 新聞詳情
在希望的田野上 | 湖北秋收開鐮 各地多舉措保增產(chǎn)增收
來源：央視網(wǎng) | 2222年12月12日 12:12:12
央視網(wǎng)消息：眼下，湖北省秋收開鐮已有一周多的時間。水稻收割已經(jīng)超過四成，玉米收割七成。湖北省通過大力推廣新品種水稻，建設高標準農(nóng)田等一系列措施，為秋糧穩(wěn)產(chǎn)提供有力支撐。
中稻占據(jù)了湖北全年糧食產(chǎn)量的一半以上。在湖北的主產(chǎn)區(qū)荊門市，370萬畝中稻已經(jīng)收割四成以上。
王化林說的新品種，是湖北省研發(fā)的雜交水稻“華夏香絲”，不僅產(chǎn)量高，還具有抗病、抗倒、抗高溫的特性。在荊門漳河鎮(zhèn)的一工程示范田內，像“華夏香絲”這樣抗旱節(jié)水的品種還有20多個，這些水稻新品將在荊門全面推廣，確保來年增產(chǎn)增收。
此外，湖北還大力推進高標準農(nóng)田建設。截至今年6月，已建成3980萬畝高標準農(nóng)田。目前，湖北全省仍有1800多萬畝中稻正在有序收割中，預計10月中旬收割完畢。
23.綜合案例二 - CSS簡介
CSS（層疊樣式表）
層疊樣式表 (Cascading Style Sheets，縮寫為 CSS），是一種 樣式表 語言，用來描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之類的 XML 分支語言）文檔的呈現(xiàn)。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。
CSS 是開放網(wǎng)絡的核心語言之一，由 W3C 規(guī)范 實現(xiàn)跨瀏覽器的標準化。CSS 節(jié)省了大量的工作。 樣式可以通過定義保存在外部.css 文件中，同時控制多個網(wǎng)頁的布局，這意味著開發(fā)者不必經(jīng)歷在所有網(wǎng)頁上編輯布局的麻煩。CSS 被分為不同等級：CSS1 現(xiàn)已廢棄， CSS2.1 是推薦標準， CSS3 分成多個小模塊且正在標準化中。
- CSS 介紹 如果你是 Web 開發(fā)的新手，請務必閱讀我們的 CSS 基礎 文章以學習 CSS 的含義和用法。
- CSS 教程 我們的 CSS 學習區(qū) 包含了豐富的教程，它們覆蓋了全部基礎知識，能使你在 CSS 之路上從初出茅廬到游刃有余。
- CSS 參考 針對資深 Web 開發(fā)者的 詳細參考手冊 ，描述了 CSS 的各個屬性與概念。
24.復合選擇器
25.后代選擇器?div span{}
span 標簽
這是div 的兒子 span
孫子 span
26.子代選擇器?div>span{}
兒子 span
孫子 span
27.并集選擇器 div,p,span{}
p 標簽
span 標簽
28.交集選擇器-了解 p.box{}
p 標簽，使用了類選擇器
p 標簽
29.偽類選擇器 a:hover{}
30.偽類-超鏈接（拓展）
31.CSS特性
32.繼承性
將文字屬性寫給父標簽 body 子標簽繼承文字屬性
p 標簽
span 標簽
如果標簽自己有樣式，則生效自己的樣式，不繼承
a標簽有自己的顏色，h1標簽有自己的字號
p 標簽
span 標簽
h1 標簽
33.層疊性
34.優(yōu)先級
35.優(yōu)先級-疊加計算規(guī)則
這行文本是什么顏色的？
這行文本是什么顏色的？
35.Emmet寫法
36.背景屬性
37.背景圖 background-image(bgi)
38.背景圖平鋪方式 background-repeat（bgr）
no-repeat 、repeat(默認）、repeat-x、repeat-y
? ? ? ? ?
38.背景圖位置 background-position（bgp）
? ??
??
bgp(0,0) 、bgp(50px,0)、bgp(-50px,0)、bgp(center,center)
39.背景圖縮放 background-size(bgz)
contains、cover
39.背景圖固定 background-attachment（bga）
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
測試文字，撐開body，讓瀏覽器有滾動條
40.背景復合屬性
41.顯示模式 display
span11111
span2
42.轉換顯示模式
span11111
span2
div {
width: 100px;
height: 100px;
display: inline-block;
}
div {
width: 100px;
height: 100px;
display: inline;
}
span11111
span2
span {
width: 200px;
height: 200px;
display: block;
}
span {
width: 200px;
height: 200px;
display: inline-block;
}
43.綜合案例一-熱詞
44.綜合案例二-banner效果
45.結構偽類選擇器 a:first-child、last-child、nth-child(3)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
46. :nth-child(公式）
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
47.偽元素選擇器
48.PxCook
49.盒子模型 padding margin border(bd)
w200+h200 -> padding 20px -> bd (border) -> margin 50px
50.盒子模型-邊框線 border（bd）
51.盒子模型 - 內邊距 padding
52.盒子模型 - 尺寸計算 box-sizing:border-box
53.盒子模型 - 外邊距 margin
54.版心居中?margin: 0 auto;
55.清除默認樣式 去除列表符號li{list-style:none}
默認格式 橘色 外邊距 綠色 內邊距
?h1 有上下外邊距
p標簽有默認上下外邊距
li有上下外邊距和左內邊距
標題
ppp
- li
??
56.盒子模型-元素溢出 overflow：hidden
57.外邊距問題 - 合并現(xiàn)象
58.外邊距問題 - 塌陷問題 取消子級margin設置父級padding
59.行內元素 - 內外邊距問題 增加 line-height屬性
60.盒子模型 - 圓角border-radius
border-radius: 50%? ?25%;
61.盒子模型 - 陰影（拓展）box-shadow
62.綜合案例一 - 產(chǎn)品卡片
抖音直播SDK
包含抖音直播看播功能
63.綜合案例二 - 新聞列表
64.標準流
65.浮動
??
66.浮動 - 產(chǎn)品區(qū)域布局
67.清除浮動
68.浮動-總結
69.Flex 布局
?
70.Flex-組成
71.Flex 布局
72.主軸對齊方式 justify-content
73. 側軸對齊方式 align-items align-self
74.修改主軸方向flex-direction
媒體
75.彈性伸縮比 flex
.box {
display: flex;
height: 300px;
border: 1px solid #000;
}
盒子2,3按照1:2。
.box div:nth-child(2){
flex: 1;
}
.box div:nth-child(3){
flex: 2;
}
主軸水平，控制盒子的寬。
主軸垂直，控制盒子的高。
79.彈性盒子換行 flex-wrap
flex-wrap 默認 nowrap 不換行
?
添加 justify-content: space-between
80.行對齊方式 align-content
??
null?align-content: flex-start?flex-end?center
space-between?space-around?space-evenly
81.綜合案例 - 抖音解決方案
一鍵發(fā)布多端
發(fā)布視頻到抖音短視頻、西瓜視頻及今日頭條
一鍵發(fā)布多端
發(fā)布視頻到抖音短視頻、西瓜視頻及今日頭條
一鍵發(fā)布多端
發(fā)布視頻到抖音短視頻、西瓜視頻及今日頭條
一鍵發(fā)布多端
發(fā)布視頻到抖音短視頻、西瓜視頻及今日頭條
學成在線
1.準備工作
index.html
base.css
/* 基礎公共樣式：清除默認樣式 + 設置通用樣式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
body {
font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
a {
color: #333;
text-decoration: none;
}
2.版心效果
index.html
/* 首頁樣式 */
/* 版心 */
.wrapper {
margin: 0 auto;
width: 1200px;
}
3.網(wǎng)頁制作思路
4.header 區(qū)域-布局
index.html
index.css
/* 首頁樣式 */
/* 版心 */
.wrapper {
margin: 0 auto;
width: 1200px;
}
body {
background-color: #f3f5f7;
}
/* 頭部區(qū)域 */
.header {
height: 100px;
background-color: #fff;
}
.header .wrapper {
padding-top: 29px;
display: flex;
align-items: center;
}
5.logo 制作技巧
index.html
/* logo */
.logo a {
/* a 為 inline 故寬高不生效 */
display: block;
width: 195px;
height: 41px;
background-image: url(../images/logo.png);
/* 隱藏文字 */
font-size: 0;
}
6.導航制作技巧(nav）
/* 導航 */
.header .nav {
margin-left: 102px;
}
.header .nav ul {
display: flex;
}
.header .nav ul li {
margin-right: 24px;
}
.header .nav ul li a {
display: block;
padding: 6px 8px;
line-height: 27px;
font-size: 19px;
}
/* active 類選擇器，表示默認選中的a */
.header .nav li .active,
.header .nav li a:hover {
border-bottom: 2px solid #00a4ff;
}
7.搜索區(qū)域(search)
/* 搜索 */
.search {
display: flex;
margin-left: 64px;
padding-left: 19px;
padding-right: 12px;
width: 412px;
height: 40px;
background-color: #f3f5f7;
border-radius: 20px;
}
.search input {
flex: 1;
border: 0;
background-color: transparent;
/* 去除焦點框 */
outline: none;
}
.search input::placeholder {
font-size: 14px;
color: #999;
}
/* 父級是 flex 布局，子級變彈性盒子：加寬高生效 */
.search a {
display: block;
width: 16px;
height: 16px;
background-image: url(../images/search.png);
align-self: center;
}
8.用戶區(qū)域(user)
/* 用戶 */
.user {
margin-left: 32px;
margin-top: 4px;
}
.user img {
margin-right: 7px;
/* vertical-align 行內快和行內垂直方向對齊方式 */
vertical-align: middle;
}
.user span {
font-size: 16px;
color: #666;
}
9.banner區(qū)域
/* banner 區(qū)域 */
.banner {
height: 420px;
background-color: #0092cb;
}
.banner .wrapper {
display: flex;
justify-content: space-between;
height: 420px;
background-image: url(../uploads/banner.png);
}
10.banner左側導航欄(left)
/* 側導航 */
.banner .left {
padding: 3px 20px;
width: 191px;
height: 420px;
background-color: rgba(0, 0, 0, 0.42);
}
.banner .left a {
display: block;
height: 46px;
background-image: url(../images/right.png);
background-repeat: no-repeat;
background-position: right;
line-height: 46px;
font-size: 16px;
color: #fff;
}
.banner .left a:hover {
background-image: url(../images/right-hover.png);
background-repeat: no-repeat;
background-position: right;
color: #00a4ff;
}
11.右側課程表(right)
/* 課程表 */
.banner .right {
margin-top: 60px;
width: 218px;
height: 308px;
background-color: #209dd5;
border-radius: 10px;
}
.banner .right h3 {
margin-left: 14px;
height: 48px;
line-height: 48px;
font-size: 15px;
color: #fff;
font-weight: 400;
}
.banner .right .content {
padding: 14px;
height: 257px;
background-color: #fff;
border-radius: 10px;
}
/* 課程表 */
.banner .right {
margin-top: 60px;
width: 218px;
height: 308px;
background-color: #209dd5;
border-radius: 10px;
}
.banner .right h3 {
margin-left: 14px;
height: 48px;
line-height: 48px;
font-size: 15px;
color: #fff;
font-weight: 400;
}
.banner .right .content {
padding: 14px;
height: 257px;
background-color: #fff;
border-radius: 10px;
}
.banner .right .content dl {
margin-bottom: 12px;
border-bottom: 1px solid #e0e0e0;
}
.banner .right .content dt {
margin-bottom: 8px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
}
.banner .right .content dd {
margin-bottom: 8px;
font-size: 12px;
line-height: 16px;
}
.banner .right .content dd span {
color:#00a4ff
}
.banner .right .content dd strong {
color:#7d7d7d;
font-weight: 400;
}
82.定位
83.相對定位
div {
position:relative;
top: 100px
}
實現(xiàn)圖片壓在文字上面，原來位置下移100px，不脫標，占位。
div {
position:relative;
top:100px;
left:200px;
}
標簽顯示模式特點 不變
柚子快報邀請碼778899分享：HTML5 + CSS3
文章鏈接
本文內容根據(jù)網(wǎng)絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明，如有侵權，聯(lián)系刪除。
Darty電器跨境
