整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
在日常項目開發中，在布局方面有遇到哪些問題了？今天來一起看看CSS布局有哪些小技巧，后續開發更輕松。本文主要通過簡單的示例，講述開發中遇到的布局等問題，但不僅限于布局相關，會有其他相關知識點。
CSS實用技巧第二講：布局處理
移動端使用rem布局需要通過JS設置不同屏幕寬高比的font-size，結合vw單位和calc()可脫離JS的控制，代碼如下：
/* 基于UI width=750px DPR=2的頁面 */
html {
font-size: calc(100vw / 7.5);
}
rem 頁面布局, 不兼容低版本移動端，使用需謹慎。
通過flexbox或inline-block的形式橫向排列元素，對父元素設置overflow-x:auto橫向滾動查看。注意場景： 橫向滾動列表、元素過多但位置有限的導航欄。
CSS實用技巧第二講：布局處理
<div class="horizontal-list flex"> <ul> <li>web秀</li> <li>阿里巴巴</li> <li>字節跳動</li> <li>騰訊</li> <li>百度</li> <li>美團</li> </ul> </div> <div class="horizontal-list inline"> <ul> <li>web秀</li> <li>阿里巴巴</li> <li>字節跳動</li> <li>騰訊</li> <li>百度</li> <li>美團</li> </ul> </div>
scss樣式
.horizontal-list {
width: 300px;
height: 100px;
ul {
overflow-x: scroll;
cursor: pointer;
margin: 0;
padding: 0;
&::-webkit-scrollbar {
height: 6px;
}
&::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: linear-gradient(to right, #32bbff, #008cf4);
}
}
li {
overflow: hidden;
margin-left: 10px;
height: 90px;
background-color: #00b7a3;
line-height: 90px;
text-align: center;
font-size: 16px;
color: #fff;
&:first-child {
margin-left: 0;
}
}
}
.flex {
ul {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
li {
flex-shrink: 0;
flex-basis: 90px;
}
}
.inline {
margin-top: 10px;
height: 102px;
ul {
overflow-y: hidden;
white-space: nowrap;
}
li {
display: inline-block;
width: 90px;
}
}
知識點解析：
1、display: flex布局：又名“彈性布局”，任何一個容器都可以指定為Flex布局。詳細內容請點擊
《CSS3中Flex彈性布局該如何靈活運用？》
2、滾動條樣式美化。
如何自定義滾動條樣式了？ 掌握這3個選擇器即可。
（1）、::-webkit-scrollbar 定義了滾動條整體的樣式；
（2）、::-webkit-scrollbar-thumb 滑塊部分；
（3）、::-webkit-scrollbar-track 軌道部分；
所以上面scss代碼中，我們書寫了這3個選擇器的樣式，改變了滾動條的樣式。
3、linear-gradient線性漸變。語法如下：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction用角度值指定漸變的方向（或角度）, color-stop1, color-stop2,...用于指定漸變的起止顏色。
to right的意思就是從左到右，從一個顏色過渡到另外一個顏色。
請看示例：
CSS實用技巧第二講：布局處理
更多詳細內容請點擊：
《CSS3線性漸變、陰影、縮放實現動畫下雨效果》
《CSS3線性徑向漸變、旋轉、縮放動畫實現王者榮耀匹配人員加載頁面》
《CSS3徑向漸變實現優惠券波浪造型》
在retina屏中，像素比為2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的邊框看起來比真的1px更寬。
我們可以通過偽類加transform的方式解決。
CSS實用技巧第二講：布局處理
transform：用于元素進行旋轉、縮放、移動或傾斜，和設置樣式的動畫并沒有什么關系，就相當于color一樣用來設置元素的“外表”。
詳細transform了解，請點擊：
《CSS3最容易混淆屬性transition transform animation translate》
非常簡單的方式，flexbox橫向布局時，最后一個元素通過margin-left:auto實現向右對齊。
請看示例：
<ul class="nav-list"> <li>HTML5</li> <li>CSS3</li> <li>JAVASCRIPT</li> <li>TYPESCRIPT</li> <li>THREE.JS</li> <li>NODE</li> </ul>
css樣式
.nav-list {
display: flex;
align-items: center;
padding: 0 10px;
width: 700px;
height: 60px;
background-color: #00b7a3;
}
.nav-list li {
padding: 0 10px;
height: 40px;
line-height: 40px;
font-size: 16px;
color: #fff;
list-style: none;
}
.nav-list li + li {
margin-left: 10px;
}
.nav-list li:last-child {
margin-left: auto;
}
CSS實用技巧第二講：布局處理
<div class="accordion"> <input type="checkbox" id="collapse1"> <input type="checkbox" id="collapse2"> <input type="checkbox" id="collapse3"> <article> <label for="collapse1">web秀</label> <p>html<br>javascript<br>css<br>uni app</p> </article> <article> <label for="collapse2"></label> <p>新聞<br>圖片<br>視頻<br>養生</p> </article> <article> <label for="collapse3">阿里巴巴</label> <p>淘寶<br>阿里云<br>閑魚<br>天貓</p> </article> </div>
scss樣式
.accordion {
width: 300px;
article {
margin-top: 5px;
cursor: pointer;
&:first-child {
margin-top: 0;
}
}
input {
display: none;
padding: 0;
margin: 0;
&:nth-child(1):checked ~ article:nth-of-type(1) p,
&:nth-child(2):checked ~ article:nth-of-type(2) p,
&:nth-child(3):checked ~ article:nth-of-type(3) p {
border-bottom-width: 1px;
max-height: 600px;
}
}
label {
display: block;
padding: 0 20px;
height: 40px;
background-color: #00b7a3;
cursor: pointer;
line-height: 40px;
font-size: 16px;
color: #fff;
}
p {
overflow: hidden;
padding: 0 20px;
margin: 0;
border: 1px solid #00b7a3;
border-top: none;
border-bottom-width: 0;
max-height: 0;
line-height: 30px;
transition: all 500ms;
}
}
CSS實用技巧第二講：布局處理
<div class="tab-navbar"> <input type="radio" name="tab" id="tab1" checked> <input type="radio" name="tab" id="tab2"> <input type="radio" name="tab" id="tab3"> <input type="radio" name="tab" id="tab4"> <nav> <label for="tab1">首頁</label> <label for="tab2">列表</label> <label for="tab3">其他</label> <label for="tab4">我的</label> </nav> <main> <ul> <li>首頁</li> <li>列表</li> <li>其他</li> <li>我的</li> </ul> </main> </div>
scss樣式
*{
padding: 0;
margin: 0;
}
.active {
background-color: #00b7a3;
color: #fff;
}
.tab-navbar {
display: flex;
overflow: hidden;
flex-direction: column-reverse;
border-radius: 10px;
width: 300px;
height: 400px;
margin: 100px auto;
input {
display: none;
&:nth-child(1):checked {
& ~ nav label:nth-child(1) {
@extend .active;
}
& ~ main ul {
background-color: #f13f84;
transform: translate3d(0, 0, 0);
}
}
&:nth-child(2):checked {
& ~ nav label:nth-child(2) {
@extend .active;
}
& ~ main ul {
background-color: #44bb44;
transform: translate3d(-25%, 0, 0);
}
}
&:nth-child(3):checked {
& ~ nav label:nth-child(3) {
@extend .active;
}
& ~ main ul {
background-color: #ff7632;
transform: translate3d(-50%, 0, 0);
}
}
&:nth-child(4):checked {
& ~ nav label:nth-child(4) {
@extend .active;
}
& ~ main ul {
background-color: #00bbdd;
transform: translate3d(-75%, 0, 0);
}
}
}
nav {
display: flex;
height: 40px;
background-color: #f0f0f0;
line-height: 40px;
text-align: center;
label {
flex: 1;
cursor: pointer;
transition: all 300ms;
}
}
main {
flex: 1;
ul {
display: flex;
flex-wrap: nowrap;
width: 400%;
height: 100%;
transition: all 300ms;
}
li {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
font-weight: bold;
font-size: 20px;
color: #fff;
}
}
}
CSS實用技巧第二講：布局處理
喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！同時，要源碼的小伙伴可以點擊下方“了解更多”。
最后推薦一個專欄文章，感謝小伙伴們多多支持，謝謝大家！
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
在日常項目開發中，在布局方面有遇到哪些問題了？今天來一起看看CSS布局有哪些小技巧，后續開發更輕松。本文主要通過簡單的示例，講述開發中遇到的布局等問題，但不僅限于布局相關，會有其他相關知識點。
CSS實用技巧第二講：布局處理
移動端使用rem布局需要通過JS設置不同屏幕寬高比的font-size，結合vw單位和calc()可脫離JS的控制，代碼如下：
/* 基于UI width=750px DPR=2的頁面 */
html {
font-size: calc(100vw / 7.5);
}
rem 頁面布局, 不兼容低版本移動端，使用需謹慎。
通過flexbox或inline-block的形式橫向排列元素，對父元素設置overflow-x:auto橫向滾動查看。注意場景： 橫向滾動列表、元素過多但位置有限的導航欄。
CSS實用技巧第二講：布局處理
<div class="horizontal-list flex"> <ul> <li>web秀</li> <li>阿里巴巴</li> <li>字節跳動</li> <li>騰訊</li> <li>百度</li> <li>美團</li> </ul> </div> <div class="horizontal-list inline"> <ul> <li>web秀</li> <li>阿里巴巴</li> <li>字節跳動</li> <li>騰訊</li> <li>百度</li> <li>美團</li> </ul> </div>
scss樣式
.horizontal-list {
width: 300px;
height: 100px;
ul {
overflow-x: scroll;
cursor: pointer;
margin: 0;
padding: 0;
&::-webkit-scrollbar {
height: 6px;
}
&::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: linear-gradient(to right, #32bbff, #008cf4);
}
}
li {
overflow: hidden;
margin-left: 10px;
height: 90px;
background-color: #00b7a3;
line-height: 90px;
text-align: center;
font-size: 16px;
color: #fff;
&:first-child {
margin-left: 0;
}
}
}
.flex {
ul {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
li {
flex-shrink: 0;
flex-basis: 90px;
}
}
.inline {
margin-top: 10px;
height: 102px;
ul {
overflow-y: hidden;
white-space: nowrap;
}
li {
display: inline-block;
width: 90px;
}
}
知識點解析：
1、display: flex布局：又名“彈性布局”，任何一個容器都可以指定為Flex布局。詳細內容請點擊
《CSS3中Flex彈性布局該如何靈活運用？》
2、滾動條樣式美化。
如何自定義滾動條樣式了？ 掌握這3個選擇器即可。
（1）、::-webkit-scrollbar 定義了滾動條整體的樣式；
（2）、::-webkit-scrollbar-thumb 滑塊部分；
（3）、::-webkit-scrollbar-track 軌道部分；
所以上面scss代碼中，我們書寫了這3個選擇器的樣式，改變了滾動條的樣式。
3、linear-gradient線性漸變。語法如下：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction用角度值指定漸變的方向（或角度）, color-stop1, color-stop2,...用于指定漸變的起止顏色。
to right的意思就是從左到右，從一個顏色過渡到另外一個顏色。
請看示例：
CSS實用技巧第二講：布局處理
更多詳細內容請點擊：
《CSS3線性漸變、陰影、縮放實現動畫下雨效果》
《CSS3線性徑向漸變、旋轉、縮放動畫實現王者榮耀匹配人員加載頁面》
《CSS3徑向漸變實現優惠券波浪造型》
在retina屏中，像素比為2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的邊框看起來比真的1px更寬。
我們可以通過偽類加transform的方式解決。
CSS實用技巧第二講：布局處理
transform：用于元素進行旋轉、縮放、移動或傾斜，和設置樣式的動畫并沒有什么關系，就相當于color一樣用來設置元素的“外表”。
詳細transform了解，請點擊：
《CSS3最容易混淆屬性transition transform animation translate》
非常簡單的方式，flexbox橫向布局時，最后一個元素通過margin-left:auto實現向右對齊。
請看示例：
<ul class="nav-list"> <li>HTML5</li> <li>CSS3</li> <li>JAVASCRIPT</li> <li>TYPESCRIPT</li> <li>THREE.JS</li> <li>NODE</li> </ul>
css樣式
.nav-list {
display: flex;
align-items: center;
padding: 0 10px;
width: 700px;
height: 60px;
background-color: #00b7a3;
}
.nav-list li {
padding: 0 10px;
height: 40px;
line-height: 40px;
font-size: 16px;
color: #fff;
list-style: none;
}
.nav-list li + li {
margin-left: 10px;
}
.nav-list li:last-child {
margin-left: auto;
}
CSS實用技巧第二講：布局處理
<div class="accordion"> <input type="checkbox" id="collapse1"> <input type="checkbox" id="collapse2"> <input type="checkbox" id="collapse3"> <article> <label for="collapse1">web秀</label> <p>html<br>javascript<br>css<br>uni app</p> </article> <article> <label for="collapse2"></label> <p>新聞<br>圖片<br>視頻<br>養生</p> </article> <article> <label for="collapse3">阿里巴巴</label> <p>淘寶<br>阿里云<br>閑魚<br>天貓</p> </article> </div>
scss樣式
.accordion {
width: 300px;
article {
margin-top: 5px;
cursor: pointer;
&:first-child {
margin-top: 0;
}
}
input {
display: none;
padding: 0;
margin: 0;
&:nth-child(1):checked ~ article:nth-of-type(1) p,
&:nth-child(2):checked ~ article:nth-of-type(2) p,
&:nth-child(3):checked ~ article:nth-of-type(3) p {
border-bottom-width: 1px;
max-height: 600px;
}
}
label {
display: block;
padding: 0 20px;
height: 40px;
background-color: #00b7a3;
cursor: pointer;
line-height: 40px;
font-size: 16px;
color: #fff;
}
p {
overflow: hidden;
padding: 0 20px;
margin: 0;
border: 1px solid #00b7a3;
border-top: none;
border-bottom-width: 0;
max-height: 0;
line-height: 30px;
transition: all 500ms;
}
}
CSS實用技巧第二講：布局處理
<div class="tab-navbar"> <input type="radio" name="tab" id="tab1" checked> <input type="radio" name="tab" id="tab2"> <input type="radio" name="tab" id="tab3"> <input type="radio" name="tab" id="tab4"> <nav> <label for="tab1">首頁</label> <label for="tab2">列表</label> <label for="tab3">其他</label> <label for="tab4">我的</label> </nav> <main> <ul> <li>首頁</li> <li>列表</li> <li>其他</li> <li>我的</li> </ul> </main> </div>
scss樣式
*{
padding: 0;
margin: 0;
}
.active {
background-color: #00b7a3;
color: #fff;
}
.tab-navbar {
display: flex;
overflow: hidden;
flex-direction: column-reverse;
border-radius: 10px;
width: 300px;
height: 400px;
margin: 100px auto;
input {
display: none;
&:nth-child(1):checked {
& ~ nav label:nth-child(1) {
@extend .active;
}
& ~ main ul {
background-color: #f13f84;
transform: translate3d(0, 0, 0);
}
}
&:nth-child(2):checked {
& ~ nav label:nth-child(2) {
@extend .active;
}
& ~ main ul {
background-color: #44bb44;
transform: translate3d(-25%, 0, 0);
}
}
&:nth-child(3):checked {
& ~ nav label:nth-child(3) {
@extend .active;
}
& ~ main ul {
background-color: #ff7632;
transform: translate3d(-50%, 0, 0);
}
}
&:nth-child(4):checked {
& ~ nav label:nth-child(4) {
@extend .active;
}
& ~ main ul {
background-color: #00bbdd;
transform: translate3d(-75%, 0, 0);
}
}
}
nav {
display: flex;
height: 40px;
background-color: #f0f0f0;
line-height: 40px;
text-align: center;
label {
flex: 1;
cursor: pointer;
transition: all 300ms;
}
}
main {
flex: 1;
ul {
display: flex;
flex-wrap: nowrap;
width: 400%;
height: 100%;
transition: all 300ms;
}
li {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
font-weight: bold;
font-size: 20px;
color: #fff;
}
}
}
CSS實用技巧第二講：布局處理
喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！同時，要源碼的小伙伴可以點擊下方“了解更多”。
最后推薦一個專欄文章，感謝小伙伴們多多支持，謝謝大家！
天的小程序開發小課堂開課了~~~
上一篇文章，我們一起掰扯了全局配置文件-window字段的相關知識，
大家看過的，再復習一下，沒看過的回去看我的前一篇文章把~~~
話不多說（廢話真多），今天一起來學習全局配置文件-tabBar字段吧~
什么是tabBar 字段呢？
先來看一下，官方定義
in other words,
tabBar 字段就是負責創建一個標簽頁的效果。
啥意思涅？
我們打開某寶APP首頁，首頁下方的底部標簽頁面，
我們使用全局配置文件中的tabBar 字段，就是來實現類似 某寶 底部標簽 的效果呈現。
· list 屬性的描述和組成部分
回到微信開發者工具 界面中，
tabBar 字段是長介樣兒的
list 屬性 官方解釋如下：
由上上圖可看到，
list屬性下包括4部分，
pagePath：頁面路徑
text：標題
iconPath：未被選中的頁面路徑
selectedIconPath：已選中的頁面圖標路徑
艾瑞巴蒂，
我知道，我又在一本正經胡說八道了，
好吧~
我們還是圖文并茂吧~~
1、pagePath：頁面路徑
還是拿某寶來說吧，
pagePath 這一行，
決定的就是，
點擊下方菜單欄，要跳轉至哪一個頁面的路徑。
2、text：標題
如上圖所示，某寶中，下方菜單，比如：微淘，消息，購物車等，都是 text
3、iconPath：未被選中的頁面路徑
iconPath ：
點擊某寶-購物車后，可以看到下圖菜單欄中未選中的頁面的狀態
4、selectedIconPath：已選中的頁面圖標路徑
某寶中，點擊“首頁”后，下方菜單欄的頁面路徑
了解完 tabBar 字段的list屬性后，我們可以發現，
要想在小程序中建立像某寶頁面底部中一樣的tab欄，
一要先在全局配置文件中的pages 字段中，新建各個子頁面；
二是還要用到圖標icon，并將圖標文件夾復制至開發者工具中建立的小程序項目目錄下，
并且，icon文件夾與pages、utils文件夾同層級別,
如下圖所示。
這里，本節課，需要用到這8個圖標（想要的童鞋，私聊我哦~~）
· tabBar 字段中的實操—— 建立小程序底部的tab欄
這是實操模板，手把手帶你敲代碼~~
1、pages 字段中新增tab欄各個子頁面
步驟如下：
（1）將 index 頁面（首頁頁面）放在最前面，如下圖所示
（2）根據icon 文件夾中的后四個圖標，編寫每個圖標的頁面路徑
home--首頁 頁面；
img--圖片預覽 頁面；
my--個人中心 頁面；
search--搜索中心 頁面
（3）點擊“保存”鍵
四個頁面的代碼和呈現結果如下：
2、tabBar 字段中新增四個子菜單欄
步驟如下：
（1）點擊下圖標識，將window 字段折疊
（2）window 字段后加入 tabBar 字段
（3）在tabBar 字段中編輯 index (首頁) 頁面，代碼修改如下：
首頁 頁面用到這兩個圖標，名稱一定要寫對哦~
（4）點擊保存，發現調試器下面報錯，意為 tabBar 字段中要同時加入2個頁面的路徑
(5) 在 "index" 路徑后加“，”（如下圖中的1），復制 tabBar 字段中 "index" 代碼（如下圖中的2）
（6）將復制的代碼修改成img（圖片）頁面，代碼如下
img(圖片)頁面用到這兩個圖標，名稱一定要對上！
（7）按下”保存“鍵，小程序頁面呈現如下。可以看到，”首頁“是選中的狀態，而圖片菜單是未選中的
（8) 繼續在下方，復制 tabBar 字段中 "index" 代碼，修改成”個人中心“頁面 和 ”搜索中心“頁面的代碼，如下圖：
（9）點擊保存，看呈現界面的變化
如上圖所示，小程序現在的底部菜單欄顏色是很單調的。
我們可以應用 tabBar 字段中的其他顏色屬性來調整顏色。
屬性哪里找呢？
請點擊下方鏈接，跳轉至小程序官方指導文檔中，
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
定位到 tabBar 字段 的屬性介紹頁面，如下圖
我們修改菜單欄名稱的顏色，這里用到的屬性是 color，
在tabBar 字段中，與list同層級，敲入 color 屬性的代碼，修改顏色為"#0094ff"（藍色）
菜單欄的字體顏色，變成藍色~~
修改選中菜單欄頁面的字體顏色，我們用到selected color 屬性
步驟如下：
在color 屬性后，緊接著加入 selected color 屬性，
顏色修改成橘黃色”ff9400“，保存，最后如下圖，
被選中的頁面（首頁頁面）的名稱是橘黃色的
敲黑板！！咚咚咚！
這里的顏色不能直接寫 red, yellow等，
一定要是十六進制顏色！
細心的童鞋，會發現，
官方文檔中也明確提到了。
修改選中菜單欄頁面的字體顏色，我們用到background color 屬性，
在selected color 屬性后，緊接著加入 background color 屬性，
顏色修改成紅色”ff5433“，保存，最后如下圖，菜單欄的背景顏色變成紅色。
改變菜單欄在頁面中的位置，我們用到position 屬性，
菜單欄在小程序中是默認在底部的，
如果想要菜單欄呈現在 頂部，就要用到position 屬性，
如下圖所示，position 屬性僅支持 頂部（top）和底部（bottom）兩種。
與list 屬性同層級，加入position 屬性，代碼如下圖，將菜單欄設置為在頁面的頂部，
而且，大家也可以發現，
當菜單欄跑到頂部后，各個頁面的圖標都消失了，這是小程序的規定，大家知道就好了~~
tabBar 字段中還有一些本章未講到的屬性，大家課下自行實踐哈~~
最后，我們再來總結一下，這章的內容
（一） tabBar 字段的定義和功能
（二）認識 tabBar 字段 的 屬性—— list 屬性
· list 屬性的描述和組成部分
· tabBar 字段中的實操—— 建立小程序底部的tab欄
（三）認識 tabBar 字段 的 屬性—— color 屬性
（四）認識 tabBar 字段 的 屬性——selected color 屬性
（五）認識 tabBar 字段 的 屬性—— background color 屬性
（六）認識 tabBar 字段 的 屬性—— position 屬性
搜索并關注微信公眾號：飛寢旺食
獲取更多小程序運營干貨、免費的開發教程、源代碼等！
做小程序我們是認真的！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
