看了大神的flex教程，决定写个假手淘开心一下！我肯定三下五除二就能写完的！对！没错！~~~
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
结果半夜都还没睡。。。。。
都是下面这条链接害的（微笑.jpg）：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
好吧进入正题。在练习的过程中遇到了很多小问题，所以今天来整理一下。
我们的目标是（当然不是没有蛀牙。。。）：
看着淘宝的首页，除了买买买的欲望很强烈之外，作为一个前端新手，当然还想把它写出来
打开我的webstorm，新建一个项目，为了方便起见，用Gulp来帮我。下面就一块一块来吧（样式的代码是scss格式）。
- 既然是为了练习布局，就原模原样的切，先来写手机顶端
<div class="phoneHead">
<div>
<img src="img/1.jpg">
</div>
<div>
<img src="img/4.jpg">
<img src="img/3.jpg">
<img src="img/2.jpg">
</div>
</div>.phoneHead {
background-color: #ae3903;
display: flex;
div {
display: flex;
flex: 1;
img {
margin-left: 10px;
}
}
div:nth-child(1) {
flex-direction: row; //左边的内容左对齐
}
div:nth-child(2) {
flex-direction: row-reverse; //右边的内容右对齐
}
}手淘顶部
这个部分需要注意一下：搜索框两边的两根小竖线是用两个div实现的
<header>
<div class="scan">
<img src="img/5.jpg">
<p>扫一扫</p>
</div>
<div class="search">
<div></div>
<img src="img/21.jpg">
<input type="text" value="台灯卧室床头 创意">
<img src="img/22.jpg">
<div></div>
</div>
<div class="message">
<img src="img/8.jpg">
<img src="img/9.jpg">
<p>消息</p>
</div>
</header>header {
display: flex;
background-color: #ff5105;
padding-bottom: 15px;
.scan, .message {
flex: 1;
padding: 10px 0 0 0;
img {
width: 55px;
height: 55px; //合理调整图片大小
display: block; //未用div包裹时让其另占一行
margin: auto;
}
p {
font-size: 20px;
text-align: center;
color: #ffffff;
}
}
.message{
position: relative;
img:nth-child(2){
width: 35px;
height:35px;
position: absolute;
top: 10px;
right: 30px;
}
}
.search {
display: flex;
flex: 3.3;
padding: 30px 0 0 0;
margin-bottom: 10px;
border-bottom: 2px solid #ffffff;
//因为整个搜索框的五个部分的比例不一样，所以flex属性值等于其设计宽度的px值大小，这样设置比例更方便准确
div:nth-child(1) {
flex: 10;
height: 10px;
border-left: 2px solid #ffffff;
margin-top: 40px;
}
div:nth-child(5) {
flex: 10;
height: 10px;
margin-top: 40px;
border-right: 2px solid #ffffff;
}
img:nth-child(2) {
flex: 35;
height: 35px;
}
img:nth-child(4) {
flex: 35;
height: 35px;
}
input {
flex: 344;
height: 35px;
outline: none; //去掉默认属性
border: none;
color: #fff7f8;
background-color: #ff5105;
font-size: 32px;
line-height: 35px;
}
}
}轮播图只是一个图片，在这里就不多说了。
这是经典的flex布局：
<ul class="entrance">
<li>
<a href="#">
<img src="img/11.jpg">
<p>天猫</p>
</a>
</li>
<li>
<a href="#">
<img src="img/12.jpg">
<p>聚划算</p>
</a>
</li>
<li>
<a href="#">
<img src="img/13.jpg">
<p>天猫国际</p>
</a>
</li>
<li>
<a href="#">
<img src="img/14.jpg">
<p>外卖</p>
</a>
</li>
<li>
<a href="#">
<img src="img/15.jpg">
<p>天猫超市</p>
</a>
</li>
</ul>.entrance{
padding: 0.06rem 0;
width: 100%;
display: flex;
li{
display: flex;
justify-content:center; //使每一组图标和文字居中显示，给父元素设置的属性
flex: 1;
img{
display: block;
}
p{
font-size: 0.24rem;
color:#909090;
text-align: center;
line-height: 0.35rem;
}
}
}消息轮播部分
<div class="news">
<img src="img/23.jpg">
<div class="list">
<p>
<span>热评</span>
<span>现实中的长发公主，十几年未剪头发</span>
</p>
<p>
<span>热议</span>
<span>30天不喝白开水，脸会变成什么样？</span>
</p>
</div>
</div>.news{
padding: 0.2rem 0;
display: flex;
img{
flex: 1;
padding: 0 0.33rem;
}
.list{
flex: 5;
border-left: 1px solid #dfdfdf; //实现间隔竖线
p {
display: flex; //不要这个属性的话，p标签的内容会被挤出去
align-items: center; //使两个span在交叉轴上居中对齐
height:0.4rem; //结合上一条属性，相当于两个span的line-height=0.4rem
}
span:nth-child(1){
font-size: 0.2rem;
margin: 0 0.2rem;
text-align: center;
border: 1px solid #d90c00;
color: #d90c00;
}
span:nth-child(2){
font-size: 0.27rem;
}
}
}又是一个经典的flex布局：
<div class="area1">
<div class="area1-1">
<div>
<p>
<img src="img/24.jpg">
<span>淘抢购</span>
</p>
<p>进入查看更多</p>
<div><img src="img/28.jpg"></div>
</div>
<div><img src="img/32.jpg"></div>
</div>
<div class="area1-2">
<div>
<p>
<img src="img/25.jpg">
<span>有好货</span>
</p>
<p>高颜值美物</p>
<div><img src="img/29.jpg"></div>
</div>
<div><img src="img/33.jpg"></div>
</div>
</div>
<div class="area1">
<div class="area1-3">
<div>
<p>
<img src="img/26.jpg">
<span>淘抢购</span>
</p>
<p>进入查看更多</p>
<div><img src="img/30.jpg"></div>
</div>
<div><img src="img/34.jpg"></div>
</div>
<div class="area1-4">
<div>
<p>
<img src="img/27.jpg">
<span>有好货</span>
</p>
<p>高颜值美物</p>
<div><img src="img/31.jpg"></div>
</div>
<div><img src="img/35.jpg"></div>
</div>
</div>.area1{
display: flex;
//分别给四个小块加不同的样式
.area1-1{
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
div:nth-child(1){
P:nth-child(1) {
span {
color: #d90c00;
}
}
}
}
.area1-2{
border-bottom: 1px solid #e4e4e4;
div:nth-child(1){
P:nth-child(1) {
span {
color: #00cbff;
}
}
}
}
.area1-3{
div:nth-child(1){
P:nth-child(1) {
span {
color: #db4761;
}
}
}
}
.area1-4{
border-left: 1px solid #e4e4e4;
div:nth-child(1){
P:nth-child(1) {
span {
color: #d53e61;
}
}
}
}
//给四个块加相同的样式
.area1-1,.area1-2,.area1-3,.area1-4{
flex: 1;
display: flex;
padding: 0.15rem 0.3rem;
div:nth-child(1){
flex: 1;
P:nth-child(1) {
display: flex;
span {
font-size: 0.3rem;
padding-left: 0.1rem;
}
}
p:nth-child(2) {
font-size: 0.24rem;
line-height: 0.34rem;
color: #757575;
}
div{
padding: 0.2rem 0.3rem 0 0.3rem;
}
}
div:nth-child(2){
flex: 1;
padding-top: 0.2rem;
}
}
}- 额。。。又是一个经典的flex布局：
因为内容和上一个差不多，所以我就用图片代替了，哈哈，很机（tou）智（lan）吧~~~
<div class="area2">
<div class="title1">
<img src="img/36.jpg">
<span>超实惠</span>
</div>
<div class="area2-1">
<img src="img/37.jpg">
<img src="img/38.jpg">
<img src="img/38.jpg">
<img src="img/40.jpg">
</div>
<div class="area2-1">
<img src="img/41.jpg">
<img src="img/42.jpg">
<img src="img/43.jpg">
<img src="img/44.jpg">
</div>
</div>.area2{
.title1{
display: flex;
justify-content: center;
padding: 0.25rem;
span{
line-height: 0.4rem;
text-align: center;
font-size: 0.3rem;
color: #d90c00;
}
}
.area2-1{
display: flex;
border-top: 1px solid #909090;
img{
display: block;
padding: 0.15rem 0.1rem;
border-left: 1px solid #909090;
}
img:nth-child(1){
flex: 1.8;
border: none;
}
img:nth-child(2),img:nth-child(3),img:nth-child(4){
flex: 1;
}
}
}终于只剩下底部了！
<footer>
<div>
<a>
<img src="img/45.jpg">
<p>首页</p>
</a>
</div>
<div>
<a>
<img src="img/46.jpg">
<p>微淘</p>
</a>
</div>
<div>
<a>
<img src="img/47.jpg">
<p>问大家</p>
</a>
</div>
<div>
<a>
<img src="img/48.jpg">
<p>购物车</p>
</a>
</div>
<div>
<a>
<img src="img/49.jpg">
<p>我的淘宝</p>
</a>
</div>
</footer>footer{
width: 100%;
padding: 20px 0;
background-color: #ffffff;
border-top: 1px solid #909090;
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
div{
flex: 1;
display: flex;
justify-content: center;
img{
display: block;
margin: auto;
}
p{
font-size: 28px;
color: #3a3e3d;
line-height: 45px;
text-align: center;
}
}
}好了，熬夜真是越熬越精神！看效果：
讲真是不是一模一样！自己写的假手淘还不错，哈哈
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
。。。。。。。。。。。。。。。。。。。
然后还是洗洗睡吧
大家晚安
791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
