2016-12-07 23:12:00来自分类 HTML+CSS
# 容器属性 #### flex-direction属性 决定主轴的方向。 有4个可选值: - row(默认值):主轴为水平方向,起点在左端。 - row-reverse:主轴为水平方向,起点在右端。 - column:主轴为垂直方向,起点在上沿。 - column-reverse:主轴为垂直方向,起点在下沿。 #### flex-wrap属性 决定一条轴线排不下,如何换行。 有3个可选值: - nowrap(默认):不换行。 - wrap:换行,第一行在上方。 - wrap-reverse:换行,第一行在下方。 #### justify-content属性 决定项目在主轴上的对齐方式 有5个可选值: - flex-start(默认值):左对齐 - flex-end:右对齐 - center: 居中 - space-between:两端对齐,项目之间的间隔都相等。 - space-around:每个项目两侧的间隔相等。 #### align-items属性 决定项目在交叉轴上如何对齐 有5个可选值: - flex-start:交叉轴的起点对齐。 - flex-end:交叉轴的终点...
2016-12-07 23:12:00来自分类 HTML+CSS
# CSS3 Flexbox 演示 DEMO地址: https://lincenying.github.io/vue2-flex/ 仓库地址: https://github.com/lincenying/vue2-flex # CSS3 Flexbox 布局实例 仓库地址: https://github.com/philipwalton/solved-by-flexbox DEMO地址: https://philipwalton.github.io/solved-by-flexbox/ 该实例列举 6 中常见的布局方式, 包括: 1. 网格系统 https://philipwalton.github.io/solved-by-flexbox/demos/grids/ 2. 圣杯布局 https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ 3. input 拓展 https://philipwalton.github.io/solved-by-flexbox/demos/input-add-o...
2016-12-07 22:12:00来自分类 HTML+CSS
多行文字垂直居中: ```html <style> .align_box_2 { display: table-cell; width: 550px; height: 1.14em; padding: 0 0.1em; border: 4px solid #beceeb; color: #069; font-size: 10em; vertical-align: middle; } .align_box_2 span.align_word { display: inline-block; font-size: 0.1em; vertical-align: middle; } </style> <div class="align_box_2"><span class="align_word">这里显示多行文字。</span></div> ``` 图片的垂直居中: ```ht...
2016-12-07 22:12:00来自分类 HTML+CSS
#### (1)页面结构 * 容器: container * 页头:header * 内容:content/container * 页面主体:main * 页尾:footer * 导航:nav * 侧栏:sidebar * 栏目:column * 页面外围控制整体布局宽度:wrapper * 左右中:left right center #### (2)导航 * 导航:nav * 主导航:mainbav * 子导航:subnav * 顶导航:topnav * 边导航:sidebar * 左导航:leftsidebar * 右导航:rightsidebar * 菜单:menu * 子菜单:submenu * 标题: title * 摘要: summary #### (3)功能 * 标志:logo * 广告:banner * 登陆:login * 登录条:loginbar * 注册:regsiter * 搜索:search * 功能区:shop * 标题:title ...
2016-12-07 22:12:00来自分类 HTML+CSS
```css .wrap-outer { margin-left: calc(100vw - 100%); } /* 或者: */ .wrap-outer { padding-left: calc(100vw - 100%); } ``` ...
2016-12-07 22:12:00来自分类 HTML+CSS
### 01. CSS Rainbow Loader ![纯HTML5和CSS3加载效果](http://7xso5y.com2.z0.glb.clouddn.com/1465715802009.jpg) [演示](http://codepen.io/jackrugile/full/JddmaX)&nbsp;[下载](http://codepen.io/jackrugile/share/zip/JddmaX) ### 02. Single element Slack loader ![纯HTML5和CSS3加载效果](http://7xso5y.com2.z0.glb.clouddn.com/1465720192359.jpg) [演示](http://codepen.io/CrocoDillon/full/Htycs)&nbsp;[下载](http://codepen.io/CrocoDillon/share/zip/Htycs) ### 03. Pure CSS3 loader ![纯HTML5和CSS3加载效果](http://7xso5y.com2.z0.glb....
2016-12-07 22:12:00来自分类 HTML+CSS
#### Guided Website Tour Tooltip 网站提示向导 ![](http://ww2.sinaimg.cn/large/005uQRNCgw1fa9eqapt8gj30jg0b4t8q.jpg) [html5 css3 animated guided website tour tooltip widget](http://codepen.io/yoannhel/pen/pntHc "html5 css3 animated guided website tour tooltip widget") #### Text Animation 文本动画 ![](http://ww3.sinaimg.cn/large/005uQRNCgw1fa9eqvhxqcj30jg0b4jra.jpg) [open source free typography text animation](http://codepen.io/yoannhel/pen/sJpDj "open source free typography text animation") #### Dashbo...