一.HTML
1.前言与常用标签
浏览器 | 内核 | 备注 |
---|---|---|
IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
firefox | Gecko | 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了)。苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。 |
chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
Opera | blink | 现在跟随chrome用blink内核。 |
Web标准构成:主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
web标准小结
- web标准有三层结构,分别是结构(html)、表现(css)和行为(javascript)
- 结构类似人的身体, 表现类似人的着装, 行为类似人的行为动作
- 理想状态下,他们三层都是独立的, 放到不同的文件里面
head 头部. 标题 title 文档标题
标签名 | 定义 | 说明 |
---|---|---|
标题标签 | 作为标题使用,并且依据重要性递减 | |
段落标签 | 可以把 HTML 文档分割为若干段落 | |
| 水平线标签 | 没啥可说的,就是一条线 |
换行标签 | ||
div标签 | 用来布局的,但是现在一行只能放一个div | |
span标签 | 用来布局的,一行上可以放好多个span |
标签 | 显示效果 |
---|---|
b或strong | 粗体 |
i或em | 斜体 |
s或del | 加删除线 |
u或ins | 加下划线 |
b 只是加粗 strong 除了可以加粗还有 强调的意思, 语义更强烈。
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图像的路径 |
alt | 文本 | 图像不能显示时的替换文本 |
title | 文本 | 鼠标悬停时显示的内容 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的宽度 |
border | 数字 | 设置图像边框的宽度 |
**注意: **
-
标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
-
属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
-
采取 键值对 的格式 key=“value” 的格式
链接标签
<a href="跳转的路径">文字或图片</a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,__blank为在新窗口中打开方式。 |
相对路径
路径分类 | 符号 |
---|---|
同一级路径 | |
下一级路径 | “/” |
上一级路径 | “…/” |
锚点定位
- 使用相应的id名标注跳转目标的位置。 (找目标)
第2集
2. 使用 链接文本创建链接文本(被点击的) (拉关系) 我也有一个姓毕的姥爷..base标签
- base 可以设置整体链接的打开状态
- base 写到 之间
- 把所有的连接 都默认添加 target="_blank" 在新窗口中打开链接
预格式化文本pre
标签可定义预格式化的文本。被包围在标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
特殊字符
大于号 >
小于号 <
空格  
2.表格table
表格作用:
存在即是合理的。 表格的现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表
格式数据
- table用于定义一个表格标签。
- tr标签 用于定义表格中的行,必须嵌套在 table标签中。
- td 用于定义表格中的单元格,必须嵌套在标签中。
**总结: **
-
表格的主要目的是用来显示特殊数据的
-
一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成,没有列的标签
- 中只能嵌套 类的单元格
- 标签,他就像一个容器,可以容纳所有的元素
表格属性 重点记住 cellspacing 、 cellpadding
属性名 | 含义 | 常用属性值 |
---|---|---|
border | 设置表格的边框(border="0"为无边框) | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为2像素) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1像素) |
width | 设置表格宽度 | 像素值 |
height | 设置表格高度 | 像素值 |
align | 这是表格在网页中的水平对齐方式 | left、center、right |
表头单元格标签th
- 作用:
- 一般表头单元格位于表格的第一行或第一列,并且文本加粗居中
- 语法:
- 只需用表头标签<th></th>替代相应的单元格标签<td></td>即可
表格标题caption
- caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上。
- caption 标签必须紧随 table 标签之后。
- 这个标签只存在 表格里面才有意义。
合并单元格
- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan=“合并单元格的个数”
合并的顺序我们按照 先上 后下 先左 后右 的顺序
- 先确定是跨行还是跨列合并
- 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 :
- 删除多余的单元格 单元格
3.列表和表单
列表
无序列表ul
1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
有序列表ol
- 列表项1
- 列表项2
- 列表项3
- ......
自定义列表
-
名词1
- 名词1解释1
- 名词1解释2 ... 名词2
- 名词2解释1
- 名词2解释2 ...
标签名 | 定义 | 说明 |
---|---|---|
| 无序标签 | 里面只能包含li 没有顺序,我们以后布局中最常用的列表 |
| 有序标签 | 里面只能包含li 有顺序, 使用情况较少 |
| 自定义列表 | 里面有2个兄弟, dt 和 dd |
表单
input控件
- input 输入的意思
- <input />标签为单标签
- type属性设置不同的属性值用来指定不同的控件类型
- 除了type属性还有别的属性
type的属性 | 描述 |
---|---|
text | 文本框 |
password | 密码框 |
radio | 单选按钮 |
checkbox | 复选框 |
button | 普通按钮 |
submit | 提交按钮 |
reset | 重置按钮 |
image | 图像形式提交按钮 |
file | 文件域 |
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 控件的名称 |
value | 由用户自定义 | input控件中的默认文本值 |
size | 正整数 | input控件在页面中的显示宽度 |
checked | checked | 定义选择控件默认被选中的项 |
maxlength | 正整数 | 控件允许输入的最多字符数 |
checked="checked"表示就默认选中了
label标签
作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
1.第一种用法就是用label直接包括input表单。
2.第二种用法 for 属性规定 label 与哪个表单元素绑定
textarea文本域
- 语法:
<textarea >
文本内容
</textarea>
-
作用:
通过textarea控件可以轻松地创建多行文本输入框.
cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用
select下拉列表
选项1 选项2 选项3 ...- <select> 中至少包含一对 option
- 在option 中定义selected =" selected "时,当前项即为默认选中项。
form表单域
各种表单控件属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
二.CSS
1.样式、选择器、文字文本样式
行内样式
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>
内部样式
外部样式
属性 | 作用 |
---|---|
rel | 定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。 |
type | 定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。我们都可以省略 |
href | 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。 |
选择器 CSS选择器干啥的? 选择标签用的, 把我们想要的标签选择出来
选择器 | 作用 | 缺点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 较多 | p { color:red;} |
类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 不推荐使用 | * {color: red;} |
文字文本样式font
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 我们通常用的单位是px 像素,一定要跟上单位,谷歌浏览器默认的文字大小为16px,最小为12px |
font-family | 字体 | 实际工作中按照团队约定来写字体 p{font-family: Arial,“Microsoft Yahei”, “微软雅黑”;} |
font-weight | 字体粗细 | 记住加粗是 700 或者 bold , 不加粗 是 normal 或者 400 记住数字不要跟单位 数值在100-900之间 |
font-style | 字体样式 | 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal |
font | 字体连写 | 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 写法: 选择器 { font: font-style font-weight font-size/line-height font-family;}必须有font-size和font-family属性 |
css外观属性
属性 | 表示 | 注意点 |
---|---|---|
color | 颜色 | 我们通常用 十六进制 比如 而且是简写形式 #fff |
line-height | 行高 | 控制行与行之间的距离 |
text-align | 水平对齐 | 可以设定文字水平的对齐方式 left左对齐(默认);right右对齐;center居中对齐 |
text-indent | 首行缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; 1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度 |
text-decoration | 文本修饰 | 记住 添加 下划线 underline ; 取消下划线 none; |
复合选择器
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是**>** .nav>p |
交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
伪类选择器
- a:link /* 未访问的链接 */
- a:visited /* 已访问的链接 */
- a:hover /* 鼠标移动到链接上 */
- a:active /* 选定的链接 */
2.display、行高、背景、特性
标签显示模式display
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素block | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素inline | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
行内块元素inline-block | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
- 块转行内:display:inline;
- 行内转块:display:block;
- 块、行内元素转换为行内块: display: inline-block;
行高line-height
- 如果 行高 等 高度 文字会 垂直居中
- 如果行高 大于 高度 文字会 偏下
- 如果行高小于高度 文字会 偏上
CSS 背景(background)
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 语法:background-color:颜色值; 默认的值是 transparent 透明的 |
background-image | 背景图片 | url(图片路径), none(无背景图,默认的) background-image : none | url (url) |
background-repeat | 是否平铺 | repeat 背景图像在纵向和横向上平铺(默认的) /no-repeat 不平铺 /repeat-x 在横向上平铺/repeat-y 在纵向平铺 |
background-position | 背景位置 | length(百分比,长度值)/position(方位名词 : top | center | bottom | left | center | right) 分别是x 和 y坐标, 切记 如果有 精确数值单位,则必须按照先X 后Y 的写法 |
background-attachment | 背景固定还是滚动 | scroll(随对象内容滚动) / fixed(背景图像固定) |
背景简写 | 更简单 | background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值,最后一个参数是alpha 透明度 取值范围 0~1之间,低于 ie9 的版本是不支持的 |
CSS层叠性
- 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
- 样式不冲突,不会层叠
CSS继承性
子标签会继承父标签的某些样式,如文本颜色和字号。
想要设置一个可继承的属性,只需将它应用于父元素即可。
CSS优先级 权重
标签选择器 | 计算权重公式 |
---|---|
继承或者 * | 0,0,0,0 |
每个元素(标签选择器) | 0,0,0,1 |
每个类,伪类 | 0,0,1,0 |
每个ID | 0,1,0,0 |
每个行内样式 style="" | 1,0,0,0 |
每个!important 重要的 | ∞ 无穷大 |
数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。
3.盒子模型
- 盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。
- 盒子里面的文字和图片等元素是 内容区域
- 盒子的厚度 我们成为 盒子的边框
- 盒子内容与边框的距离是内边距(类似单元格的 cellpadding)
- 盒子与盒子之间的距离是外边距(类似单元格的 cellspacing)
盒子边框border
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框的样式:
- none:没有边框即忽略所有边框的宽度(默认值)
- solid:边框为单实线(最为常用的)
- dashed:边框为虚线
- dotted:边框为点线
综合写法border : border-width || border-style || border-color
border: 1px solid red; 没有顺序
表格的细线边框border-collapse:collapse
-
通过表格的
cellspacing="0"
,将单元格与单元格之间的距离设置为0, -
但是两个单元格之间的边框会出现重叠,从而使边框变粗
-
通过css属性:
table{ border-collapse:collapse; }
- collapse 单词是合并的意思
- border-collapse:collapse; 表示相邻边框合并在一起。
内边距padding
- 添加了内边距,内容和边框 有了距离。
- 盒子会变大了(解决办法:通过给设置了宽高的盒子,减去相应的内边距的值,维持盒子原有的大小)
值的个数 | 表达意思 |
---|---|
1个值 | padding:上下左右内边距; |
2个值 | padding: 上下内边距 左右内边距 ; |
3个值 | padding:上内边距 左右内边距 下内边距; |
4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ; |
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。
外边距(margin)
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离,和padding类似。
margin可以让一个块级盒子实现水平居中必须:
- 盒子必须指定了宽度(width)
- 然后就给左右的外边距都设置为auto,语法: margin:auto;或margin: 0 auto;
清除元素的默认内外边距
{
padding:0; / 清除内边距 /
margin:0; / 清除外边距 */
}
外边距合并
1.相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和
- 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
2.嵌套块元素垂直外边距的合并(塌陷)
- 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中的较大者
解决方案:
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden。
- 还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题。
圆角边框border-radius(CSS3)
语法:border-radius:length; 让正方形length=50%则为圆形 , 对于长方形设置为高度的一半
盒子阴影box-shadow(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
4.浮动、书写顺序
CSS 提供了 3 种机制来设置盒子的摆放位置,分别是
普通流(标准流:块级元素,行内元素,行内块元素)
浮动 (让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行)
定位(将盒子定在某一个位置 自由的漂浮在其他盒子的上面)
在 CSS 中,通过 float
中文, 浮 漏 特 属性定义浮动,语法如下:
选择器 { float: 属性值; }
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
float —— 浮漏特
特点 | 说明 |
---|---|
浮 | 加了浮动的盒子是浮起来的,漂浮在其他标准流盒子的上面。 |
漏 | 加了浮动的盒子是不占位置的,它原来的位置漏给了标准流的盒子。 |
特 | 特别注意:浮动元素会改变display属性, 类似转换为了行内块,但是元素之间没有空白缝隙 |
浮动元素与兄弟盒子的关系
在一个父级盒子中,如果前一个兄弟盒子是:
- 浮动的,那么当前盒子会与前一个盒子的顶部对齐;
- 普通流的,那么当前盒子会显示在前一个兄弟盒子的下方。
清除浮动
父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
1.使用after伪元素清除浮动
.clearfix:after { content: “”; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {zoom: 1;} / IE6、7 专有 */
2.使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
CSS属性书写顺序
建议遵循以下顺序:
- 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)
- 自身属性:width / height / margin / padding / border / background
- 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
5.定位
定位也是用来布局的,它有两部分组成:定位=定位模式+边偏移
在 CSS 中,通过 top
、bottom
、left
和 right
属性定义元素的边偏移:(方位名词)
定位模式 (position) 语法:选择器 { position: 属性值; }
定位模式(position) | 是否脱标占有位置 | 移动位置基准 | 模式转换(行内块) | 使用情况 |
---|---|---|---|---|
静态static | 不脱标,正常模式 | 正常模式 | 不能 | 几乎不用 |
相对定位relative | 不脱标,占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
绝对定位absolute | 完全脱标,不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
固定定位fixed | 完全脱标,不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用,不需要父级 |
子绝父相 —— 子级是绝对定位,父级要用相对定位。
绝对定位的盒子居中
position:relative;
top:50%;
left:50%;
transform: translate(-50%,-50%);
堆叠顺序(z-index)
- 属性值:正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上;
- 如果属性值相同,则按照书写顺序,后来居上;
- 数字后面不能加单位。
注意:z-index
只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效。
6.css高级技巧
透明度
opacity:0~1;
元素的显示与隐藏
display 显示
-
display 设置或检索对象是否及如何显示。
display: none 隐藏对象 display:block 除了转换为块级元素之外,同时还有显示元素的意思。
-
特点: 隐藏之后,不再保留位置。
visibility 可见性
-
设置或检索是否显示对象。
visibility:visible ; 对象可视 visibility:hidden; 对象隐藏
-
特点: 隐藏之后,继续保留原有位置。
overflow 溢出
- 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
三者关系比较
属性 | 区别 | 用途 |
---|---|---|
display | 隐藏对象,不保留位置 | 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛 |
visibility | 隐藏对象,保留位置 | 使用较少 |
overflow | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |
鼠标样式cursor
属性值 | 描述 |
---|---|
default | 小白 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
轮廓线 outline
语法:outline: none;
防止拖拽文本域resize
语法:
vertical-align垂直对齐
让文字居中对齐,是 text-align: center;
vertical-align 垂直对齐,它只针对于行内元素或者行内块元素
语法:vertical-align : baseline |top |middle |bottom
图片、表单和文字对齐
语法:vertical-align : middle
去除图片底侧空白缝隙
-
原因:
图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。
-
解决的方法就是:
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
溢出的文字省略号显示
-
先强制一行内显示文本
white-space: nowrap;
-
超出的部分隐藏
overflow: hidden;
-
文字用省略号替代溢出的部分
text-overflow: ellipsis;
精灵技术
首先我们知道,css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。
- 精确测量,每个小背景图片的大小和 位置。
- 给盒子指定小背景图片时, 背景定位基本都是 负值。
滑动门
一般的经典布局都是这样的:
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
css样式
*{
padding:0;
margin:0;
}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}
总结:
- a 设置 背景左侧,padding撑开合适宽度。
- span 设置背景右侧, padding撑开合适宽度 剩下由文字继续撑开宽度。
- 之所以a包含span就是因为 整个导航都是可以点击的。
CSS三角形
- 我们用css 边框可以模拟三角效果
- 宽度高度为0
- 我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
- 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;
阻止链接跳转
需要给href添加 javascript:void(0); 或者 javascript:;
7.练习
网站ico图标
1.使用ico图标
-
首先把favicon.ico 这个图标放到根目录下。
-
再html里面, head 之间 引入 代码。
2.制作ico图标
我们可以自己做的图片,转换为 ico图标,以便放到我们站点里面。
方法步骤:
- 首先把我们想要的切成图片。
- 要把图片转换为 ico 图标,我们借助于第三方转换网站: http://www.bitbug.net/。 比特虫
总结:
代码: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
注意:
- 她(它)是显示在浏览器中的网页图标。
- 它是图标形式,不是一个图片
- 位置是放到 head 标签中间。
- 后面的type=“image/x-icon” 属性可以省略。(我相信你也愿意省略。)
- 为了兼容性,请将favicon.ico 这个图标放到根目录下。
网站优化三大标签
1.网页title 标题
一般不超过28个中文,最先出现的词语权重高,主关键词出现3次,辅关键词出现1次
2.Description 网站说明
品优购网:
<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
注意点:
- 描述中出现关键词,与正文内容相关,这部分内容是给人看的,所以要写的很详细,让人感兴趣, 吸引用户点击。
- 同样遵循简短原则,字符数含空格在内不要超过 120 个汉字。
- 补充在 title 和 keywords 中未能充分表述的说明.
- 用英文逗号 关键词1,关键词2
3.Keywords 关键字
Keywords是页面关键词,是搜索引擎关注点之一。Keywords应该限制在6~8个关键词左右,电商类网站可以多 少许。
品优购网:
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
字体图标iconfont
可以做出跟图片一样可以做的事情,改变透明度、旋转度,等…
但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等…
本身体积更小,但携带的信息并没有削减。
几乎支持所有的浏览器
UI设计人员给我们svg文件,我们需要转换成我们页面能使用的字体文件, 而且需要生成的是兼容性的适合各个浏览器的。
推荐网站: http://icomoon.io
- icomoon字库
IcoMoon成立于2011年,推出的第一个自定义图标字体生成器,它允许用户选择他们所需要的图标,使它们成一字型。 内容种类繁多,非常全面,唯一的遗憾是国外服务器,打开网速较慢。
- 阿里icon font字库
http://www.iconfont.cn/
这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字,免费,免费!!
在样式里面声明字体: 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
给盒子使用字体
span {
font-family: "icomoon";
}
过渡transition
过渡动画: 是从一个状态 渐渐的过渡到另外一个状态
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
属性 | 描述 | CSS |
---|---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
运动曲线 默认是 ease 匀速:lineaar 逐渐慢下来:ease 加速:ease-in 减速:ease-out 先加后减速:ease-in-out
获得焦点元素
:focus 伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素
:hover
8.命令行、gulp
命令行
-
盘符: 就可以进入某个盘符
-
dir 列出目录中的所有文件
-
cd 切换文件夹(目录)
- cd 目录名 可以进入指定目录,目录名可以是绝对路径也可以是相对路径
- cd …/ 返回上一层目录
- cd ./ 当前目录
- cd / 返回根目录(盘符下)
-
md/mkdir 创建文件夹
-
rd/rmdir 删除文件夹
- rd newdir 删除目录,如果目录中有其它内容会提示目录不是空的
- rd /S newdir 删除目录,如果目录中有其它内容会提示newdir, 是否确认(Y/N)?,输入Y按回车删除
- rd /S /Q newdir 静默删除目录,如果目录中有其它内容,不提示直接删除(此操作危险)
-
创建文件
- cd./>文件 比如 cd./>index.html 这样就可以创建一个html页面
-
删除文件
- del 文件名 比如 del index.html
小技巧
-
自动补全
- 在敲出文件/目录前几个字母后,按下tab键
- 如果有以这前几个字母开头的文件/目录,系统会自动补全
- 如果补全的文件/目录不是想要的可以继续按tab键,切换到下一个文件/目录,知道找到想要的为止
- 在敲出文件/目录前几个字母后,按下tab键
-
曾经使用过的命令
- 按上/下光标键可以在曾经使用过的命令间来回切换
- 如果不想执行当前的命令可以按ctrl + c 中断r
-
cls 清屏 (CLear Screen)
-
exit 退出
-
快捷键 ctrl + c 终止当前操作
-
notepad 记事本
-
calc 计算器
gulp
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。
- 自动压缩代码
- 自动打包、代码检查
- 打开浏览器,并监视源码变化实时刷新
- 部署到线上服务器
安装
-
安装node.js
检测node 是否安装成功
node -v
- 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
检测安装cnpm 是否成功
cnpm -v
gulp -v
本地环境搭建体验
以下内容首先打开命令行,然后切换到项目的根目录,输入以下命令并运行
-
初始化
# 在当前目录自动生成一个package.json文件 cnpm init -y
-
安装插件
# 当前项目中安装gulp cnpm install gulp --save-dev # 压缩html的插件 cnpm install gulp-htmlmin --save-dev # 压缩css的插件 cnpm install gulp-cssmin --save-dev # 自动打开浏览器,并实时刷新插件(浏览器同步测试工具) cnpm install browser-sync --save-dev
-
配置文件
在当前项目的根目录中创建一个gulpfile.js文件,如链接中文件
演示自动化构建
# 自动化压缩和复制文件到发布目录dist
gulp build
# 开启测试用的服务器
gulp dev