分页

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

点击及鼠标悬停分页样式

圆角样式

悬停过度效果

带边框的分页

分页间隔

分页字体大小

居中分页

面包屑导航

框大小

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. angularjs 代码结构两种写法

    1.当路由中不写controller的时候,controller写在对应的html表单中 2.若要写在路由中,如下 3.转到相应的路由(页面) 1.采用location服务 2.采用 transiti ...

  2. python类库32[序列化和反序列化之pickle]

      一 pickle pickle模块用来实现python对象的序列化和反序列化.通常地pickle将python对象序列化为二进制流或文件.   python对象与文件之间的序列化和反序列化: pi ...

  3. Python---面向对象的三大特征

    # 面向对象的三大特征 - 继承 - 封装 - 多态 # 继承 - 子类可以使用父类定义的内容或者行为等 - 继承的实现 - 父类:基类,超类:被继承的类, Base Class, Super Cla ...

  4. MySQL报错：Cause: java.sql.SQLException: Incorrect string value: '\xE6\x9D\xA8","...' for column 'obj_value' at row 1

    1.插入MySQL表时,报错:Cause: java.sql.SQLException: Incorrect string value: '\xE6\x9D\xA8","...' ...

  5. druid配置以及监控

    1.druid监控的功能: . 数据源 . SQL监控 对执行的MySQL语句进行记录,并记录执行时间.事务次数等 . SQL防火墙 对SQL进行预编译,并统计该条SQL的数据指标 . Web应用 对 ...

  6. linux下为已经编译好的php环境添加mysql扩展（php安装完成后如何添加mysql扩展）

    问题背景 平常我们都是先安装mysql,然后才能去安装php.假如先安装php,后安装mysql,由于php需要连接mysql,因而在php引擎中需要配置使用mysql.so扩展.这时需要手动编译生成 ...

  7. 把数据存储到 XML 文件

    通常,我们在数据库中存储数据.不过,如果希望数据的可移植性更强,我们可以把数据存储 XML 文件中. 创建并保存 XML 文件 如果数据要被传送到非 Windows 平台上的应用程序,那么把数据保存在 ...

  8. BZOJ 3193: [JLOI2013]地形生成 计数 + 组合 + 动态规划

    第一问: 先不考虑山的高度有相同的:直接按照高度降序排序,试着将每一座山插入到前面山的缝隙中. 当然,这并不代表这些山的相对位置是固定的,因为后面高度更低的山是有机会插入进来的,所以就可以做到将所有情 ...

  9. codevs 1020 孪生蜘蛛 x

    题目描述 Description 在G城保卫战中,超级孪生蜘蛛Phantom001和Phantom002作为第三层防卫被派往守护内城南端一带极为隐秘的通道. 根据防护中心的消息,敌方已经有一只特种飞蛾 ...

  10. FastDfs单机版搭建

    详细的最新版fastdfs单机版搭建 前言 目前项目是tomcat单机部署的,图片.视频也是上传到tomcat目录下,关键是此项目的主要内容还就是针对图片.视频的,这让我非常担忧:文件服务器的应用是必 ...