基礎回顧（七）| 流式佈局_京東專案

阿新 • • 發佈：2021-01-04

報名拉勾教育“大前端就業集訓營”課程已經1月之久了，就想來談談我的看法，關於自學，報班學習~
在之前我一直覺得我不會報班的，一方面是因為費用比較高，另一方面我覺得通過我自己的學習可以讓我掌握學習內容。我自己的情況是有自學前端課程快一年，在這個自學過程中，先是問同學、看各種前端學習路線來指定自己的學習計劃，然後在嗶哩嗶哩上看課程，大概學到vue框架了，但是發現自己的基礎特別不紮實，就屬於有的沒的都在學，學完之後也不知道實際上班怎麼去使用、到底會不會用到這些……心裡特別沒底氣，總覺得自己啥都不會（實際上是有點，學過的東西都遺忘了）
不排除有些人就是適合自學，自己琢磨一些東西，但是最後發現，每個人都學習方法不同接收知識程度也是不同的，在我報完課程之後最大的感受就是，學習是很有系統的，可以節省下你去問、去找資源的時間，花費更多的時間來學習和琢磨一些細節不懂的點。最最關鍵的就是，你在任何時間任何方面有啥問題都可以找班主任和導師解決。

說到這個就不得來說一下拉勾分配的導師和班主任了，完全就是一整套龍服務，有任何問題都能幫你解決，解決不了後面還有一個團隊幫助。在之前學習中，我可能不會去問別人我不懂的地方，但是報了班之後，我就有任何疑難雜症都會去找導師詢問，也讓我能夠獨立思考（嘮嗑和學習諮詢都線上服務）

上篇精彩

文章目錄

流式佈局_京東專案

流式佈局_京東專案

原理

流式佈局就是百分比佈局，也稱非固定畫素佈局
將盒子的寬度設定為百分比，具體頁面可以根據盒子的拉伸進行改變
流式佈局是移動web常見的佈局方式

需要定義頁面的最大（max-width\min-width）

京東首頁

準備工作

對css樣式中的內容進行初始化
其中包括關於瀏覽器的相容問題解決方案

tips區域

首先先搭建佈局，然後再更改內容
可以先將所有元素都放在div標籤中，然後讓其進行float排列在一排顯示
基線垂直方向的對齊vertical-align：middle

在這裡插入圖片描述

搜尋框

左右固定寬度高度，只用中間部分可以隨著父親變化而變化（聖盃佈局）
- 給左右兩邊固定定位，並且脫離標準流
- 中間的自適應100%寬度，給一個左右的margin，讓中間內容縮小
關於新增小圖示偽元素
- content:""直接通過content屬性
- 偽元素的定位問題：right：-8px；正數表示和屬性方向相反，負數表示和屬性方向一致

/* 通過偽元素來設定它的邊線 */
.search-box .search span::after {
    position: absolute;
    content: "";
    right: -8px;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

二倍精靈圖
- 在fireworks裡面把精靈圖等比例縮放為原來的一半
- 之後根據新的大小進行座標的測量
- 注意程式碼裡面的background-size也要寫，精靈圖為原來的一半
搜尋框
- 我們通過CSS3的樣式屬性來給搜尋框內容進行定位
- background-color：transparent可以用來透明input標籤背景顏色
- border：none可以不顯示搜尋框的邊框

在這裡插入圖片描述

焦點圖佈局

背景的製作使用的是CSS3樣式
將border-radius來設定弧度
關於fixed固定定位
- 設定了fixed就會脫離文件流，讓出位置，才能讓後面的元素蓋住
CSS3背景漸變效果
- 通過MDA來進行新屬性的學習
- linear-gradient

    background-image: linear-gradient(0deg, #f1503b, #c82519 50%);

在這裡插入圖片描述

輪播圖佈局

圖片型別
- dpg圖片：京東自主研發的圖片壓縮術，節省使用者50%的瀏覽流量，極大提高使用者的網頁開啟速度
- webp圖片：谷歌開發的一種旨在加快圖片載入速度的圖片格式，節省大量的伺服器寬頻資源和資料空間
設定盒子的樣式
- 我們想要盒子有邊框，可以利用CSS3中新增盒子內縮

.banner ul li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 187px;
    /* 利用CSS3的樣式來進行修改，讓盒子進行內縮 */
    padding: 44px 3.3% 0;
    box-sizing: border-box;
}

在這裡插入圖片描述