分页

网站有很多个页面，就需要使用分页来为每个页面做导航

点击及鼠标悬停分页样式

圆角样式

悬停过度效果

带边框的分页

分页间隔

分页字体大小

居中分页

面包屑导航

框大小

box-sizing 属性 在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)

 弹性盒子

当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

弹性盒子的性质

  • 通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器
  • 弹性容器内包含了一个或多个弹性子元素
  • 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行

制定弹性子元素在父容器中的位置

沿主轴线对齐

在纵轴方向上的对齐

子元素换行的方式

设置各个行的对齐

弹性子元素的属性

  • 排序
  • 对齐
  • 居中
  • 分配空间等

 多媒体查询

CSS3—— 分页 框大小 弹性盒子 多媒体查询 多媒体查询实例的更多相关文章

  1. CSS3 Flex Box（弹性盒子）

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  2. CSS3总结五：弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

  3. CSS3 弹性盒子(Flex Box)

    1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  4. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  5. CSS3响应式布局之弹性盒子

    CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...

  6. CSS3 弹性盒子

    理解: CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 设置弹性盒子: 弹性盒子由弹性容器(Fl ...

  7. css3弹性盒子

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  8. CSS3弹性盒子（Flex Box）

    CSS3弹性盒子(Flex Box) 一.容器的属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1 ...

  9. CSS3 Flex Box 弹性盒子、弹性布局

    目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...

随机推荐

  1. PHP 优化之php -fpm 进程

    一,php-fpm的启动参数 1 2 3 4 5 6 7 8 9 10 11 12 13 #测试php-fpm配置 /usr/local/php/sbin/php-fpm -t /usr/local/ ...

  2. Anaconda3安装及使用

    一.安装及环境变量配置 1.从这里下载Anaconda 2.根据提示安装即可 3.配置环境变量:%Anaconda%\Script 打开命令行,输入:conda --version,回显版本即完成安装 ...

  3. .align 5 .MACRO .ENDM .word

    ARM的.align 5就是2的5次方对齐,也就是4字节对齐 .macro <name> {<arg_1} {,<arg_2>} … {,<arg_N>} 定 ...

  4. 更新Navicat Premium 后打开数据库出现1146 - Table 'performance_schema.session_variables' doesn't exist

    更新Navicat Premium 后打开数据库出现1146 - Table 'performance_schema.session_variables' doesn't exist 解决方法:打开终 ...

  5. java.sql.SQLException: Access denied for user 'root'@'d001' (using password: YES)

    在安装CDH的时候报错了: root@d001:/var/cache//base# /opt/cm-/share/cmf/schema/scm_prepare_database.sh mysql cd ...

  6. Python _easygui详细版

    1. msgbox msgbox(msg='(Your message goes here)', title=' ', ok_button='OK', image=None, root=None) m ...

  7. day_05 if条件判断和while循环作业题

    1. 输入姑娘的年龄后,进行以下判断: 1. 如果姑娘小于18岁,打印“不接受未成年” 2. 如果姑娘大于18岁小于25岁,打印“心动表白” 3. 如果姑娘大于25岁小于45岁,打印“阿姨好” 4. ...

  8. 【NOIP2012模拟10.25】旅行

    题目 给定一个n行m列的字符矩阵,'.'代表空地,'X'代表障碍.移动的规则是:每秒钟以上下左右四个方向之一移动一格,不能进入障碍. 计算:在空地中随机选择起点和终点(可以重合,此时最短耗时为0),从 ...

  9. 多module project修改module名称

    1.mvn clean 2.project 去掉这个module 3.全局替换所有pom.xml文件的老module名为新module名 4.修改源代码文件夹目录名为新的module名 5.proje ...

  10. MongoDB操作：update()

    @Override public boolean update(String dbName, String collectionName, DBObject oldValue, DBObject ne ...