分页

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

点击及鼠标悬停分页样式

圆角样式

悬停过度效果

带边框的分页

分页间隔

分页字体大小

居中分页

面包屑导航

框大小

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. java高并发实战Netty+协程（Fiber）|系列1（续）|事件驱动模式和零拷贝

    上次讲到事件驱动模式,今天我们来好好分析下netty的事件模式的几个类型. 先从NIO讲起, JAVA NIO方面Selector给Reactor模式提供了基础,Netty结合Selector和Rea ...

  2. linux如何判断上一条命令执行是否正确

    echo $? 如果输出0代表结果正确 如果输出非0代表结果错误

  3. 【优化】SPA项目的基础优化

    开启gzip压缩功能 引入CDN 路由懒加载 某些第三方组件按需加载而不是全部加载 较小的图片资源用base64嵌入src中,减少http请求

  4. vue 解决axios 跨域问题

    闲着没事,假期敲vue 请求数据,总结下vue跨越问题 第一种.服务器服务器不支持跨域请求   1.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分. ...

  5. LAMP 系统性能调优之网络文件系统调优

    LAMP 系统性能调优之网络文件系统调优 2011-03-21 09:35 Sean A. Walberg 网络转载 字号:T | T 使用LAMP系统的用户,都想把自己LAMP性能提高运行的速度提高 ...

  6. CodeForces-449B(单源最短路,思维)

    链接: https://vjudge.net/problem/CodeForces-449B 题意: Jzzhu is the president of country A. There are n ...

  7. Hadoop2.7.4 yarn(HA)集群搭建步骤（CentOS7）

    群节点分配: Park01:Zookeeper.NameNode(active).ResourceManager(active) Park02:Zookeeper.NameNode(standby) ...

  8. 【leetcode】LCP 3. Programmable Robot

    题目如下: 力扣团队买了一个可编程机器人,机器人初始位置在原点(0, 0).小伙伴事先给机器人输入一串指令command,机器人就会无限循环这条指令的步骤进行移动.指令有两种: U: 向y轴正方向移动 ...

  9. vue2.0关于添加属性后视图不能更新的问题

    属性赋值和this.$set 和vue.$set方法我不行 可以用 this.$delete来进行删除后在设置都可以了

  10. html area标签 语法

    html area标签 语法 作用:带有可点击区域的图像映射 说明:<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性(由浏览器决定),所以 ...