安信娱乐谁是老板

拼图开发文档

辅助

安信娱乐谁是老板辅助为在页面排版及内容处理中,快速调节元素样式的类操作。

常用结构标签

为了让文档层次分明,H5增加了很多结构类标准,如下表:

标签名称说明
<header>头部区块的标题或引导
<aside>侧栏页面的附属信息
<nav>导航区块的导航内容
<main>主体页面的主体内容
<section>区块内容区块或应用块
<article>文章结构完整且独立的内容部分
<footer>底部区块的尾部或附加信息

媒体查询

在CSS3中,通过媒体查询(media query)功能,实现在不同媒体大小时,使用不同的类;也是实现响应式布局重要的原理。

如以下示例实现768px下显示蓝色背景,在768px上显示为橙色背景效果:

媒体查询
    <div class="demo-media">媒体查询</div>
    <style>
      .demo-media{background-color:#0ae;}
      @media (min-width:768px){
        .demo-media{background-color:#f60;}
      }
    </style>
  

通过媒体查询功能,可实现在不同设备下同一元素的宽、高、颜色、显示等效果。

在框架中,如容器、响应式对齐、响应式显示、网格系统、导航等都使用了媒体查询功能。

容器

容器为放置内容的一个盒子模型元素,为了定义元素的宽度,框架定义了以下几个容器:100%全屏宽的.layout、左右两边有填充的.container及根据终端大小固定的微小宽度.width-mini、小宽度.width-small、中宽度.width-middle、大宽度.width-big、特大宽度.width-large

全屏宽.layout
默认容器.container
微小宽度.width-mini
小宽度.width-small
中宽度.width-middle
大宽度.width-big
特大宽度.width-large
    <div class="layout">全屏宽</div>
    <div class="container">默认容器</div>
    <div class="width-mini">微小宽度</div>
    <div class="width-small">小宽度</div>
    <div class="width-middle">中宽度</div>
    <div class="width-big">大宽度</div>
    <div class="width-large">特大宽度</div>
  

.layout.container没有固定的宽度值,所以可以和有固定宽度值的.width-mini.width-small.width-middle.width-big.width-large叠加使用,如.container .width-small安信娱乐谁是老板为两边带填充小宽度的容器。

响应容器

.container样式为响应式容器,响应式即为应用媒体查询功能,根据终端设备不同显示不同的宽度,在使用响应式的情况下起作用,下表是容器在不同设备下宽度(以默认16px字号计算):

容器样式默认微小屏
576px
小屏
768px
中屏
1024px
大屏
1280px
特大屏
1680px
.layout100%
.container100%-32px540px730px960px1200px1600px

宽度

框架定义了元素宽度样式,名称为width的首字母.w数字安信娱乐谁是老板,数字为1-12,与下节的网格系统数值相同。

.w1
.w2
.w3
.w4
.w5
.w6
.w7
.w8
.w9
.w10
.w11
.w12
    <div class="w1">.w1</div>
    <div class="w2">.w2</div>
    <div class="w3">.w3</div>
    <div class="w4">.w4</div>
    <div class="w5">.w5</div>
    <div class="w6">.w6</div>
    <div class="w7">.w7</div>
    <div class="w8">.w8</div>
    <div class="w9">.w9</div>
    <div class="w10">.w10</div>
    <div class="w11">.w11</div>
    <div class="w12">.w12</div>
  

响应宽度

在不同设备宽下,可根据媒体查询,响应显示不同的宽度,相关样式为:

 默认微小屏小屏中屏大屏特大屏
屏宽自动≥576px≥768px≥1024px≥1280px≥1680px
样式.w*.mini-w*.small-w*.middle-w*.big-w*.large-w*

注:*为数字1-12。

.w9.small-w6.big-w4
    <div class="w9 small-w6 big-w4">.w9.small-w6.big-w4</div>
  
响应效果:实现默认.w9、小屏.w6、大屏.w4效果

字符宽

框架同时定义了固定字符宽度样式,名称为.em数字安信娱乐谁是老板,数字为1-12,即为1-12个字符的宽度。

一二
一二三
一二三四
一二三四五
一二三四五六
一二三四五六七
一二三四五六七八
一二三四五六七八九
一二三四五六七八九十
一二三四五六七八九十一
一二三四五六七八九十一二
    <div class="em1">一</div>
    <div class="em2">一二</div>
    <div class="em3">一二三</div>
    <div class="em4">一二三四</div>
    <div class="em5">一二三四五</div>
    <div class="em6">一二三四五六</div>
    <div class="em7">一二三四五六七</div>
    <div class="em8">一二三四五六七八</div>
    <div class="em9">一二三四五六七八九</div>
    <div class="em10">一二三四五六七八九十</div>
    <div class="em11">一二三四五六七八九十一</div>
    <div class="em12">一二三四五六七八九十一二</div>
  
在需要使用固定字符数量时,可以使用字符宽样式;因固定字符样式常用于标题,在其跟随元素可能还会使用到相同字符宽左边距,所以框架还定义了ml1-12样式供使用,意为margin-left1至12字符宽的左边距。

水平线

水平线在页面中用<hr />表示:


    <hr />
  

分隔水平线

分隔水平线为带文字的水平线,文字需要用span安信娱乐谁是老板包含,同时可以使用对齐样式(下文有介绍),使文字居中或居右:

标题水平线
分隔水平线
    <h6 class="hr"><span>标题水平线</span></h6>
    <div class="hr align-center"><span>分隔水平线</span></div>
  

水平线颜色和大小

应用过程中,也可以使用颜色中的文本色、边框色,改变水平线条的颜色,同时使用.border-mini可使线条变粗:


标题水平线
文字水平线
    <hr class="border-main" />
    <h6 class="hr border-deep align-right"><span>标题水平线</span></h6>
    <div class="hr border-danger text-danger border-mini"><span>文字水平线</span></div>
  

水平线背景色

水平线文字背景色默认使用与body相同的颜色,在较深背景时,差异较为明显,这时给水平线加上相同的背景色即可。

标题水平线
文字水平线
    <div class="bg-info padding radius">
      <h6 class="hr bg-info border-black"><span>标题水平线</span></h6>
      <div class="hr bg-info border-white text-white"><span>文字水平线</span></div>
    </div>
  

引用

引用在页面中用blockquote标签定义,默认的引用样式为:

引用
    <blockquote>引用</blockquote>
  

含背景色

除默认的引用样式外,框架还定义了.quote含背景的引用样式:

引用
    <div class="quote">引用</div>
  

改变颜色

安信娱乐谁是老板应用过程中,也可以使用颜色中的文本色、边框色,改变引用样式的颜色:

引用
引用
    <blockquote class="border-info text-info">引用</blockquote>
    <div class="quote border-danger alert-danger">引用</div>
  

快速浮动

浮动为将元素放在左边还是右边,左浮动为.float-left、右浮动为.float-right;框架也定义了两个清除浮动.float-none.clearfix样式:

左浮动
右浮动
清除浮动
清除浮动
    <div class="float-left">左浮动</div>
    <div class="float-right">右浮动</div>
    <div class="float-none">清除浮动</div>
    <div class="clearfix">清除浮动</div>
  

两个清除浮动差别为:.float-none只清除float浮动效果,还原为本身的无浮动状态;.clearfix为清除float安信娱乐谁是老板浮动后,显示为块结构,也就是重新一整行显示。

浮动显示

在不同设备宽的情况下,展示不同的浮动方式,不同屏的响应命名方式为-样式类,如小屏右浮动.small-float-right

默认微小屏
576px
小屏
768px
中屏
1024px
大屏
1280px
特大屏
1680px
左浮动.float-left.mini-float-left.small-float-left.middle-float-left.big-float-left.large-float-left
右浮动.float-right.mini-float-right.small-float-right.middle-float-right.big-float-right.large-float-right
清除浮动.float-none.mini-float-none.small-float-none.middle-float-none.big-float-none.large-float-none

图片约束

在一个容器中,有时图片的宽会超出容器的宽度,给图片添加.img-auto样式,可使图片最大宽度为容器的宽度,高度按比例缩小:

自动宽图片
    <img class="img-auto" src="..." alt="..." />
  

另外一种情况是图片比容器小,需要占满整个容器,给容器添加.img-full样式,图片可占满整个容器空间:

全尺寸图片
    <img class="img-full" src="..." alt="..." />
  

文字约束

在一个容器中,有时需要对文字的排版做特别处理,如缩进、截断、换行等,为快捷开发,框架定义了相关样式:

文字缩进

文字缩进样式定义为.word-indent,在文本的开头,缩进2个字符。

文字缩进,在文本的开头,缩进2个字符。
    <div class="word-indent">文字缩进<div>
  

文字截断

文字截断,用.word-more安信娱乐谁是老板定义,当内容超过容器的限制时,用...表示隐藏部份。

文字截断测试,需要在限制元素宽和高的情况下使用,超出部份的文字会被截断,用三个点表示,文字不超出则不显示三个点。
    <div class="word-more">文字截断<div>
  

强制换行

强制换行样式定义为.word-break,当文字内容超出容器最大宽度时,超出部份的文字会自动换行。

文字强制换行测试,当文字内容超出容器最大宽度时,超出部份的文字会自动换行,常用于英文文本处理。
    <div class="word-break">文字强制换行<div>
  

强制不换行

强制不换行样式定义为.word-block安信娱乐谁是老板,当文字内容超出容器最大宽度时,超出部份的文字不换行,仍在同一行内显示。

文字强制不换行测试,当文字内容超出容器最大宽度时,超出部份的文字不换行,在一行内显示所有文本。
    <div class="word-block">文字换行<div>
  

字号响应

在不同设备宽的情况下,展示不同的字号大小:

默认微小屏
576px
小屏
768px
中屏
1024px
大屏
1280px
特大屏
1680px
微小号.size-mini.mini-size-mini.small-size-mini.middle-size-mini.big-size-mini.large-size-mini
小号.size-small.mini-size-small.small-size-small.middle-size-small.big-size-small.large-size-small
默认.size.mini-size-middle.small-size-middle.middle-size-middle.big-size-middle.large-size-middle
大号.size-big.mini-size-big.small-size-big.middle-size-big.big-size-big.large-size-big
特大号.size-large.mini-size-large.small-size-large.middle-size-large.big-size-large.large-size-large

对齐方式

对齐方式包含水平方向的左、中、右,以及垂直方式的上、中、下。

水平对齐

左对齐
水平居中
右对齐
    <div class="align-left">左对齐</div>
    <div class="align-center">水平居中</div>
    <div class="align-right">右对齐</div>
  

水平响应对齐

安信娱乐谁是老板在不同设备宽的情况下,展示不同的对齐方式:

默认微小屏
576px
小屏
768px
中屏
1024px
大屏
1280px
特大屏
1680px
左对齐.align-left.mini-align-left.small-align-left.middle-align-left.big-align-left.large-align-left
居中对齐.align-center.mini-align-center.small-align-center.middle-align-center.big-align-center.large-align-center
右对齐.align-right.mini-align-right.small-align-right.middle-align-right.big-align-right.large-align-right

垂直对齐

顶部对齐顶部对齐 顶部对齐垂直居中 顶部对齐底部对齐
    <span class="align-top">顶部对齐</span>
    <span class="align-middle">垂直居中</span>
    <span class="align-bottom">底部对齐</span>
  

行距

行距通常用于文本上下行之间的间际,包含微小行距、小行距、默认行距、大行距及特大行距五个等级;演示中背景色部份为行距的大小,其中微小行距为1em,默认行距与body定义的行距相同。

微小行距
小行距
默认行距
大行距
特大行距
    <div class="line-mini">微小行距</div>
    <div class="line-small">小行距</div>
    <div class="line">默认行距</div>
    <div class="line-big">大行距</div>
    <div class="line-large">特大行距</div>
  

固定位置

将元素固定在页面的上、右、下、左、左上角、左下角、右上角、右下角等位置。

    <div class="fixed-top">上</div>
    <div class="fixed-right">右</div>
    <div class="fixed-bottom">下</div>
    <div class="fixed-left">左</div>
    <div class="fixed-left-top">左上角</div>
    <div class="fixed-left-bottom">左下角</div>
    <div class="fixed-right-top">右上角</div>
    <div class="fixed-right-bottom">右下角</div>
  

显示方式

定义元素的显示及隐藏。

    <div class="show">显示</div>
    <div class="hidden">隐藏</div>
  

响应显示

安信娱乐谁是老板在不同设备宽的情况下,展示不同的显示方式:

默认微小屏
576px
小屏
768px
中屏
1024px
大屏
1280px
特大屏
1680px
显示.show.mini-show.small-show.middle-show.big-show.large-show
隐藏.hidden.mini-hidden.small-hidden.middle-hidden.big-hidden.large-hidden

定位显示

定义元素的内联显示、块显示、相对定位、绝对定位、水平居中等显示方式。

    <div class="inline">内联显示</div>
    <div class="block">块显示</div>
    <div class="relative">相对定位</div>
    <div class="absolute">绝对定位</div>
    <div class="center">水平居中</div>
  

打印响应

在页面打印print时,实现打印时显示.print-show(页面时隐藏状态)和打印时隐藏.print-hidden安信娱乐谁是老板(页面时显示状态)样式:

    <div class="print-show">打印时显示</div>
    <div class="print-hidden">打印时隐藏</div>
  

窗口工具

前进、后退、返回顶部

    <button class="button" data-win="back">后退</button>
    <button class="button" data-win="forward">前进</button>
    <button class="button" data-win="top">返回顶部</button>
  

返回顶部监听

    <button class="button" data-win="top">返回顶部</button>
    <script>
      $(function(){
        $('[data-win="top"]').wintop();
      });
    </script>
  

刷新、打印、关闭窗口

    <button class="button" data-win="refresh">刷新</button>
    <button class="button" data-win="print">打印</button>
    <button class="button" data-win="close">关闭</button>