零基礎學什么都會吃力啊!!!
但是編程來說,像大數據、Java、前端等等,相對而言,還是前端入門簡單,學習的困難程度是由易到難,讓你有個過度階段,
第一階段HTML+CSS核心基礎 HTML,CSS核心基礎CSS過渡HTML5語義化標簽線性漸變,徑向漸變HTML新增標簽屬性CSS動畫Animation表單項新增屬性彈性盒模型CSS選擇器經典布局練習(雙飛翼,CSS3偽類 品字布局) + 案例CSS偽元素響應式布局第二階段JavaScriptJavaScript基礎JavaScript操作DOMJavaScript面向對象(js高級)第三階段PC端整棧開發PC項目jQueryjQuery項目lessbootStrap第四階段ES6+Node+工程化ES6/7/8promisenpm常用命令git基礎(常用操作)git高級Node.js基礎git基礎(常用操作)http協議 & cookie & sessionMongoDBExpress框架ajax(原生,jQuery,axios,fetch)ajax庫基本封裝使用 promise封裝模塊化構建工具gulp,webpack4.0基礎第五階段React技術棧React基礎語法react-routerReact Antd使用ReduxReact移動端項目第六階段Vue技術棧Vue基礎VueRouterVuexVue源碼(v-model, 雙向數據綁定)VuePC項目-電商Vue后臺管理第七階段小程序小程序UniAppTypeScript第八階段就業指導+面試精講vue實戰(移動端)小程序實戰 面試精講就業指導使用樣式表有以下優點:
1.內容與表現分離寫一個網頁就好比建房子,房子的結構通過磚塊、鋼筋、水泥搭建,后期通過瓷磚、地板等的裝飾,才能讓房子更加漂亮。
網頁通過HTML搭建整體結構,通過CSS修飾美化網頁。為了使得在搭建的過程中不受到美化網頁的影響,而是專注在結構上。并且在后期的維護上也更加方便。
2.網頁的表現統一,容易修改分開之后,結構和樣式在不同的文件,互不影響,結構清晰,可讀性強,后期如果修改維護便于定位查找。
3.豐富的樣式,使得頁面布局更加靈活首先樣式表中提供了強大的而且非常全面靈活的選擇器,可以供我們選取到網頁中的任何一個元素
從大的方面選擇器可以分為四大類:
1.基本選擇器
2.層次選擇器
3.結構偽類選擇器
4.屬性選擇器
如下圖我只是截取了屬性選擇器中幾種:
其次樣式表不僅提供了文本效果、背景和邊框還有2D/3D 轉換、動畫、多列布局、用戶界面等。
4.減少網頁的代碼量,增加網頁的瀏覽速度,節省網絡帶寬很多CSS3技術通過提供相同的視覺效果而成為圖片的“替代品”
換句話說,在進行Web開發時,減少多余的標簽嵌套以及圖片的使用數量,意味著用戶要下載的內容將會更少,頁面加載也會更快。
另外,更少的圖片、腳本和Flash文件能夠減少用戶訪問Web站點時的HTTP請求數,這是提升頁面加載速度的最佳方法之一。
而使用CSS3制作圖形化網站無需任何圖片,極大地減少了HTTP的請求數量,并且提升了頁面的加載速度
基于以上幾點,使用樣式表是必須的!!
基本選擇器
1.標簽選擇器:直接用元素的標簽來進行選擇
span { // 直接選擇span標簽
size:16px;
}
1
2
3
1
2
3
2.ID選擇器:通過設置id名字,進行精確的選擇,用#來定義
# div1 { //通過id名字來進行選擇
color:red;
}
<div id="div1">1</div>
1
2
3
4
1
2
3
4
3.類選擇器:通過類名來進行選擇,選擇范圍比id選擇器大,用’.'來定義
.div1 { //所有類名為div1的都被選擇了
color:red;
}
<div id="div1">1</div>
<div id="div1">1</div>
<div id="div1">1</div>
1
2
3
4
5
6
1
2
3
4
5
6
4.通配符選擇器:范圍更大,作用于所有標簽,用*來定義
不建議使用,對頁面加載負擔大
高級選擇器
1.后代選擇器:定義用空格隔開
div span { //選擇的是div標簽下的span標簽,當然后代顧名思義可以不止隔一代,可以隔多代進行選擇
color:red;
}
<div><span>1</span></div>
1
2
3
4
1
2
3
4
2.交集選擇器:與后代選擇器定義的不同是,沒有空格隔開,兩個元素緊挨著
span#a1 { //選擇的是兩個條件1.既是span標簽的 2.id名是a1的元素,兩個條件缺一不可
color:red;
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
3.并集選擇器:定義用逗號隔開
span,#a1 { //選擇的是1.是span標簽的 2.id名是a1的元素,兩個條件滿足一個即可
color:red;
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
4.偽類選擇器:
1.靜態偽類:點擊連接之前(link),點擊連接之后(visited)這樣的
2.動態偽類:鼠標移入(hover),點擊之后(focus)
要使用css對HTML頁面中的元素實現一對一,一對多或者多對一的控制,這就需要用到CSS選擇器。HTML頁面中的元素就是通過CSS選擇器進行控制的。
每一條css樣式定義由兩部分組成,形式如下:[code] 選擇器{樣式} [/code] 在{}之前的部分就是“選擇器”。“選擇器”指明了{}中的“樣式”的作用對象,也就是“樣式”作用于網頁中的哪些元素。