HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 查看内容

CSS3 布局排版

2016-10-10 10:24| 发布者: Hyukoh| 查看: 838| 评论: 0|原作者: 千里追风 |来自: 简书

摘要: 只要利用 CSS3 提供给我们的新属性,我们可以很轻易的做出这么一个效果。下面我们针对用到的几个主要属性进行讲解。

  前提

  在介绍布局排版之前,我们首先引入一个尺寸单位,这个尺寸单位是在 CSS3 中新引入的,它就是 rem ,所有引用 rem 定义的字体大小都是相对于根元素 文本的大小,相对于使用 em,这种方式将我们从手动计算字体大小的繁琐过程中解脱出来。

  效果一

  demo01.png

  只要利用 CSS3 提供给我们的新属性,我们可以很轻易的做出这么一个效果。下面我们针对用到的几个主要属性进行讲解。

  •   column-width : 用于指定列的宽度,一旦指定一个值,浏览器会根据当前浏览器的宽度,动态的决定将内容分为多少列。
  •   column-rule : 这个属性是一种简写,其实它包含了三个不同的属性,分别是 column-rule-width, column-rule-style, column-rule-color,反正实现的就是在列之间加上一个分割线,和 border 属性的设置是相同的。
  •   column-gap : 用于设置分栏的空隙属性,这个值由分栏两侧平摊。
  如果想要实现分栏,我们可以利用 column-width ,也可以使用 column-count 属性,但是我们通常不这么做,因为这意味着必须要将内容分成三列,而不考虑当前浏览器的宽度,这是非常不友好的设计。

  知道了以上属性之后,相信你可以很快的将我们示图中的效果实现出来,这里我们不在粘贴源代码,你可以 点此下载 。这里需要将一下,我们在页面中引用了一些好看的字体,如果你也想使用,你住需要将下面这一行代码粘贴到你的 标签下即可。

<link href='http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis' rel='stylesheet' type='text/css'>

  效果二

  demo02.png

  这个效果我们使利用 Flexbox 实现的,下面针对用到的几个属性进行讲解。

  •   display : 如果想要使用 Flexbox 布局,那么我们首先要将这个属性的值设置为 flex。
  •   flex-flow : 这个属性其实是两个属性的缩写,其中一个是 flex-direction 用于设置主轴的方向,如果设置为 row 则是一水平方向为主轴,如果为 column 垂直方向为主轴。还有一个属性是 flex-wrap, 用于设置元素换行,当元素超出父元素宽度时就自动换行,这就可以实现自适应屏幕的效果。
  •   flex : 这个属性一般在设置 display 为 flex 的子元素中设置,有三个参数,在这里不在详细解释,因为我也不太能组织语言解释它,可以百度查看一下该属性的使用方法。

  利用以上属性你就可以实现示图中的效果了,源码下载



来源作者:千里追风 
本站资源均由 HTML5中国 编辑从其他网站精选HTML5相关资源转载,以供网友参阅,投稿: news@html5cn.org

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-18 03:11

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部