CSS Flex弹性盒布局

Unsplash

我在上一篇博文CSS 布局_2 Flex弹性盒里,对 Flex 弹性盒有着详细的介绍,这里就不再复述了,书写页面前,我们先来介绍一个之前没提到的知识点——伪类选择器

1. 伪类选择器

:hover 伪类选择器,用于选择鼠标指针浮动在上面的元素,只能改变自身或者子元素的 css 属性,不能改变兄弟元素或者父级元素的 css 属性,同样的选择器还有::link 选择器,设置指向未被访问页面的链接的样式,:visited 选择器,用于设置指向已被访问的页面的链接,:active 选择器,用于活动链接,即鼠标点击链接时的状态,按照 [LoVe HAte] 的便捷记忆方法,按顺序来声明 :link,:visited,:hover,:active

注释:a. IE6 下只能给 a 元素添加该伪类;b. :hover 选择器可用于所有元素,不只是链接

a:link {color: blue;}
a:visited {color: black;}
a:hover {color: red;}
a:active {color: yellow;}

<p>Nian糕在<a href="http://www.jianshu.com/u/b0c7095032f3">简书</a></p>

运行结果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <style type="text/css">
    #nav {
      display: flex;
      text-align: center;
      font-family: arial, "Microsoft Yahei";
    }
    #nav div {
      flex:1;
      cursor: pointer;   <!--光标呈现为指示链接的指针(一只手)-->
    }
    #nav div ul {
      display: none;
      border: 1px solid #d9d9d9;
      border-top: none;
    }
    #nav div:hover ul {
      display: block;
    }
    .list p {
      height: 48px;
      line-height: 48px;
      background-color: #c30;
      color: #fff;
    }
    #nav div:hover p {
      background-color: #c90;
    }
    .list li {
      height: 48px;
      line-height: 48px;
    }
    .list li:hover {
      background-color: #c30;
      color: #fff;
    }
  </style>
</head>
<body>
  <div id="nav">
    <div class="list list1">
      <p>动画</p>
      <ul>
        <li>MAD.AWV</li>
        <li>MMD·3D</li>
      </ul>
    </div>
    <div class="list list2">
      <p>番剧</p>
      <ul>
        <li>连载动画</li>
        <li>完结动画</li>
      </ul>
    </div>
    <div class="list list3">
      <p>音乐</p>
      <ul>
        <li>原创音乐</li>
        <li>翻唱</li>
      </ul>
    </div>
    <div class="list list4">
      <p>舞蹈</p>
    </div>
    <div class="list list5">
      <p>游戏</p>
      <ul>
        <li>单机联机</li>
        <li>网游·电竞</li>
      </ul>
    </div>
  </div>
</body>
</html>

运行截图

2. CSS 3 伪类选择器

接下来的这个例子是 PC 端的布局,这次我们用到的是 CSS 3 伪类选择器,先来做个简单的介绍

:first-child 选择器,表示任何是其父元素的第一个子元素的元素,用于选取属于其父元素的首个子元素的指定选择器,IE7 才开始支持

:last-child 选择器,表示父元素的最后一个子元素,IE9 才开始支持

:nth-child(n) 选择器,匹配属于其父元素的第 n 个子元素,不论元素的类型,n 可以是数字、关键词或公式,当括号里面是公式的时候,要记得把减号项放在前面,如 li:nth-of-type(-2n+8),放在后面是不会生效的,如 li:nth-of-type(8-2n)

:nth-of-type(n) 选择器,匹配属于父元素的特定类型的第 n 个子元素的每个元素,同样的,n 可以是数字、关键词或公式

p:first-child i {
  background: coral;
}

<p><i>年糕</i>是流行于东亚新年的一种传统美食,中文里<i>年糕</i>与“年高”谐音,有年年高的意思</p>
<p><i>年糕</i>是流行于东亚新年的一种传统美食,中文里<i>年糕</i>与“年高”谐音,有年年高的意思</p>

运行结果

li:first-child {
  background: coral;
}
li:last-child {
    background: lightblue;
  }

<ul>
  <li>年糕</li>
  <li>抹茶松糕</li>
  <li>枸杞红豆糕</li>
</ul>

运行结果

li:nth-child(odd) {
  background: coral;
}
li:nth-child(even) {
  background: lightblue;
}

运行结果

div strong:nth-of-type(n) {
  color: coral;
}

<div>
  <strong>年糕</strong>
  <span>抹茶松糕</span>
  <a href="###">枸杞红豆糕</a>
  <strong>蛋黄千层糕</strong>
</div>

运行结果

3. flex PC 端布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    #box {
      text-align: center;
      color: #fff;
      font-size: 48px;
    }
    #header {
      display: flex;
    }
    #header div {
      flex: 1;
      background-color: green;
      height: 150px;
    }
    #middle {
      display: flex;
    }
    #middle > div {
      height: 450px;
    }
    .left {
      flex: 3;
      background-color: blue;
    }
    .right {
      flex: 2;
      background-color: red;
    }
    .item-box {
      display: flex;
    }
    .item-box div {
      flex: 1;
      background-color: #ddd;
    }
    .left > div {
      height: 150px;
      background-color: yellow;
    }
    .right > div {
      height: 200px;
    }
    .right > div:first-child {
      background-color: blue;
    }
    #footer {
      height: 120px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="header">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      div>5</div>
    </div>
    <div id="middle">
      <div class="left">
        <div>6</div>
          <div class="item-box">
            <div>8</div>
            <div>9</div>
          </div>
          <div>11</div>
        </div>
        <div class="right">
          <div>7</div>
          <div>10</div>
        </div>
      </div>
    <div id="footer">12</div>
  </div>
</body>
</html>

运行结果

4. flex 移动端布局

我在之前的博文已经提到过了,Flex 弹性盒布局一般是用于移动端页面的,下面是一个移动端的布局,需要注意的是,在移动端页面,我们需要在头部添加 viewport,快捷键为 meta:vp,不添加的话,默认页面宽度为 960 px(根据用户的设备宽度不同而有变化),添加了之后,宽度会根据移动设备宽度相关

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width 属性控制视口的宽度,width=device-width 表示宽度是设备屏幕的宽度,可以像 width=600 这样设为确切的像素数,或者设为 device-width 这一特殊值来指代比例为 100% 时屏幕宽度的 CSS 像素数值(相应有 heightdevice-height 属性,可能对包含基于视口高度调整大小及位置的元素的页面有用)

initial-scale 属性控制页面最初加载时的缩放等级,maximum-scale 属性表示最小的缩放比例 、minimum-scale 属性表示最大的缩放比例,还有一个在上面没有出现到的属性 user-scalable=yes ,表示的用户是否可以调整缩放比例

淘宝移动端页面

下面我们通过 Flex 弹性盒布局来完成上面的淘宝页面在移动端的布局

.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="css/taobao.css">
</head>
<body>
  <div id="header">
    <div class="part1"></div>
    <div class="part2"></div>
  </div>
  <div id="banner"></div>
  <ul id="bannerList">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="hotNews">
    <div class="patr1"></div>
    <div class="patr2"></div>
  </div>
  <div id="hotNews1">
    <ul>
      <li class="part0"></li>
      <li class="part1"></li>
      <li class="part2"></li>
      <li class="part3"></li>
      <li class="part4"></li>
      <li class="part5"></li>
      <li class="part6"></li>
      <li class="part7"></li>
      <li class="part8"></li>
    </ul>
  </div>
  <div id="hotNews2">
    <ul>
      <li class="part0"></li>
      <li class="part1"></li>
      <li class="part2"></li>
      <li class="part3"></li>
      <li class="part4"></li>
      <li class="part5"></li>
      <li class="part6"></li>
    </ul>
  </div>
</body>
</html>

.css 文件

body, ul, ol, p, h1, h2, h3, h4, h5, h6, dl, dd {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 1em;
}
img {
  display: block;
  width: 100%;
}

#header {
  display: flex;
  height: 37px;
}
#header .part1 {
  flex-basis: 50px;
  background-color: hsl(0,100%,50%);
}
#header .part2 {
  flex-grow: 1;
  background-color: hsl(245,100%,50%);
}
#banner {
  height: 100px;
  background-color: hsl(48,100%,50%);
}
#bannerList {
  display: flex;
  flex-wrap: wrap;
}
#bannerList li {
  height: 68px;
  flex-basis: 20%;
  box-sizing: border-box;
  border: 1px solid #fff;
  background-color: hsl(123,100%,50%);
}
#hotNews1 ul {
  display: flex;
  flex-wrap: wrap;
}
#hotNews1 ul .part0 {
  height: 50px;
  background-color: hsl(150,100%,50%);
  border: 1px solid #fff;
  flex: 100%;
}
#hotNews1 ul .part1 {
  height: 180px;
  background-color: hsl(150,100%,50%);
  border: 1px solid #fff;
  flex: 38%;
}
#hotNews1 ul .part2 {
  height: 180px;
  background-color: hsl(150,100%,50%);
  border: 1px solid #fff;
  flex: 20%;
}
#hotNews1 ul .part3 {
  height: 180px;
  background-color: hsl(150,100%,50%);
  border: 1px solid #fff;
  flex: 20%;
}
#hotNews1 ul .part4 {
  height: 180px;
  background-color: hsl(150,100%,50%);
  border: 1px solid #fff;
  flex: 20%;
}
#hotNews1 ul .part5 {
  height: 180px;
  background-color: hsl(150,100%,50%);
  border: 1px solid #fff;
  flex: 38%;
}
#hotNews1 ul .part6 {
  height: 180px;
  background-color: hsl(150,100%,50%);
  border: 1px solid #fff;
  flex: 20%;
}
#hotNews1 ul .part7 {
  height: 180px;
  background-color: hsl(150,100%,50%);
  border: 1px solid #fff;
  flex: 20%;
}
#hotNews1 ul .part8 {
  height: 180px;
  background-color: hsl(150,100%,50%);
  border: 1px solid #fff;
  flex: 20%;
}

#hotNews2 ul {
  display: flex;
  flex-wrap: wrap;
}
#hotNews2 ul .part0 {
  height: 50px;
  background-color: hsl(264,100%,50%);
  border: 1px solid #fff;
  flex: 100%;
}
#hotNews2 ul .part1 {
  height: 180px;
  background-color: hsl(264,100%,50%);
  border: 1px solid #fff;
  flex: 49%;
}
#hotNews2 ul .part2 {
  height: 180px;
  background-color: hsl(264,100%,50%);
  border: 1px solid #fff;
  flex: 49%;
}
#hotNews2 ul .part3 {
  height: 180px;
  background-color: hsl(264,100%,50%);
  border: 1px solid #fff;
  flex: 24%;
}
#hotNews2 ul .part4 {
  height: 180px;
  background-color: hsl(264,100%,50%);
  border: 1px solid #fff;
  flex: 24%;
}
#hotNews2 ul .part5 {
  height: 180px;
  background-color: hsl(264,100%,50%);
  border: 1px solid #fff;
  flex: 24%;
}
#hotNews2 ul .part6 {
  height: 180px;
  background-color: hsl(264,100%,50%);
  border: 1px solid #fff;
  flex: 24%;
}

运行结果

上面 bannerList 中的 li 使用了 flex-basis: 20%; 属性,即一行能够放置 5 个 li,但随后又设置了 border: 1px solid #fff; 属性,布局就会变成下面的样子,这也是前面提到过的 W3C 标准盒模型在布局上面的弊端,这个时候只需要设置 box-sizing: border-box; 属性即可解决

运行结果

5. GRB 和 HSL 的使用

在上面的 background-color 属性,并没有使用到之前提过的三种颜色表示方式(① 关键字,颜色名称的背景颜色;② 16 进制值的背景颜色;③ RGB 三原色代码的背景颜色),而是使用到了 HSL,即色相(Hue)饱和度 (Saturation)亮度 (Lightness),这是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法,还有一个参数是 A,表示的是透明度 (Alpha),这个参数也可以使用到 RGB 中

色相:是色彩的基本属性,色轮上从0到360的度数,0是红色,120是绿色,240是蓝色 饱和度:是指色彩的纯度,越高色彩越纯,低则逐渐变灰,百分比值,0% 表示灰色阴影,100% 表示全色 亮度:同样也是一个百分比值,0%为黑色,100%为白色 透明通道:介于 0.0(完全透明)与 1.0(完全不透明)的数字 注释:在 IE9 以上浏览器支持该种颜色表示方式

h1 {background-color:rgb(210,0,0);}
h2 {background-color:rgba(210,0,0,0.5);}
h3 {background-color:hsl(120,65%,75%);}
h4 {background-color:hsla(120,65%,75%,0.3);}

<h1>年糕</h1>
<h2>枸杞红豆糕</h2>
<h3>抹茶松糕</h3>
<h4>蛋黄千层糕</h4>

运行结果

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——图片作边框

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

2666
来自专栏闻道于事

正式学习第二天上午——常用标签及列表 0605

今天2017.0605上午,主要学习了常用标签和列表,以下面代码为例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

2856
来自专栏从零开始学 Web 前端

CSS学习笔记(基础篇)

CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)

1523
来自专栏向治洪

html5 jqueryrotate插件实现旋转动画

CSS3 提供了多种变形效果,比如矩阵变形、位移、缩放、旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动。然后 IE10 以下版本的浏览器不支持 CSS3...

3836
来自专栏IMWeb前端团队

重构不完全教程集之一

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 “无上甚深微妙法,百千万劫难遭遇,我今见闻得受持,愿解如来真实义。” ——《...

2245
来自专栏非著名程序员

基础篇章:React Native之Flexbox的讲解(Height and Width)

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 今天在讲解Flexbox之前,我们先讲解一下...

2257
来自专栏Android干货

浅谈GridLayout(网格布局)

4079
来自专栏AndroidTv

前端入门5-CSS弹性布局flex声明正文-弹性布局flex

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

1222
来自专栏cnblogs

CSS3新特性应用之用户体验

一、光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:non...

2168
来自专栏Micro_awake web

重温CSS3

基础不牢,地动山摇!没办法,只能重温“经典”! 1.CSS3边框:border-radius;  box-shadow;  border-image borde...

3678

扫码关注云+社区

领取腾讯云代金券