生活随笔
收集整理的這篇文章主要介紹了
前端自学日记-day5
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前端自學日記
day5
內容總結：學習了代碼快速編寫方法和一些小工具，CSS復合選擇器，CSS元素顯示模式，CSS背景。
1.學習進度更新
2.具體內容
2.1 Emmet簡介
作用：使用縮寫tab輸入代碼，快速高效的編寫html/css代碼。
2.1.1快速生成html結構語法
生成標簽，標簽名+tab 生成n個相同標簽，標簽名*n+tab 生成父子級關系標簽，父級>子集 +tab 生成兄弟關系標簽， 兄弟1+兄弟2+tab 生成帶有類名或id名，.class/#id +tab默認生成 < d i v c l a s s = " c l a s s " > < / d i v > <div class="class"></div> < d i v c l a ss = " c l a ss " >< / d i v > 生成有順序的class .class$*n $是自增符號
2.1.2快速生成css結構語法
簡寫屬性首字母+tab 快速格式化代碼 shift+alt+f；或者直接設置成保存頁面自動格式化。
2.2 CSS的復合選擇器
??是對基礎選擇器的組合，對標簽選擇更便捷，樣式改變更多元化。下面所說的元素可以是任意基礎選擇器！！！！！！！！
2.2.1 后代選擇器
作用：又叫包含選擇器，可以選擇父元素里的子元素
2.2.2 子選擇器
作用：只能選擇某元素里的最近一級子元素
2.2.3 并集選擇器
作用：可以選擇多組標簽，同時為他們定義相同的樣式，通常用于集體聲明
2.2.4 偽類選擇器
作用：用于向某些選擇器添加特殊效果 ，比如用于鏈接等，這里介紹偽類鏈接選擇器和:focus選擇器。
偽類鏈接選擇器的樣式聲明順序必須為LVHA（love heat/LV hao） a在不同瀏覽器中具有不同的默認樣式，所以開發工作中都需單獨指定樣式。 開發中常用link和hover搭配 2.3 CSS的元素顯示模式
??對標簽分類，了解不同元素的性質，可以更好的布局頁面。
2.3.1 塊級元素
<h1>~<h6>,<p>,<div>,<ul>,<li>,<ol>,等
很霸道，自己獨占一行 文字類元素內不能放塊元素 作為一個容器里面可以放行內元素和塊元素 2.3.2 行內元素
<span>,<a>,<strong>,<em>等
相鄰元素在一行上，一行可以顯示多個 行內元素只能容納文本或其他行內元素 行內元素可以通過元素顯示模式轉換后，放入塊級元素。 2.3.3 行內塊元素
<img /><input /><td>等
同時具有行內元素和塊元素特點 一行可以顯示多個 默認寬度為本身寬度 可以設置h，w，外邊距和內邊距 2.3.4 元素模式轉換
行內–>塊級 display：block;
**注：**如何讓單行文字在塊元素中垂直居中，文字行高line-heigh=weight盒子高度
2.4 CSS的背景
??設置頁面大背景更好看，小標識用背景設置更容易控制位置。
3.作業
3.1 綜合案例1
使用外部樣式表引入CSS樣式，聯系CSS字體，文本屬性，和使用基礎選擇器設置文本。
< head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> 綜合案例
</ title> < linkrel = " stylesheet" href = " 05.案例CSS.css" > </ head> < body> < h1class = " Big—title" > 北方高溫明日達鼎盛 京津冀多地地表溫度將超60℃
</ h1> < divclass = " sub-title" > 2019-07-03 16:31:47 來源：
< ahref = " #" > 中國天氣網
</ a> < inputtype = " text" value = " 請輸入查詢條件" /> < inputtype = " submit" value = " 提交" /> </ div> < hr> < p> 中國天氣網 今天（3日），華北，黃淮多地出現高溫天氣，截止下午2點，北京、天津、鄭州等地氣溫突破35℃，預報顯示，今后三天（3-5日），這一帶的禱文天氣將繼續發酵，啊公文范圍以及強度將在4日達到鼎盛，預計北京、天津、石家莊、濟南等地明天的醉倒氣溫有望突破38℃，其中北京和石家莊的最高氣溫還有望創今年以來的新高。
</ p> < h3> 氣溫41.4℃！地溫66.5℃！北京強勢迎七月首個高溫日
</ h3> < p> 今天，華北、黃淮一帶的高溫持續發酵，截至今天下午2點，陜西北部、山西南部、河北北部、北京、天津、山東西部、河南北部最高氣溫已普遍超過35℃，大城市中，北京、天津、鄭州均迎來高溫日。
</ p> < br> < divalign = " center" > < imgsrc = " 氣溫圖.png" width = " 500" /> </ div> < p> 在陽光暴曬下，地表溫度逐漸走高。今天下午2點，華北、黃淮大部分地區地表溫度都在50℃以上，部分地區地表溫度甚至超過60℃。其中，河北衡水地表溫度高達68.3℃，天津站和北京站附近的地表溫度分別高達66.6℃和66.5℃。
</ p> < h3> 明日熱度再升級！京津冀攜手沖擊38℃+
</ h3> < p> 中國天氣網氣象分析師王煒越介紹，明天（4日），華北、黃淮地區35℃以上的高溫天氣還將繼續升級，并進入鼎盛階段，高溫強度和范圍都將發展到最強。明天，北京南部、天津大部，河北中部和南部、山東中部和西部、山西南部局地、河南北部、東北氣溫將達到35℃
</ p> < p> 不過，打到這里，逐漸暴躁，不想寫了，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊（文/張慧 數據支持/王煒越 虎嘯 審核/劉文靜 帳房利）
</ p> < divclass = " till" > 文本來源：中國天氣網 責任編輯：劉晶_NO5631
</ div> </ body> .Big—title { text-align : center
; font-weight : normal
; }
.sub-title { font-size : 10px
; color : darkgrey
; text-align : center
;
}
p { text-indent : 2em
; font-size : 16px
; font-family : 'Microsoft YaHei' ; line-height : 24px
;
}
.till { text-align : left
; color : darkgrey
; font-size : 10px
;
}
3.2 綜合案例2
設置鼠標經過可變鏈接
< head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> 背景案例-成長守護平臺
</ title> < style> h3 { width : 118px; height : 40px; font-weight : 400; font-size : 14px; line-height : 40px; text-indent : 1.5em; background-image : url ( https://game.gtimg.cn/images/js/title/title_sprite.png) ; background-position : left center; } h3 a:link { color : black; text-decoration : none; } h3 a:hover { color : #FF5A11; } </ style> </ head> < body> < h3> < ahref = " #" > 成長守護平臺
</ a> </ h3> </ body> 超大背景居中顯示
< head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> 背景案例2-超大背景
</ title> < style> body { background-image : url ( 王者榮耀背景.jpg) ; background-position : center top; background-repeat : no-repeat; } </ style> </ head> < body> </ body> ——landing
總結
以上是生活随笔 為你收集整理的前端自学日记-day5 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
