[1] 透明色: transparent
元素透明度设置:
标准浏览器: opacity:0.5;
IE: filter:alpha(opacity=0-100)
取值范围:0-1
当元素设置了透明度后,里面的子元素也会透明
透明度颜色:
rgba(0,0,0,0.5);
background-color:rgba(0,0,0,0.5);
[2] <img src="地址" alt="出错显示" title="鼠标移入显示">
[3] 常见的标签分类
块标签 | div h1-h6 p ul li dl dd dt
内联块标签 | img input
内联标签 | span em strong a
[4] 标签的特点
块的特征:
1、默认独占一行
2、没有宽度时,默认撑满一行
3、支持所有的css命令
内联的特征:
1、同排可以继续跟同类标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析
内联块的特征:
1、在一行显示,一行装不下才会换行
2、内容撑开宽度
3、支持所有css命令
4、有内联文本样式的特性-即-文本之前空格会产生间隔,这个元素之间有空格同样会产生间隔
[5] display : block / inline-block / inline / none
[6] visibility:hidden; //让元素隐藏
[7] 盒模型: -- box-sizing:
1、标准盒模型 -- box-sizing:content-box
width只是内容的宽度,不带内边距和边框
元素占位宽 = width + padding + border;
2、怪异盒模型 -- box-sizing:border-box
元素占位宽 = width
[8] margin注意事项:
1)margin 的传递:
如果是块级元素 包含结构 并且父级没有写边框 子元素发生了向上的margin,这个margin会传递给父级
解决:
a.给父级加上边框
b.让父级浮动起来
2)margin 的合并 :
当一个块元素包含在另一个块元素中时(假设没有内边距或边框把外边距分隔开),它们的上和下外边距会发生合并。
也就是说,现在是个嵌套结构的div,两个div的上边挨在一起,现在给外边的加margin-top:10px;里边的加margin-top:1px;
这时候两个盒子同时向下移动10px;
3)水平上:
行内元素不占上下外边距,其左右外边距不会合并。当两个行内元素紧邻的时候,他们之间的距离为左边元素的右外边距,
加右边元素的左外边距。
4)垂直上:
垂直两个块级元素,之间的margin距离,不是上边的下边距加上下边的上边距,两个边距会合并的,这样之间的margin距离
就是大的那个margin。
5)auto只能设置水平值。
总结:包含会传递,上下会合并,左右是叠加。
[9] <a></a>
1)去除下划线:text-decoration:none;
2)页面打开方式:
target="_blank" 在新窗口打开
target="_self" 在本窗口打开(默认值)
3)地址格式:
a.网络地址
b.本地文件地址(相对地址)
c.zip/rar等压缩文件路径 -- 会下载
d.当前页面元素的id,形成锚点
4)伪类:
:hover{鼠标悬停发生的样式}
:link{未访问时的样式}
:visited{访问后的样式}
:active{鼠标单击不动时的样式}
[10] 表格
表格标签:
# caption 表格标题
# table 表格
# thead 表格头
# tbody 表格主体
# tfoot 表格尾部
# tr 表格行
# th 元素定义表头
# td 元素定义表格单元
# colspan <td colspan='2'>指定单元格可横跨的列数</td>
# rowspan <td rowspan='2'>指定单元格可横跨的行数</td>
表格样式重置
# table{border-collapse:collapse;} 单元格间隙合并
# th,td{padding:0} 重置单元格默认填充
注意:
# display:table; --> 既不是内联元素,也不是块级元素,也不是内联块元素。
[11] 表单标签
<input type="" name="" vlaue="" class="" id="">
# text 文本框
@ placeholder="请输入用户名" -- 提示性文字
# password 密码框
# radio 单选按钮
@ 单选和复选同组元素name值相同
# checkbox 复选按钮
@ 默认选中 checked
# submit 提交
# reset 重置
# button 按钮
# image 图片按钮
# file 上传
# hidden 隐藏
<select>标签:定义一个下拉菜单
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<form>标签:
# action : 要提交到的地址
# method : 提交的方式(GET/POST)
【拓展】
1)现在有如下代码:
用户名:<input type="text" placeholder="请输入用户名">
当前:现在是只有点击输入文本框的时候文本框才会出现光标,
需求:我现在是想点击 '用户名:' 也能显示文本框光标。
实现:
<label for="in">用户名:</label>
<input id="in" type="text" placeholder="请输入用户名">
把 '用户名:' 用<label>包裹起来,<label>的 for 属性的值要和<input>的 id 值相同。
2)提示文字的兼容性设置:
input::-webkit-input-placeholder{
/* Chrome */
color: red;
}
input::-moz-placeholder{
/* firefox */
color:red;
}
3)表单常用属性:
# disabled 输入框禁止输入
# maxlength 输入框value的最大长度
# checked 单选按钮和复选按钮的默认选中
# selected select>option 的默认选中
[12] overflow 超出部分
常用:
overflow:hidden; 超出部分隐藏
overflow:scroll; 不管有没有超出,都有滚动条
overflow:auto; 超出才有滚动条
[13] 弹性盒模型
https://www.runoob.com/w3cnote/flex-grammar.html
[14] 浮动
文档流:文档流就是[文档中可显示对象]在排列中所占据的位置
内容宽/高 width(height)
可视元素宽/高 内容宽高 + padding + border;
文档流宽/高 内容宽高 + padding + border + margin;
浮动后:
1、可以让块元素在一行显示
2、内联元素不能设置宽高属性,并且换行会产生空隙。浮动之后可以让内联元素支持宽高的设置,并且换行不会产生间隙。
3、脱离文档流,按照指定方向移动,当浮动元素碰到父级的边缘或者是另一个浮动元素的时候会停止
5、提升层级--半层。两个div,后一个浮动不会覆盖前一个,前一个浮动的话,后一个会到前一个底下去,并且文字会被挤出来。
元素分为上下两层,背景、边框是下层,文字是上层。
1)
想让块级元素在一行显示,display:inline-block;也能做到,为什么用浮动呢?
因为内联元素和内联块元素换行会产生空隙。
而且,inline-block在IE6/7/8下是有兼容性问题的。
所以,让块元素在一行显示的时候,不要用inline-block.
2)清除浮动:
清除浮动元素对页面的影响。
clear : left | right | both | none | inheiit ; 元素的某个方向上不能有浮动元素。
加在浮动元素旁边受影响的元素身上。
注意:
1、清除浮动只对块元素有效。
2、对方为比较敏感。
3)清除浮动的方法
1、加高
如果父级元素是靠子级元素的内容撑开的,给子元素设置浮动。子元素就撑不开父级元素了,下边的元素就会上来。所以给父元素加高也是一种清除浮动的方法。
问题:扩展性不好-如果元素的高度不确定,就没法用了。
2、父级浮动
问题:页面中所有元素都需要加浮动,margin左右auto失效。
3、inline-block 清浮动方法
问题:margin左右auto失效
4、空标签清浮动
在浮动元素后面,同级元素,添加一个空标签,并设置属性,clear:both;
问题:IE6 最小高度 19px;
5、<br>标签清除浮动
问题:不符合样式结构相分离的原则
6、after伪类清浮动(主流)
:after --- 给元素的最后添加内容。
/* 添加到父级身上--当子级浮动,父级塌缩时使用 */
.clear:after{
/* 没有内容就为空,必须要有content */
content: "";
/* 是以内联元素形式添加的内容 */
display: block;
/* 清除两侧浮动 */
clear: both;
}
/* 兼容IE6 */
.clear{
zoom: 1;
}
[15] vertical-align:top; 也可以解决图片换行产生间隙的问题。
[16] 定位:position
相对定位:position:relative;
# 相对于自己的原始位置进行定位,元素移动之后,原来的位置会被保留。移动出去后的位置不再占有。
# 如果没有设置偏移量,对元素本身没有任何影响
# 不影响元素本身的特性
# 提升层级
绝对定位:position:absolute;
# 相对于已经定位的父级元素发生偏移,如果父级元素都没有定位,则根据document定位。
# 使元素完全脱离文档流,提升层级为一层。
# 使内嵌元素支持宽高,并且换行不会产生间隙。
# 块级元素如果没有设置宽度,那么宽度由内容撑开。
固定定位:position:fixed;
# 与绝对定位特性基本一致,差别是始终相对于document进行定位。
# IE6不支持
[17] 层级
定位元素里 相邻的元素 层级比前面的高
z-index:数值;
表示给定位元素设置层级,一般从1开始设置。
当定位元素没有设置z-index的时候,范围是0-1;
层级比较:
比较层级的话是同级元素进行比较,就比如我这里现在有两个块级元素a/b,a的层级高,因为两个都是绝对定位,所以现在a覆盖了b
但是如果现在给b的子元素这是一个非常高的层级,b的子元素会覆盖a吗?
答案是不会的。因为比较层级是同级元素进行比较。
[18] 响应式开发
响应不同的终端,显示页面
1)响应的设备分类
@media
all 所有媒体
Print 打印、预览
screen 彩屏设备
speech '听觉'类似的媒体类型
写法:
@media all {
div{
div的样式
}
}
2)关键字
@media only 设备类型
只有在某种特定的设备上 识别
@media only print and (min-width:200px){}
and
用来连接媒体类型和媒体特性的
@media all and (min-width:200px) and (max-width:500px){}
3)媒体特性--分辨率
min-width:200px
当屏幕大小,大于等于本属性的值的时候识别。
max-width:1200px
当屏幕大小,小于等于本属性的值的时候识别。
@media(orientation:portrait)
屏幕垂直
@media(orientation:landscape)
屏幕水平
4)响应式的引入方式
方式一:每一种媒体特性引入一张表格
<link rel="stylesheet" href="./1.css" media="all and(min-width:400px)" />
方式二:一张表格样式里写多个媒体特性
@media all and (max-width:800px){}
5)常用的分辨率
1881以上
1250-1880
992-1249
768-991
768以下
[19] css3新增的内容(上)
1)选择器(IE7以上支持)
E : Element 元素
attr : attribute 属性
# E[attr]:选取有attr属性的E元素。找属性名忽略属性值。
<p name="p1"></p>
p[name]:就是找到有设置 name 属性的<p>元素
# E[attr=value]:找到attr属性的值为value的E元素。
<p id="a1"></p>
p[id=a1]:找到id为p1的<p>元素。
# E[attr~=value]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词
而且前面的'~'不能不写。
<p class='xiao da'></p>
p[class=xiao] --> 如此写法找不到上边的<p>标签。
p[class~=xiao] --> 这样才能找到上边的<p>标签。(匹配词列表中的一个词,词之间用空格分开)
# E[attr*=value]:找到属性名为attr并且属性值里包含value的元素。如下:
<p class='xiao da'></p>
p[class~=xi] --> 找不到上面的<p>标签
p[class*=xi] --> 只要class中包含的xiao中的一部分,就能找到。(匹配词列表中的某些字符)
# E[attr^=value]:找到attr属性的值是以value开头的。
<p class='p1'></p>
<p class='p2'></p>
p[class^=p]:找到上边两个class值以p开头的标签。
# E[attr$=value]:找到attr属性的值是以value结尾的。
<p class="pa"></p>
<p class="pb"></p>
<p class="pb"></p>
p[class$=b]:找到上边三个class值以b结尾的标签。
# E[attr|=value]:找到属性名为attr并且属性值是以value开头或者是以value-开头的元素。
<p class="p">1</p>
<p class="p-b">2</p>
<p class="pb">3</p>
p[class|=p]:只能选中class为p,就是p不是p开头。或者p-开头的,比如这里只能选中前两个。
2)结构性伪类
# E:nth-child(n):表示E父元素中的第n个子节点。且类型为E
div p:nth-child(2):首先找到div中的第二个元素,如果这个元素正好是p元素,就拿到它,如果不是就略过。
p:nth-child(odd):匹配奇数行
p:nth-child(even):匹配偶数行
p:nth-child(2n):匹配偶数行
# E:nth-last-child(n):表示E父元素中的第n个子节点。且类型为E。从后往前找。
# E:nth-of-type(n):表示父元素类型为E的第n个节点
div p:nth-of-type(2):表示第二个类型为E的节点。
# E:nth-last-of-type(n):表示父元素类型为E的第n个节点,从后往前数。
## 注意:nth-child 和 nth-of-type 看上去差不多,其实不然,nth-child是先找到第n个标签,再判断这个标签是不是E标签
如果是,则选中,如果不是,则不会选中任何元素。而 nth-of-type 则是先找到所有的E元素,在从这些E元素中找到第二个。
# E:empty:表示E元素中没有子节点,注意,是没有任何节点,包括文本节点和元素节点注释节点等。
# E:first-child:匹配其父元素中的第一个子元素。
p:first-child
匹配 <p> 的父元素的第一个<p>元素
# E:last-child :匹配其父元素中的最后个子元素。
p:last-child
匹配p的父元素中最后一个p元素.
# E:first-of-type:表示父元素类型为E的第1个节点,和:nth-of-type(1)是一个意思。
# E:last-of-type:表示父元素类型为E的最后一个节点,和:nth-last-of-type(1)是一个意思。
# E:only-child:表示E元素中只有一个子节点,注意:子节点不包含文本节点
# E:only-of-type:表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。
3)选择器伪类
# E:target:表示当前的URL片段的元素类型,这个元素必须是E.
# E:disabled:表示不可点击的表单控件
<input type="button" value="禁止点击" disabled>
# E:enabled:表示可点击的表单控件
# E:checked:表示已选中的checked或radio
<input type="checkbox" checked>
# E:first-line:表示E元素中的第一行
# E:first-letter:表示E元素中的第一个字符
# E::selection:表示E元素在用户选中文字时(注意:双冒号)
# E:before:生成内容在E元素前
div:before{
content: '前边';
}
# E:after:生成内容在E元素后
div:after{
content: '后边';
}
4)文字阴影
text-shadow:x y blur color;
参数说明:
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
简单用法:
text-shadow:2px 2px 4px #000;
阴影叠加:
text-shadow:2px 2px 4px red,2px 2px 4px green;
先渲染前面的,在渲染后面的
文本阴影如果加很多层会很卡很卡。
5)文字描边
text-stroke:宽度 颜色;
text-stroke:3px red;
有兼容问题:
前缀 浏览器
-webkit- chrome、safari
-moz- firefox
-ms- IE
-o- opera
6)省略文本的处理方式
text-overflow: clip / ellipsis;
clip:无省略号
ellipsis:有省略号
一般是这几个属性一块使用
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
7)圆角
border-radius:1-4个数字 / 1-4个数字;
前面是水平,后面是垂直。
不加'/'则水平和垂直一样。
8)美化表单
<input id="ch" type="checkbox"/>
<label for="ch"></label>
input{
display: none;
}
label{
width: 50px;
height: 50px;
float: left;
border: 1px solid #999;
border-radius: 10px;
}
input:checked+label{
background-color: #4199D7;
}
input:checked+label -- input下的第一个label
input:checked~label -- input下的所有label
9)背景裁切
background-clip:;
裁切背景
值:
padding-box: 从padding区域(不含padding)开始向外裁剪背景。
border-box: 从border区域(不含border)开始向外裁剪背景。
content-box: 从content区域开始向外裁剪背景。
text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。
background-origin:;
从哪里开始显示背景
值:
padding-box: 从padding区域(含padding)开始显示背景图像。
border-box: 从border区域(含border)开始显示背景图像。
content-box: 从content区域开始显示背景图像。
[20] css3新增的内容(下)
1)过渡属性
## 要看到哪个物体运动,就把过渡属性加到哪个物体身上。
## 过度属性只对属性值为数值的属性才有效 对颜色值也有效。背景图也可以过渡,但是图片标签不能。
## transition:;
值:
# 过渡的属性,默认是all
# 过渡时间,时间可以为小数
# 延迟时间,如果只有一个时间值,那这个时间是过渡时间,如果有两个,后面的时间值是延迟时间。
# 速度变化
linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
2)css3中的2d变换
### transform 转换;
## 旋转
# rotate(角度deg)
# 默认是0deg,顺时针转动。可以填写负数。
## 旋转基点
# transform-origin
# 默认是元素的中心点
# 设置方式一:方向 ----- top left center等
# 设置方式二:数值坐标-- transform-origin:20px 50px;
## 倾斜
# skew( x角度deg , y角度 )
# skewX()默认
# skewY()
## 缩放
# scale( 数字-表示比例 )
可以是负数,但是最好不要写负数。因为负数不是官方写法,可以写小数。
# scaleX() 缩放宽
# scaleY() 缩放高
## 位移
# translate()
# translateX()
# translateY()
以上这些旋转、倾斜、缩放、位移都是transform的值。
3)css中的3d变换
# 如果要进行3d开发,首先要创建一个3d空间。把父级变成一个3d的空间。
transform-style: preserve-3d;
# 设置景深,距离物体的视觉深度,一般是800px
perspective: 800px;
* 3d空间的设置和景深都是设置在父元素上,.wrap上。
# 属于3d运动的属性值
rotateX()
rotateY()
translateZ()
# 旋转基点:
围绕Y轴 left right center
围绕X轴 top bottom center
围绕Z轴 left top / left bottom / right top / right bottom / center
4)css3中的动画
@keyframes 关键帧
1、定义运动动画轨迹
2、把运动轨迹绑定在元素上 animation
3、运动速度:linear:匀速 | ease-in: 由慢到快 | ease-out: 由快到慢 | ease-in-out: 由慢到快再到慢。
4、运动的次数:默认一次 | 数值(写几次运动几次) | infinite 无限次
5、封偶次运动:alternate 运动过去在运动回来,回来也算一次运动。
6、停留位置:默认是在初始位置停留,forwards:在目标点停留-也就是100%的位置
7、停止动画:animation-play-state: paused ; 加在绑定动画的元素上。
animation:动画名称 动画时间 速度变化 运动次数 [alternate];
/*
一、定义动画轨迹
定义动画的关键字@keyframes和动画名称move
from-开始 | to-结束
0% - 100%
*/
@keyframes move{
from{
width: 200px;
}
to{
width: 1000px;
}
}
div{
width: 200px;
height: 200px;
background-color: red;
/*
二、给元素绑定动画 :动画名称 动画时间 速度变化 运动次数
*/
animation: move 2s linear 5;
}
[21] Bootstrap
1)准备工作
# 去官网下载bootstrap文件,将里边的css,js文件引入。
# 下载Bootstrap3 -> 下载用于生产环境的Bootstrap
# bootstrap.min.css 是压缩版的,体积较小。
# bootstrap.min.js 需要基于 jquery.min.js 才能运行。
<!--
2、设置meta 配置适应移动设备
width属性:如果网站将在不同分辨率的设备上浏览,device-width 将保证它能正确呈现在不同设备上。
initial-scale=1.0:确保网页加载时会以1:1的比例呈现,不会有任何缩放。
-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 1、引入文件 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
2)容器
# 固定布局:container
# 流体布局:container-fluid
# container 布局有左右15px的padding值,但是row有左右-15px的margin值,col-xs-12等又有左右15px的padding值。
3)栅格系统
栅格系统:
将页面的宽度平均分成12份。每一份的宽度取决于父级的宽度,如果父级宽度有变动,每一份的宽度也会变化。
如果一行的份数超过了12份,就会到下一行去。
实际需求:如果需求如下表,该怎么写呢?
实现:
那四个类型都使用,当分辨率小了的时候,大分辨率的分的份就失效的,小的就生效了,但是这样的话问题就来了,
为什么大分辨率的时候,生效的是lg而不是xs呢?xs不是在任何情况下都有效吗?
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
</div>
4)清浮动
当第一行的元素多与12份的时候,盛不下的会到下一行,但是如果这时候,第一行有个元素特别高的话,就会导致本来要到下一行的元素到
这个高的上一行这里就被挡住了,如下。
那这个时候太怎么办呢?
加上一个空元素,class为clearfix来清除浮动,代码如下:
<div class="row">
<div class="col-lg-3">所期望的哇无大1所期望的哇无大无多1所期望的哇无大无多1所期望的哇无大无多</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="clearfix"></div>
<div class="col-lg-5">4</div>
</div>
5)偏移:
# 最多可以向右偏移12个格子。
# 如果一行有多列,最多向右偏移的是剩下的空间。
6)排序
## 偏移与排序的相同点
如果一行只有一列,忽略这一列的宽度,始终最多可以向右偏移12个格子,超过12个就会失效。
## 偏移与排序的区别
1、偏移只能向右偏移,排序可以是往左也可以是往右。
2、如果有多个元素, 用偏移做的话,一行排不下回跳到下一行。而排序不会。
7)thumbnail
在图像的周围添加添加带有 class值为 thumbnail 的<a>标签。
这会在四周分别添加一个4像素的padding,和一个灰色边框。当鼠标悬停在图像上时,会动画显示出图像轮廓。
<a href="#" class="thumbnail">
<img src="img_lzq/4.jpg" alt="">
</a>
8)caption
class="caption",该区域内的内容四周都有padding值,并且字体颜色是黑色,和thumbnail搭配使用。
<div class="col-lg-4 thumbnail">
<a href="#">
<img src="img_lzq/4.jpg" alt="">
</a>
<div class="caption">
<h3>标题</h3>
<p>内容</p>
</div>
</div>
9)Bootstrap表格
Bootstrap提供了一个清晰的创建表格的布局。下表列出了Bootstrap支持的一些元素。
10)Bootstrap 中的表单
Bootstrap提供了下列类型的表单布局:
# 垂直表单
# 内联表单
# 水平表单
[a] 垂直或基本表单
# 向父<form>中添加role="form",(role="form"这是个语义化的属性,是给浏览器和搜索引擎看的,加不加都不会影响)
# 把标签和控件放在一个带有 class="form-group" 的<dov>中,这是获取最佳间距所必需的。
# form-control
向所有的文本元素<input>、<textarea>、<select>添加 class="form-control"。那么这个表单元素的宽度会和父级保持一致。
<form action="">
<div class="row">
<div class="col-lg-5 form-group">
<input type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-lg-5 form-group">
<input type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-lg-5 form-group">
<input type="text" class="form-control">
</div>
</div>
</form>
[b] 内联表单
# 如果需要添加一个表单,它的所有元素都是内联的,向左对齐的,标签是并排的,就向<form>标签中添加 class="form-inline"
[c] 水平表单,form-group 样式不同了,并且内容是右对齐。
# 向父<form>元素添加 class="form-horizontal"。
# 把标签和控件放在一个带有 class="form-group" 的 <div>中
# 向标签添加 class="control-label"
[d] tabindex:数值
是输入框的光标接收tab键时的切换顺序 从1开始
11)按钮
<input type="button" value="Button" class="btn btn-primary">
按钮组:
按钮是内联块元素,换行会产生间隙,但是如果把按钮放到按钮组中,间隙会被消除。
12)导航
12.1)导航栏
创建一个默认的导航栏的步骤如下:
# 向<nav>标签添加 .navbar .navbar-default
# 向上面的元素添加 role="navigation",有助于增加可访问性。
# 向<div>元素添加一个标题 .navbar-header,内部包含了带有 .navbar-brand 的 <a> 元素,这会让文本看起来大一号。
# 为了向导航栏添加链接,只需简单的添加带有 .nav .navbar-nav 的无序列表即可。
-------------------------------------
实例:
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand"></a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">js</a></li>
<li><a href="#">css</a></li>
<li><a href="#">html</a></li>
</ul>
</nav>
------------------------------------
导航栏带下拉菜单:
<ul class="nav nav-tabs nav-justified ">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">个人中心</a></li>
<li class="disabled"><a href="#">博客</a></li>
<!-- 下拉菜单开始 *注意,下拉的ul也包在导航的li里 -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
我的文章<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">此去经年</a></li>
<li><a href="#">应是良辰</a></li>
<li><a href="#">兰舟催发</a></li>
</ul>
</li>
<!-- 下拉菜单结束 -->
</ul>
-----------------------------------------
13)图片
14)字体图标
## Glyphicons 字体图标
[1] 使用之前要先把fonts文件夹放到项目中
[2] 然后使用那个图标就将那个图标放到class中
<div class="glyphicon glyphicon-console"></div>
[3] 如果是按钮上需要是用图标,最好是在按钮里边再设置一个标签,不然的话,图标和文字的间距不好控制
<div class="btn btn-primary">
<span class="glyphicon glyphicon-object-align-vertical"></span>
button
</div>
[4] 如果fonts文件位置修改了,可以打开bootstrap.css源码文件,搜索 font-face,下面有src,自己修改路径。
## Icon 图标
[1] 地址:http://www.bootcss.com/p/font-awesome/
下载 font 图标库。
拿到里边的font文件夹,放到项目中
[2] 需要引入 font-awesome.css 字体文件才能使用
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
[3] 使用:<div class="icon-github-alt"></div>
15)下拉菜单
使用之前要引入三个文件;
| bootstrap.min.css
| jquery
| bootstrap.min.js
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
实例:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" >
下拉列表
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li class="navbar-header"><a href="#">第一部分</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
<li class="divider"></li>
<li><a href="#">选项四</a></li>
</ul>
</div>
16)面板
定义一个面板区
<div class="panel panel-primary">
面板标题:
方法一:使用 .panel-heading 可以很简单的向面板添加标题容器,
方法二:使用带有 .panel-title 的<h1> ~ <h6>来添加预定义样式的标题
面板主体:
添加一个带 .panel-body 的 <div>
面板脚注:
我们可以在面板中添加脚注,只需要把按钮或副文本放在带有 .panel-footer 的 <div> 中即可
注意:面板脚注不会从带有语境色彩的面板中集成颜色和边框,因为它不是前景中的内容。
警告框:
<div class="alert alert-warning">用户名不能为空</div>
17)快速浮动
<div class="pull-left">向左浮动</div>
<div class="pull-right">向右浮动</div>
18)导航条案例:
+========================================================================+
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 【1】右侧小分辨率显示出来的按钮和左侧的logo -->
<div class="navbar-header">
<!-- 小分辨率出现的按钮 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#gx" >
<!-- 小图标的三条线 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 最左侧的logo -->
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- 【1】结束 -->
<!-- 【2】平时显示,小分辨率消失,点击按钮显示 -->
<div class="collapse navbar-collapse" id="gx">
<!-- 左侧的 -->
<ul class="nav navbar-nav">
<!-- 两个普通的标签 -->
<li><a href="#">Link</a></li>
<!-- 下拉框 -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
</ul>
</li>
</ul>
<!-- 输入框区域 -->
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!-- 右侧的 -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--【2】结束 -->
</div>
</nav>
+=========================================================================+
+-Bootstrap英文单词记录------------------------------------------------------------------------------+
container /kən'tenɚ/ 容器
fluid /'fluɪd/ 流体
column /'kɑləm/ 列
justify /'dʒʌstɪfaɪd/ 调整
control /kən'trol/ 控制
toggle /'tɑɡl/ 开关
dropdown 下拉
caret /'kærət/ 插入符号
default /dɪ'fɔlt/ 系统默认值
+---------------------------------------------------------------------------------------------------+
[22] 移动端布局
## 视口 viewport
可视区窗口 写手机页面必须要先设置视口
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
1、width = device-width 设置视口宽度等于设备宽度
如果写了 <meta name="viewport"> 没有设置视口宽度,默认是980
但是手机屏幕宽度是400,我们现在把980px的东西放在400px的屏幕中显示肯定要缩小啊
所以要设置视口宽度,如果写成像 width=400 ,是一个固定值。在ios下是不兼容的。
所以让 width = device-width,宽度=设备宽
2、user-scalable 是否允许用户双指缩放 (yes | no)
3、initial-scale 初始比例,当初始比例小于1的时候,元素会跟着缩小,通过扩大视口宽度来让元素变小的。
4、minimum-scale:最小缩放尺寸 minimum=1
5、maximum-scale:最大缩放尺寸 maximum=1
6、devicePixelRatio:像素比
1334 * 750 物理像素
667 * 375 css像素(px)
而像素比就是:物理像素/css像素
像素比是几,就相当于1个css像素尺寸可以放多少个物理尺寸
## <meta>的一些常用的设置
1、忽略自动识别数字为手机号码。
<meta name="format-detection" content="telephone=no,email=no" />
如果要打电话或者发邮件的话用下边的方式
<a href="tel:15615239323">15615239323</a>
<a href="mailto:123456@qq.com">123456@qq.com</a>
2、QQ浏览器强制竖屏或者横屏
<meta name="x5-orientation" content="portrait || landscape">
portrait 竖屏
landscape 横屏
3、QQ浏览器强制全屏
<meta name="x5-fullscreen" content="true">
4、UC浏览器强制竖屏或横屏
<meta name="screen-orientation" content="portrait || landscape">
5、UC强制全屏
<meta name="full-screen" content="yes">
## 手机端的默认字体
font-family: helvetica;
## 去除<a><input>按下产生的阴影
a,input{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
## 解决ios下圆角问题
input[type=button]{
border-radius: 0;
-webkit-appearance: none;
}
## rem 根据根元素<html>的字体大小来设置
html{font-size:60px} 1rem=60px
html{font-size:80px} 1rem=80px
## (function(){
var html = document.documentElement;
// 获取到不同屏幕的尺寸
var wHtml = html.getBoundingClientRect().width;
//html{font-size : wHtml/16}
// html.style.fontSize = wHtml / 16 + 'px';
html.style.fontSize = wHtml / 7.5 + 'px';
})()
1rem = 100px