前言：本人是一個web初學者，JavaScript，html，css語法參照W3School網站進行學習，但是沒有貫穿性，對於web項目是雨裏霧裏，甚至不知道三者是如何連在一起的。唯一會的前端是react native，然而這是一個app開發工具，和web有所不同，現在就一步一步的學習web，並把所遇到的困境及心理歷程一步一步的記錄下來，會有很多白癡的情況，不喜勿噴。
本web項目依據慕課網《DOM探索之基礎詳解篇》中的滑動門特效進行擴充，基礎知識請參考自行學習。
一、初識web
在對基礎知識有所瞭解後非常想做一個web項目，苦於不止如何下手，正好在慕課網的DOM課程裏看到了一個滑動門效果，就跟着寫了下代碼，並實現了滑動門效果。這期間沒什麼問題，畢竟跟着教程來的。現在從滑動門效果實現之後開始，下圖爲實現效果（圖片從淘寶網首頁下載得到）。
遇到的思考：剛開始加載圖片時非居中對齊，沒注意到的自己對比代碼。
二、隨意擴展
首先實現一個三角形的背景框：
實現css代碼：
#triangle {
width: 0px;
height: 0px;
border-left: 500px solid yellow;
border-bottom: 100px solid white;
border-top: 100px solid black;
}三、多列實現
在一個框內實現多列並排的數據：
css代碼：
#boxContainer {
width:600px;
height:200px;
margin-left: 100px;
border:1px solid #ccc;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
overflow: scroll;
}HTML代碼div部分（包括之前的滑動門和三角形實現）：
<div id="mainContainer">
<div id="sliderDoor">
<img src="image/sliderDoors/footer1.jpg" alt="第一張圖片" title="圖一"/>
<img src="image/sliderDoors/footer2.jpg" alt="第二張圖片" title="圖二"/>
<img src="image/sliderDoors/footer3.jpg" alt="第三張圖片" title="圖三"/>
<img src="image/sliderDoors/footer4.webp" alt="第四張圖片" title="圖四"/>
<img src="image/sliderDoors/footer5.webp" alt="第五張圖片" title="圖五"/>
</div>
<div id="triangle">
</div>
<div id="boxContainer">人民網北京2月24日電 (記者
劉陽)國家發展改革委近日發出通知，決定自2月25日零時起將汽、柴油價格每噸分別提高300元和290元，折算到90號汽油和0號柴油（全國平均）每升零售價格分別提高0.22元和0.25元。
此次國內成品油價格調整幅度，是按照現行國內成品油價格形成機制，根據國際市場油價變化情況確定的。去年11月16日國內成品油價格調整以來，受市場預期歐美經濟復甦前景向好以及中東局勢持續動盪等因素影響，國際市場原油價格先抑後揚，2月上旬WTI和布倫特原油期貨價格再次回升至每桶95美元和115美元以上。雖然近兩日價格有所回落，但國內油價掛鉤的國際市場三種原油連續22個工作日移動平均價格上漲幅度已超過4%，達到國內成品油價格調整的邊界條件。
通知指出，這次成品油調價後，國家將按照已建立的補貼機制，繼續對種糧農民、漁業（含遠洋漁業）、林業、城市公交、農村道路客運（含島際和農村水路客運）等給予補貼。同時，爲保證市場物價基本穩定，防止連鎖漲價，對與居民生活密切相關的鐵路客運、城市公交、農村道路客運（含島際和農村水路客運）價格不作調整。
通知要求，中石油、中石化、中海油三大公司要組織好成品油生產和調運，保持合理庫存，加強綜合協調和應急調度，保障成品油供應。各級價格主管部門要加大市場監督檢查力度，依法查處不執行國家價格政策，以及囤積居奇、造謠惑衆、合謀漲價、搭車漲價等違法行爲，維護正常市場秩序。
</div>
</div>此效果暫時未實現，添加背景後並未按預想的展現，明日繼續奮戰！
代碼詳情在github上更新：https://github.com/dwenb/webLearning。