分页

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

点击及鼠标悬停分页样式

圆角样式

悬停过度效果

带边框的分页

分页间隔

分页字体大小

居中分页

面包屑导航

框大小

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. PIL 中的 Image 模块

    转载:http://www.cnblogs.com/way_testlife/archive/2011/04/20/2022997.html   PIL 中的 Image 模块 本文是节选自 PIL ...

  2. crontab定时执行shell脚本

    步骤一    首先我们先看一下是否安装了crontab.一般情况下linux系统会自带crontab及crond.如果没有安装,请使用以下指令安装:yum install vixie-cron     ...

  3. VMware虚拟机中的CentOS7安装Nginx后本机无法访问的解决办法

    VMware虚拟机中的CentOS7安装Nginx后本机无法访问的解决办法 在linux上安装nginx 请参考:Linux Centos7 安装 nginx 在虚拟机centos7上安装nginx之 ...

  4. AngularJs 简单实现全选，多选操作(转)

    代码如下: HTML: <section> <pre>{{choseArr}}</pre> 全选: <input type="checkbox&qu ...

  5. Spring Boot 整合 AOP

    一.示例 1.依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  6. Eclipse中配置Python插件

    1.点击Window --->  preferences ,左边的标题栏找到Pydev 2. 在Pydev里找到含有Python的选项,点击,在右侧New,弹出框中找到Python的安放目录下的 ...

  7. 【leetcode】Heaters

    Winter is coming! Your first job during the contest is to design a standard heater with fixed warm r ...

  8. ef复杂模型添加

    模型浏览器 函数导入-添加存储过程名称 添加复杂实体.复杂实体可以手动在xml里面创建.在complextype里面

  9. PKUWC2020爆零记

    抱歉,这么晚才更. 事实是:我都没有去 所以爆零了 QwQ

  10. Python3学习笔记（七）：字典

    在python中,有一种通过名字来引用值的数据结构,这种类型的数据结构成为映射. 字典是Python中唯一内建的映射类型,具有以下特点: 字典中的值是无序的 值存在特定的键(key)下 键(key)可 ...