丢掉JS，CSS也可以独立完成许多牛掰的功能

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

在日常项目开发中，在布局方面有遇到哪些问题了？今天来一起看看CSS布局有哪些小技巧，后续开发更轻松。本文主要通过简单的示例，讲述开发中遇到的布局等问题，但不仅限于布局相关，会有其他相关知识点。

CSS实用技巧第二讲：布局处理

rem自适应布局

移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制，代码如下：

/* 基于UI width=750px DPR=2的页面 */
html {
 font-size: calc(100vw / 7.5);
}

rem 页面布局, 不兼容低版本移动端，使用需谨慎。

overflow-x排版横向列表

通过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径向渐变实现优惠券波浪造型》

移动端1px边框解决方案

在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实用技巧第二讲：布局处理

纯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实用技巧第二讲：布局处理

纯CSS Tabbar切换效果

<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实用技巧第二讲：布局处理

rem自适应布局

移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制，代码如下：

/* 基于UI width=750px DPR=2的页面 */
html {
 font-size: calc(100vw / 7.5);
}

rem 页面布局, 不兼容低版本移动端，使用需谨慎。

overflow-x排版横向列表

通过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径向渐变实现优惠券波浪造型》

移动端1px边框解决方案

在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实用技巧第二讲：布局处理

纯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实用技巧第二讲：布局处理

纯CSS Tabbar切换效果

<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 字段的定义和功能

什么是tabBar 字段呢？

先来看一下，官方定义

in other words,

tabBar 字段就是负责创建一个标签页的效果。

啥意思涅？

我们打开某宝APP首页，首页下方的底部标签页面，

我们使用全局配置文件中的tabBar 字段，就是来实现类似某宝底部标签的效果呈现。

（二）认识 tabBar 字段的属性—— list 属性

· 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 字段的属性介绍页面，如下图

（三）认识 tabBar 字段的属性—— color 属性

我们修改菜单栏名称的颜色，这里用到的属性是 color，

在tabBar 字段中，与list同层级，敲入 color 属性的代码，修改颜色为"#0094ff"（蓝色）

菜单栏的字体颜色，变成蓝色~~

（四）认识 tabBar 字段的属性——selected color 属性

修改选中菜单栏页面的字体颜色，我们用到selected color 属性

步骤如下：

在color 属性后，紧接着加入 selected color 属性，
颜色修改成橘黄色”ff9400“，保存，最后如下图，
被选中的页面（首页页面）的名称是橘黄色的

敲黑板！！咚咚咚！

这里的颜色不能直接写 red, yellow等，

一定要是十六进制颜色！

细心的童鞋，会发现，

官方文档中也明确提到了。

（五）认识 tabBar 字段的属性—— background color 属性

修改选中菜单栏页面的字体颜色，我们用到background color 属性，

在selected color 属性后，紧接着加入 background color 属性，

颜色修改成红色”ff5433“，保存，最后如下图，菜单栏的背景颜色变成红色。

（六）认识 tabBar 字段的属性—— position 属性

改变菜单栏在页面中的位置，我们用到position 属性，

菜单栏在小程序中是默认在底部的，

如果想要菜单栏呈现在顶部，就要用到position 属性，

如下图所示，position 属性仅支持顶部（top）和底部（bottom）两种。

与list 属性同层级，加入position 属性，代码如下图，将菜单栏设置为在页面的顶部，

而且，大家也可以发现，

当菜单栏跑到顶部后，各个页面的图标都消失了，这是小程序的规定，大家知道就好了~~

tabBar 字段中还有一些本章未讲到的属性，大家课下自行实践哈~~

最后，我们再来总结一下，这章的内容

（一） tabBar 字段的定义和功能
（二）认识 tabBar 字段的属性—— list 属性
· list 属性的描述和组成部分
· tabBar 字段中的实操—— 建立小程序底部的tab栏
（三）认识 tabBar 字段的属性—— color 属性
（四）认识 tabBar 字段的属性——selected color 属性
（五）认识 tabBar 字段的属性—— background color 属性
（六）认识 tabBar 字段的属性—— position 属性

搜索并关注微信公众号：飞寝旺食

获取更多小程序运营干货、免费的开发教程、源代码等！

做小程序我们是认真的！

在线咨询

上一篇：html基础必备-分隔标记，前端小白一看就会
下一篇：CSS基础-浮动

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

丢掉JS，CSS也可以独立完成许多牛掰的功能

前言

rem自适应布局

overflow-x排版横向列表

移动端1px边框解决方案

左重右轻导航栏布局

纯CSS折叠面板

纯CSS Tabbar切换效果

前言

rem自适应布局

overflow-x排版横向列表

移动端1px边框解决方案

左重右轻导航栏布局

纯CSS折叠面板

纯CSS Tabbar切换效果

（一） tabBar 字段的定义和功能

（二）认识 tabBar 字段 的 属性—— list 属性

（三）认识 tabBar 字段 的 属性—— color 属性

（四）认识 tabBar 字段 的 属性——selected color 属性

（五）认识 tabBar 字段 的 属性—— background color 属性

（六）认识 tabBar 字段 的 属性—— position 属性

您的项目需求

（二）认识 tabBar 字段的属性—— list 属性

（三）认识 tabBar 字段的属性—— color 属性

（四）认识 tabBar 字段的属性——selected color 属性

（五）认识 tabBar 字段的属性—— background color 属性

（六）认识 tabBar 字段的属性—— position 属性