分页

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

点击及鼠标悬停分页样式

圆角样式

悬停过度效果

带边框的分页

分页间隔

分页字体大小

居中分页

面包屑导航

框大小

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. linux下利用tcpdump抓包工具排查nginx获取客户端真实IP实例

    一.nginx后端负载服务器的API在获取客户端IP时始终只能获取nginx的代理服务器IP,排查nginx配置如下 upstream sms-resp { server ; server ; } s ...

  2. 转(HBuilder 打包流程)

    1.运行HBuilder---百度搜索HBuilder,官网下载安装包,解压,运行HBuilder.exe.注册账号,并登陆 2.新建app---在左边右键,选择新建APP,或者,点击中间的新建app ...

  3. ks代码助解

    代码实现: data_test_2 = {'gd':[1,1,1,1,1,1,0,0,0,0,0,0,0],'score':[1,2,0,2,2,7,4,5,4,0,4,18,np.nan]} dat ...

  4. Hibernate方法save、update、merge、saveOrUpdate及get和load的区别

    在看这几个方法区别之前,有必要了解hibernate实体对象的三种状态,点击查看 http://www.cnblogs.com/Y-S-X/p/8345754.html 一.update 和 merg ...

  5. CSP-S2019游记&拆塔记

    不是拆广州塔 Day -inf 四套NOI模拟降智 Day0 拆了一发新新 本来想复习小圆脸结果拆了3h最后还没带任意门 没有帘子可还行 第一天由于没发现被子可以抽出来就没睡好 Day1 8:30开考 ...

  6. python 面向对象_1

    self #self 是相当于c++的 this指针 class Ball: def setName(self,name): self.name = name def kick(self): prin ...

  7. 为什么second是秒也是第二?

    起源 早期在西方,一小时分为 60 分钟.后来,科学发达了.文明进步了,人们认为一分钟太粗放了.必须划分得更细致,于是就把一分钟划分成 60 等分.由于是对时间的第二次划分,就将新的 60 等分的“单 ...

  8. Java+超大文件上传

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

  9. jenkins 管理员密码重置

    jenkins管理员 admin的密码忘记怎么重置呢? 修改admin的加密密码为123456的加密密码 #jbcrypt:$2a$10$MiIVR0rr/UhQBqT.bBq0QehTiQVqgNp ...

  10. Jmeter -- 上下文关联（JSON提取器）

    目标: 将请求A响应数据的部分内容提取出来,保存成变量供后续请求使用(用在返回格式为json的HTTP请求中) 步骤: 1. 添加JSON Extractor后置处理器 add --> post ...