CSS3 flex实现等分布局的小案例

就是模仿了一下移动端的淘宝页面上的一小部分的导航栏

哼哼哼主要是我还得自己切图然后做，着实有一点点的开心

哈哈哈哈哈

代码走起：个人还是比较喜欢把样式表单独放。

html部分：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>flex做等分布局</title><link rel="stylesheet" type="text/css" href="等分布局.css"/></head><body><div id="wrap"><div id="row"><div class="nav"><a href="javascript:;">天猫</a></div><div class="nav"><a href="javascript:;">聚划算</a></div><div class="nav"><a href="javascript:;">天猫国际</a></div><div class="nav"><a href="javascript:;">外卖</a></div><div class="nav"><a href="javascript:;">天猫超市</a></div></div><div id="row"><div class="nav"><a href="javascript:;">充值中心</a></div><div class="nav"><a href="javascript:;">飞猪旅行</a></div><div class="nav"><a href="javascript:;">领金币</a></div><div class="nav"><a href="javascript:;">拍卖</a></div><div class="nav"><a href="javascript:;">分类</a></div></div></div></body>
</html>

CSS部分：

*{margin: 0;padding: 0;
}
#row{display: flex;
}
#row > .nav{/* 等分布局   要理解flex:1的含义flex:1flex-grow:1flex-shrink:1flex-basis:0*/flex: 1;margin: 10px;
}
#wrap > #row .nav > a{display: block;text-decoration: none;text-align: center;font: 24px "arial black";color: gray;
}
#wrap > #row > .nav > a::before{display: block;content: "";margin: 0 auto;width: 48px;height: 45px;
}
#wrap > #row .nav > a:hover{color: darkslategray;
}#wrap > #row:nth-child(1) > .nav:nth-child(1) > a::before{background: url(../img/01.jpg) no-repeat;
}
#wrap > #row:nth-child(1) > .nav:nth-child(2) > a::before{background: url(../img/02.jpg) no-repeat;
}
#wrap > #row:nth-child(1) > .nav:nth-child(3) > a::before{background: url(../img/03.jpg) no-repeat;
}
#wrap > #row:nth-child(1) > .nav:nth-child(4) > a::before{background: url(../img/04.jpg) no-repeat;
}
#wrap > #row:nth-child(1) > .nav:nth-child(5) > a::before{background: url(../img/05.jpg)no-repeat;
}#wrap > #row:nth-child(2) > .nav:nth-child(1) > a::before{background: url(../img/06.jpg) no-repeat;
}
#wrap > #row:nth-child(2) > .nav:nth-child(2) > a::before{background: url(../img/07.jpg) no-repeat;
}
#wrap > #row:nth-child(2) > .nav:nth-child(3) > a::before{background: url(../img/08.jpg) no-repeat;
}
#wrap > #row:nth-child(2) > .nav:nth-child(4) > a::before{background: url(../img/09.jpg) no-repeat;
}
#wrap > #row:nth-child(2) > .nav:nth-child(5) > a::before{background: url(../img/10.jpg) no-repeat;

CSS3 flex实现等分布局的小案例相关推荐

css3 flex弹性盒子布局梳理，打通任督二脉
挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...
CSS3——弹性盒模型-flex——等分布局、流式布局、圣杯布局(推荐阅读很棒)
1.等分布局: 中间固定两边自适应: 固定两个,一个自适应 2.流式布局: 模仿float浮动布局 3.圣杯布局:(自适应布局) 先来看一下结构布局: <div class="wrap ...
CSS3——弹性盒模型-flex——等分布局、流式布局、圣杯布局
1.等分布局: 中间固定两边自适应: 固定两个,一个自适应 2.流式布局: 模仿float浮动布局 3.圣杯布局:(自适应布局) 先来看一下结构布局: <div class="wrap ...
CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
轻松学习 Flex 布局的小游戏
轻松学习 Flex 布局的小游戏 Flexbox Froggy,帮助你学习前端 Flex 布局的小游戏,难度不高,趣味性极强! Flexbox Froggy(弹性盒小青蛙)是一个帮助你快速学习前端 F ...
CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
网页HTML5制作flex布局骰子,CSS3的Flexbox骰子布局的实现及分析
这篇文章主要介绍了关于CSS3的Flexbox骰子布局的实现及分析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下骰子布局顾名思义,就是好比骰子的一面最多可以放置9个点,而每个面放置的 ...
HTML小案例-使用CSS3实现网页加载loding动画
HTML小案例-使用CSS3实现网页加载loding动画话不多说先看效果 ** 以下为源代码 ** <!DOCTYPE html> <html lang="zh-CN&q ...
栅格布局小案例——图片展览
在学习Bootstrap的过程中,对栅格布局有了一定了解,完成了一个简单的小案例,图片展览,在不同大小的屏幕下显示的效果不一样. 其中还实现了轮播图的效果. 代码如下: <!DOCTYPE ht ...

CSS3 flex实现等分布局的小案例

CSS3 flex实现等分布局的小案例相关推荐

最新文章

热门文章