前端学习一阶段笔记

最新推荐文章于 2021-12-12 17:29:45 发布

野蛮生长001

最新推荐文章于 2021-12-12 17:29:45 发布

阅读量449

点赞数

分类专栏：前端开发文章标签：前端 html css 笔记

本文链接：https://blog.csdn.net/qq_39125684/article/details/83242886

版权

前端开发专栏收录该内容

31 篇文章 1 订阅

订阅专栏

[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] 表单标签

# 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>包裹起来，<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，后一个浮动不会覆盖前一个，前一个浮动的话，后一个会到前一个底下去，并且文字会被挤出来。

元素分为上下两层，背景、边框是下层，文字是上层。

想让块级元素在一行显示，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）响应式的引入方式

方式一：每一种媒体特性引入一张表格

方式二：一张表格样式里写多个媒体特性

@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]：就是找到有设置 name 属性的<p>元素

# E[attr=value]：找到attr属性的值为value的E元素。

p[id=a1]：找到id为p1的<p>元素。

# E[attr~=value]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词

而且前面的'~'不能不写。

p[class=xiao] --> 如此写法找不到上边的<p>标签。

p[class~=xiao] --> 这样才能找到上边的<p>标签。（匹配词列表中的一个词，词之间用空格分开）

# E[attr*=value]：找到属性名为attr并且属性值里包含value的元素。如下：

p[class~=xi] --> 找不到上面的<p>标签

p[class*=xi] --> 只要class中包含的xiao中的一部分，就能找到。（匹配词列表中的某些字符）

# E[attr^=value]：找到attr属性的值是以value开头的。

p[class^=p]：找到上边两个class值以p开头的标签。

# E[attr$=value]：找到attr属性的值是以value结尾的。

p[class$=b]：找到上边三个class值以b结尾的标签。

# E[attr|=value]：找到属性名为attr并且属性值是以value开头或者是以value-开头的元素。

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：表示不可点击的表单控件

# E:enabled：表示可点击的表单控件

# E:checked：表示已选中的checked或radio

# 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">

<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中

[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

实例：

<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）面板

定义一个面板区

面板标题：

方法一：使用 .panel-heading 可以很简单的向面板添加标题容器，

方法二：使用带有 .panel-title 的<h1> ~ <h6>来添加预定义样式的标题

面板主体：

添加一个带 .panel-body 的 <div>

面板脚注：

我们可以在面板中添加脚注，只需要把按钮或副文本放在带有 .panel-footer 的 <div> 中即可

注意：面板脚注不会从带有语境色彩的面板中集成颜色和边框，因为它不是前景中的内容。

警告框：

<div class="alert alert-warning">用户名不能为空</div>

17）快速浮动

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

可视区窗口写手机页面必须要先设置视口

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、忽略自动识别数字为手机号码。

如果要打电话或者发邮件的话用下边的方式

2、QQ浏览器强制竖屏或者横屏

portrait 竖屏

landscape 横屏

3、QQ浏览器强制全屏

4、UC浏览器强制竖屏或横屏

5、UC强制全屏

## 手机端的默认字体

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

野蛮生长001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习一阶段笔记

[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...
复制链接

扫一扫