一 HTML
1-HTML:超文本标记语言
1.1是用各种标签组成的网页
1.2 超越文本的,有图片,有链接
2-Web 标准:
Web标准构成
主要包括结构,表现,行为
结构:结构用于对网页元素进行整理和分类,现阶段主要学的就是HTML
表现:表现用于设置网页元素的版式,颜色,大小等外观样式,主要指的就是CSS
行为:行为是指网页模型的定义及交互的编写,现阶段主要学习是的Javascript
3-常用标签
段落和换行标签
段落: <p></p>
换行标签: <br/>
文字格式化标签
4-<div>和<span>
标签
div 一个div就会独占一行,相当于超大的盒子,h4标签也是独占一行
span 一行可以有多个span,相当于小的盒子
5-图像标签和路径
<img src="图片的URL"/>
alt 属性:图片不能显示时,就会替换会alt的文字
<img src="图片的URL" alt="替换的信息写这里"/>
效果如下:
<img src="图片的URL" alt="我是pink老师"/>
title: 提示文本,鼠标放在图像上,提示文字
<img src="图片URL" title="提示的文字"/>
效果如下
width: 宽度 width=“500” 默认就是像素
height: 高度 height=“500”
border: 边框的粗细
5.1 路径之相对路径
5.1 路径之绝对路径
一般指从盘符开始的路径
如:
C:\Users\admin\Desktop\个人笔记
6-超链接标签(重点)
1-超链接的语法格式
<a href="跳转目标" > </a>
2-链接分类:
2.1 外部链接
第二个属性:tartget=""
arget="_self"--在原本的窗口打开新的网页
target="_blank"--在新的窗口打开新的网页
2.2 内部连接
网站内部页面之间的相互链接
<a href="直接写这个页面的名称即可">公司简介</a>
2.3 空链接
网页还没确定链接目标是
<a href="#">这是一个空链接</a>
2.4 下载链接
<a href="文件的.exe或者是zip等压缩形式>下载文件</a>
如:
<a href="img.zip>下载文件</a>
2.5 网页元素链接
可以给图片,音频,表格,视频加超链接,
如 在a标签中包含一个图片标签,可以给这个图片增加一个超链接
<a href ="跳转的目标链接" ><img src="img.jpg"/>网页元素标签</a>
点击图片就会跳转到目标链接
2.6 锚点链接
当我们点击链接时,可以快速定位到页面中的某个位置
<a href="#jump"></a>
之后跳转到这个
<h3 id="jump"></h>
就是用超链接跳转到对应的id选择器上,
7-注释标签和特殊字符
7.1 注释标签
ctrl+ /
7.2 特殊字符
8-表格标签
8.1 表头标签
自带效果:加粗,居中
<th></th>
<table>
<tr>
<th>姓名</th> <th>性别</th> <th>年龄</th>
</tr>
</table>
8.2 表格标签属性
8.3 表结构标签
表头标签:代表表头区域,而 th 只是代表一个单元格的表头
<thead></thead>
表主体:除了表头结构,其他 tr 标签都可以用 tbody 标签 包含,这样搞结构更清晰
<tbody></tbody>
8.4 合并单元格
合并单元格的方式:
跨行合并: rowspan="合并单元格的个数"
跨列合并:colspan="合并单元格的个数"
目标单元格: (写合并代码)
跨行: 最上侧的单元格作为目标单元格,写合并代码
跨列: 最左侧的单元格作为目标单元格,写合并代码
合并单元格三步骤
1-先确定是跨行还是跨列合并,
2-找到目标单元格,写上合并方式,=合并单元格个数,比如: <td colspan="2" ></td>
3-删除多余的单元格
9-列表标签
9.1 无序列表
定义:即列表不会按照一定的规则,顺序去排列定义
<ul>
<li></li>
</ul>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
1.无序列表的各个列表项之间没有顺序级别之分,是并列的。
2. <ul><ul>中只能嵌套<li><li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。但是可以放<li>标签里
3. <li>与</li>之间相当于一个容器,可以容纳所有元素。
4.无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来设置。
9.2 有序列表
定义:即列表会按照一定的规则,顺序去排列定义
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
9.3 自定义列表
自定义列表内容
使用场景如下
HTML中,<dl>标签用于定义描述列表(或者定义列表),该标签会与
<dt>(定义项目/名字)和<dd>(描述每一个项目名字/名字)一起使用.
1. <dl></dl>里面只能包含<dt>和<dd>。
2. <dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>.
10-表单标签
10.1 为什么需要表单
使用表单的目的就是为手机用户的信息
日常使用场景一:
日常使用场景二:
10-2 表单的组成
在HMTL中,一个完整的表单通常由表单域,表单控件(表单元素)和提示信息3个部分构成.
10-3 表单域
表单域是一个包含表单元素的’区域
在HTML标签中,<from>标签用于定义表单域,已实现用户信息的手机和传递,<form>会把他范围内的表单元素提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
里面是表单元素控件
</form>
10-4 表单控件(表单元素)
1-<input></input>输入表单元素
2-<select></select>下拉表单元素
3-<textarea></textarea> 文本域元素
1-<input type=" "></input>输入表单元素
type 属性的属性值及其描述如下:
除了type属性外,input标签还有其他的很多的属性
<input type="text" name="username" value="请输入用户名">
<input type="text" name="username" value="请输入用户名">
<input type="text" name="username" value="请输入用户名">
2-下拉表单元素
<form name="date">
<select name="year" onchange="selectYear(this.value)">
<option value="">选择 年</option>
</select>
<select name="month" onchange="selectMonth(this.value)">
<option value="">选择 月</option>
</select>
<select name="day" onchange="selectDay(this.value)">
<option value="">选择 日</option>
</select>
</form>
3- 文本域元素
<tr>
<td>自我介绍: </td>
<td>
<textarea >自我介绍阿斯达四大所大所</textarea>
</td>
</tr>
11- lable标签
lable标签会绑定一个表单元素,当点击lable标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户的体验
语法:lable 标签要把点击的字体包含起来
语法1:
<lable for="sex"> 男</lable>
<input type="radio " id="sex" name="sex">
语法2:
<lable for="sex">
<input type="radio " id="sex" name="sex"> 男
</lable>
二 CSS
2.1 定义
CSS:网页的美容师,给网页修改样式的
语法
选择器{样式}
给谁该样式{改什么样式}
属性和属性值是以"键值对"的形式出现
如:
p {
color: red;
font-size: 12px;
}
2.2 CSS选择器
2.2.1 标签选择器
标签选择器: 选中所有的此类标签
标签+{ 改成什么样式}
类选择器口诀:样式点定义,结构类(class)调用,一个或者多个,开发最常用.
自己定义一个class属性,然后再给这个类选择器进行修改样式
<head>
<style>
.red{
background-color: red;
}
</style>
</head>
<body>
<div class="red">第3个</div>
</body>
2.3 类选择器
类选择器-多类名
定
语法:
在定义class属性时,定义多个属性值,中间用空格隔开
如:
<div class="font20 man"></div> ---这个标签就可以通过font20 或者 man 选到这个标签了
2.4.1
1-多类名使用方式
<head>
<style>
.box{
font-size: 12px;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div class="red box">第3个</div>
</body>
- 在标签class属性中写多个类名
- 多个类名中间必须用空格分开
- 这个标签就可以分别具有这些类名的样式
2-使用场景
1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
2)这些标签都可以调用这个公共的类然后再调用自己独有的类.
3) 从而节省CSS代码,统一修改仑非常方便.
2.5 id选择器
2.5.1 定义:
id选择器可以为标有特定的id的HTML元素指定特定的样式.
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义.
2.5.2 口诀:
id选择器的口诀:样式#定义,结构id调用,只能调用一次,别的标签切勿使用(别的标签调用无用)
<head>
<style>
#pink{
background-color: red;
}
</style>
</head>
<body>
<div id="pink">第3个</div>
</body>
2.5.3 id选择器和类选择器的区别
2.5.4 通配符选择器
*{
color:red
}
2.5.5 基础选择器总结
2.6 字体复合属性
简写时:
至少保留font-size,和 font-family属性
2.7文本属性
对齐方式
选好标签{ 定义文本属性,text-align: 属性值}
默认是左对齐
装饰文本
text-decoration
文本缩进
text-indent
用来指定文本的第一行的缩进,通常是将段落的首行缩进.
3 CSS的样式引入方式
3.1 内部样式表
位置:就是把标签style写在html的里面,理论上可以放在html任何地方,一般放在标签head里面
控制范围:控制整个页面的CSS
3.1 行内样式表
位置:写在某个要样式化标签的里面
控制范围:控制一个标签的样式
3.1 外部样式表```java
位置:就是把标签style写在html的里面,理论上可以放在html任何地方,
控制范围:控制多个页面的CSS
1- 先建立一个 .css文件
2- 需要样式的地方,使用link标签引入这个文件
<link rel="stylesheet" href="css文件路径">
4 CSS的样式引入方式
Emmet语法
快速生成HTML结构语法
快速生成CSS样式
5 CSS的复合选择器
5.1 复合选择器—后代选择器(重要)
元素1 + 空格 + 元素2{ CSS样式}
上诉语法表示选择元素1里面的所有元素2(后代元素)--即是选择最后一个标签元素
只有一组父子级时
或者
有多组同样的父子级时
元素1和元素2中间用空格隔开
元素1是父级,元素2是子级,最终选择的是元素2
元素2可以是儿子,也可以是孙子等,只要是元素1的后代就行
元素1和元素2可以是任意基础选择器
5.2 子选择器(重要)
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素.简单理解就是选亲儿子元素
元素1 > 元素2 {样式声明}
上诉语法表示选择 元素1 里面的所有直接后代(子元素)元素2
例如
注意
5.3 并集选择器(重要)
可以选择多组标签,同时为他们定义相同的样.通常用于集体声明
5.3 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第N个元素 .
伪类选择器书写最大的特点就是用冒号 : 表示,比如:hover, : first-child.
因为伪类选择器很多,比如有链接伪类,结构伪类等,所以这里先给大家讲解常用的链接伪类选择器.
<style>
选择未访问的链接 a:link {}
a: link {
}
选择点击过的(访问过的)链接 a: visited{}
a: visited {
}
选择鼠标经过时的链接 a: hover{}
a: hover{
}
选择正在点击鼠标的那个还没有弹起鼠标的那个链接 a: avtive{}
a: avtive{
}
</style>
注意事项:
1 . 为了确保生效,请按照LVHA的顺序声明:link :visited :hover :avtive
2 . 记忆法: LV 包包 好 或者 love hate.
3 . 因为a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
实际开发中的写法
a是标签选择器 所有的连接
a{
color: gray;//灰色
}
: hover 是链接伪类选择器 鼠标经过时
a: hover{
color: red; 鼠标经过时,由原来的灰色变成了红色
}
5.4 focus伪类选择器
把获得光标的input表单元素选择出来
input:focus{
background-color: pink;
}
即 获得了光标就会获得样式
5.5 复合选择器的总结
三 CSS的元素显示模式
3.1 块元素
3.2 行内元素
3.4 行内块元素
3.5 元素显示模式总结![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/685bddf9921b10514708a7250c72ec40.png)
块级标签
特点:独占一行,对高度、宽度、行高以及顶和底边距都可设置的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;
典型的块级标签有:<div> ,h系列,<li>,<dt>,<dd>,<p> ,<form>,<ul>
行内标签
特点:可以多个标签存在一行,不能直接设置行内标签的高度、宽度、行高以及顶和底边距,完全靠内容撑开宽高!
典型的行内标签有:<span>,<a>,<b>,<i>,<u>,<em>,<strong>,<label>,<br>
行内块标签 :
特点:结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;
典型的行内标签有:<img>,<input>
那么有的同学就会想了,难道我就不可以控制span或者font的宽高了吗?可以的,那么我们这次抛开浮动和定位不说,就说通过display属性来将它们互相转换:
1、块级标签转换为行内标签:display:inline;----把标签切换成 不!!! 独占一行
2、行内标签转换为块级标签:display:block; ----把标签切换成独占一行,并且可以设置宽,高
3、转换为行内块标签:display:inline-block;
四 CSS
4.1 三大特性
1-层叠性:相同的选择器设置相同的样式,就会进行覆盖,覆盖原则: 哪个样式离结构近,就执行哪个
记忆口诀:长江后浪推前浪
2-继承性:子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)
3-优先级:当同一个元素被多个选择器选中时,就会有优先级的产生.
选择器权重如下:
!important的用法优先级从低到高如:
快速写代码
快速格式化代码 保存以后自动格式化代码:
4.2文字居中—让文字的行高等于盒子的高度
文字居中的原理:
文字居中—让文字的行高等于盒子的高度
文字水平居中—text-align: center
文字垂直居中–line-height: 200px(行高等于盒子的高度就可以)
文字水平上下居中–text-align: center;line-height: 200px
实例演示:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>html文字居中测试</title>
<meta charset="UTF-8">
<style type="text/css">
body{background: #ddd;}
div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
.box1{background: #71a879;text-align: center;}
.box2{background: #6a8bbc;line-height: 200px;}
.box3{background: #dea46b;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<div class="box1">html文字水平居中</div>
<div class="box2">html文字垂直居中</div>
<div class="box3">html文字水平上下居中</div>
</body>
</html>
以上代码效果在本地测试如下图:
4.3 CSS 背景总结
元素背景颜色半透明:
background-color:rgba(0,152,50,0.7);// -->70%的不透明度
background-color:transparent;支持完全透明
背景复合属性的写法
语法格式
background : background-color background-image background-repeat background-attachment background-position;
默认值
background: transparent none repeat scroll 0% 0%;
默认值(中文意思)
background: 透明 / 无背景图片 / 平铺 / 背景图片随文本滚动(不理解的一定要自己动手试一下) / 位于元素左上角
4.4 css的层叠性
如果说是某样式冲突了,比如下面的div样式,因为代码的执行顺序是由上往下,所以执行的样式 出现层叠要满足两个条件:
1-同一个目标冲突 (如:同一个div)
2-相同的CSS样式属性冲突 (这个div中的color被定义两次样式)
会显示style的最下面的样式
但是其他的属性不冲突(如下:第一个div的颜色冲突了被后面的覆盖了,但是第一个定义的字体大小没有冲突所以样式会被正常应用上)
网页显示如下:
4.5 css的继承性
1-子标签是继承父标签的某些样式,如文本颜色和字号,
2-可以继承的样式(text-,font-,line-这些开头的可以继承,以及color属性)
4.5.1 行高的继承性
4.5 权重的优先级
4.6 盒子模型的组成
4.7 盒子模型内边距–padding
paddding:5px; | 1个值,代表上下左右都有5像素的内边距 |
---|---|
paddding:5px 10px; | 2个值,代表上下内边距是5像素,左右内边距是10像素 |
paddding:5px 10px 20px; | 3个值,代表上内边距5像素,左右内边距10像素,下内边距20像素 |
paddding:5px 10px 20px 30px; | 4个值,代表上是5像素,右10像素,左20像素,左是30像素,顺时针 |
内容和边框有了距离(padding),添加了内边距 | padding影响了盒子的实际大小,也就是说如果盒子已经有了宽度和高度,此时在制定内边框,会撑大盒子 |
但是以下情况,添加padding不会 撑开盒子大小
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小;
4.8 盒子模型外边距–margin
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
给值的时候和padding一致 | 1个值–上下左右;两个值是:第一个是上下,第二值是:左右;三个值是:上,左右,下;四个值:上,右,下,左,(顺时针) |
4.8.1 外边距典型应用–块级盒子水平居中
外边距可以让块级盒子水平居中,但是必须满足两个条件:
1.盒子必须指定了宽度(width)
2.盒子左右的外边距都设置为auto
如:
.header{width:960px;margin:0 auto}
以下三种常见的写法都可以:
- margin-left:auto;margin-right:auto;
- margin-auto;
- margin:0 auto;
4.8.2 外边距典型应用–行内元素或者行内块元素水平居中
给其父元素添加:text-align:center 即可
如:要给图片水平居中
<style>
/*给其父元素添加:text-align:center 即可*/
.header{
text-aligin:center;
}
</style>
<body>
<div class="header">
<span>里面的文字</span>
</div>
<div class="header">
<img src="down.jpg" alt="">
</ div>
</body>
4.8.3 外边距合并-嵌套块元素塌陷
解决方案:
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加overflow:hidden
4.8.4.清除网页默认的内外边距
这句话一般都是CSS的第一句话
* {
padding:0;
margin: 0;
}
注意:行内元素为了照顾兼容性,尽量值设置左右外边距,不要设置上下内外边距,但是转换为块级和行内块元素就可以了
4.9 圆角边框
语法: border-radius:length;
如:
border-radius:20px;
4.10 盒子阴影
box-shadow:0 0 0 0 rgba(0,0,0,0.3);
前面四个零分别是:水平方向 垂直方向,水平的模糊距离,垂直的模糊距离,注意后面是:rgba 有 "a" !! rgba里面是逗号隔开
4.11 斜杠,竖分割线
代码: <em>|</em>---这里的 "|" 不加css样式 还是倾斜的
效果:
加了以下css就会变为竖分割线:
em{
font-style:normal
}
效果
四.浮动
多个块级元素纵向排列 找标准流,多个块级元素横向排列找浮动
定义: float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动特性:(重难点)
1.脱离标准普通流的控制(浮)并移动到指定位置(动) 俗称(脱标)
2.浮动的盒子不再保留原先的位置
为啥有时候要清除浮动:
因为浮动后,不占空间,会出现层叠现象
如:背景色粉红色是div应该独占一行,但是这些绿色的 li 添加了浮动. 所以出现这种层叠情况
如何清除浮动
1-先在css样式定义样式
.clearfix: before,.clearfix: after {
content: "";
display :table;
}
.clearfix: after {
clear : both;
}
.clearfix{
*zoom: 1;
}
2-然后再在这个浮动的元素的 父元素 添加 class=“clearfix”
五 页面布局思路
- 必须确定页面的版心,布局时通常有以下的整体思路:
- 分析页面中的模板,以及每个行模块中的列模块,遵循页面布局第一准则(标准流:竖)_.
- 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则(浮动:横)
- 先有结构,后有样式.结构永远最重要
六6.1 头部制作
实际开发中,我们不会直接用链接a,而是用li 包含链接( li + a )的做法.
1. li + a 语义更清晰,一看就是有条理的列表内容
2. 如果直接用a ,搜索引擎容易识别为有堆砌关键字嫌疑,(故意堆砌关键字容易被搜索引擎有降权的风险,从而影响网址排名)
七 定位
7.1 定位的组成
定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子,
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式.边偏移则决定该元素的最终位置.
7.2.定位模式
7.2.1 定义:
7.2.2 语法:
选择器{
position: fixed;
}
7.2.3 总结:
7.3.1 静态定位
`在这里插入代码片`
7.3.2 相对定位(relative)
想对定位(relative): 不会脱标,原先的位置会保留 不会被其他元素占用
7.3.3 绝对定位(absolute)
绝对定位的特点:(务必记住)
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位( Document文档)。
2.如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。(脱标)
绝对定位(absolute): 会脱标,原先的位置 会被其他元素占用
7.3.4 固定定位(fixed)
1-以浏览器的可视化窗口固定位置.
2-原先的位置会被占用,
7.3.5 粘性定位(Sticky)
1-定义:可以被认定是相对定位和固定地位的混合体 Sticky:粘性的
语法:
选择器 {
position: sticky;
top: 10px;
}
2-粘性定位的特点:
2-1 以浏览器的可视化窗口为参照点移动元素(固定定位也是这个特点)
2-2 粘性定位占有原先的位置(相对定位特点)
2-3 必须添加 top,left,right,bottom其中一个才有效
(跟页面滚动搭配使用).兼容性较差,IE不支持.
7.4 子绝父相
7.6 边偏移
7.7 绝对定位的盒子剧中居中算法
1-left 走50%,父容器的一半
2-margin:负值 (往左边走) 自己的盒子宽度的一半
如:
postition: absolue;
left:50%;
margin-left:-100px;
width:200px;
height:200px;
八 网页布局总结
通过盒子模型,清除知道大部分html标签是一个盒子
通过CSS浮动,定位可以让每个盒子排列成网页
一个完整的网页,是标准流,浮动,定位一起完成布局的,每个都有自己的专门用法,
1- 标准流
可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准布局
2- 浮动
可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局
3- 定位
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示.如果要想元素自由在某个盒子内移动就用定位布局.
九 元素的显示与隐藏
9.1 display 属性
display 属性用于设置一个元素应如何显示
display:none;隐藏对象
display:block;除了转换为块级元素之外,同时还有显示元素的意思.
display隐藏元素后,不再占有原来的位置.,后面应用及其广泛,搭配JS可以做很多的网页特效
9.2 visibility 可见性
visibility:inherit(默认)|visible|collapse|hidden
参数:
inherit: 继承上一个父对象的可见性
visible: 对象可视
hidden: 对象隐藏
collapse: 主要用来 隐藏表格的行或列,隐藏的行或列能够被其他内容使用.对于表格外的其他对象,起作用哦等用于hidden.IE5 .5尚不支持此属性
9.3 overflow 溢出
语法:
overflow : visible | auto | hidden | scroll
参数:
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
十 CSS 高级技巧
10.1 精灵图
定义: 就是好多张背景图 放进同一张大的背景图里面,然后用backgroup-position: X Y; 去我们想要展示的背景图对应到盒子上.其实底下是一整张背景图,但是我们看到的知识盒子那区域显示的图.
10.2 字体图标
10.2.0 字体图标的引入
常用免费图标网址:
国外:
https://icomoon.io
国内:
https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4
10.2.1 把下载的压缩包里面的fonts文件夹放入页面的根目录下(我们写的页面在哪个文件夹,就把fonts放在那个文件夹下)
ps:fonts里面有四个格式的字体文件–保证兼容性
10.2.2 把压缩包里面的style.css的部分代码引入页面
引入这一段到页面当中
如下:
10.2.3打开压缩包里面的demo.html 找到代表图标的符号
复制图中的特殊字符,然后放进一个盒子
10.2.4 给对应的盒子定义—“font-family:”
重点是:盒子的"font-family" 一般都是和第二步引入的CSS样式定义中的 fonts-family 是一样的.
效果如下
1号,2号,颜色,大小 要自己定义,3号就是没有定义颜色和大小原图标
10.2.5 字体图标的追加
如果我们想在项目里面添加新的图标,但是之前的图标也要保留,怎么添加?
1-重新打开图标的网址,找到这个东西
2-然后再弹出的窗口中选择并打开我们之前下载的文件夹里面的selelction.json
之后再从新下载导入就可以了
10.3 CSS的三角制作
三角形的代码:其实就是用边框先去做三角形 ,然后用父盒子装着,利用父相子决调整位置即可,调整的时候就是要是三角在上的话,就是边框的两倍或者负两倍
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-bottom-color: rgb(212, 129, 129);
事例:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角的制作</title>
<style>
.jd {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(212, 129, 129);
margin-top: 100px;
}
.jd span {
position: absolute;
top: -20px;
right: 10px;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-bottom-color: rgb(212, 129, 129);
}
</style>
</head>
<body>
<div class="jd">
<span></span>
</div>
</body>
</html>
10.4 鼠标样式 cursor
10.4 用户界面样式-表单轮廓和防止拖拽文本域
10.4.1 取消轮廓线
给表单添加ouline:0;或者outline:none;样式之后,就可以去掉默认的蓝色边框
input{outline:none;}
10.4.2 防止拖拽文本域 resize
为防止用户拖拽文本域,致使界面用样式错乱,所以都会设定文本域取消拖拽.
textarea {
resize:none;
}
10.5 vertical-align 实现行内块和文字的垂直居中
首先要知道文字和图片在盒子中是怎么站位的
默认是这样的样式
是以基线对齐,所以并没有实现垂直居中,
要想图片和文字同时,垂直居中我们只需要把这个图片加上样式
img{
vertical-align:middle;
}
事例
页面显示
10.6 解决图片底部默认空白缝隙问题
bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐.
主要有两种解决方案:
1.给图片添加 vertical-align:middle| top | bottom 等.(提倡使用的)
2.把图片转换为块级元素:dispaly:block;
10.7 单行文字溢出显示省略号–必须满足三个条件
/*1.先强制一行内显示文本*/
white-space: nowrap;(默认normal自动换行)
/*2.超出的部分隐藏*/
overflow: hidden;
/*3.文字用省略号替代超出的部分*/
text-overflow : ellipsis;
10.8 多行文本溢出显示省略号
1-给盒子加入以下代码
overflow : hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数(超出第几行就开始显示省略号)*/
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient : vertical;
2-之后再把盒子调整为合适的固定高度
更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单。
10.9 常见布局技巧
-
margin 负值运用
实际开发中,让每个li元素浮动后,会让贴合的边框变粗,
所以让每个盒子margin 往左侧移动 -1px 移动 ,正好压住相邻盒子的边框 -
鼠标经过某个盒子的会后,提高当前盒子的层级即可,(如果没有定位,则在xxx:hover中添加相对定位,如果有定位,就用z-index :1; 就能压住其他的图层样式(其他的定位默认是z-index:0))
2.1 这个是第一种 其他的元素没有加定位的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin负值的巧妙运用</title>
<style>
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
position: relative;
border-color: royalblue;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
第二种 其他元素有加定位的,则利用z-index提高层级即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin负值的巧妙运用</title>
<style>
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
/* 这是第一种 */
/* ul li:hover {
position: relative;
border-color: royalblue;
} */
/* 这是第二种方式 */
ul li:hover {
z-index: 1;
border-color: royalblue;
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
10.10 三角形的强化–不等腰直角三角形
width: 0;
height: 0;
line-height: 0;
font-size: 0;
/*把上边框宽度调大*/
/* border-top: 100px solid transparent;border-right: 5opx solid skyblue;*/
/*左边和下边的边框宽度设置为*/
/* border-bottom: 0 solid bLue;border-Left: 0 solid green;*/
/*1.只保留右边的边框有颜色*/
border-color: transparent rgb(55, 63, 114) transparent transparent;
/* 2.样式都是soLid */
border-style: solid;
/*3.上边框宽度要大,右边框宽度稍小,其余的边框该为0*/
border-width: 24px 10px 0 0;
事例-做以下页面
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角的制作</title>
<style>
* {
margin: 0;
padding: 0;
}
.price {
text-align: center;
width: 180px;
height: 24px;
border: 1px solid red;
margin: 100px auto;
}
.miaosha {
position: relative;
float: left;
height: 100%;
width: 100px;
background-color: red;
}
.miaosha i {
position: absolute;
right: 0;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
/*把上边框宽度调大*/
/* border-top: 100px solid transparent;border-right: 5opx solid skyblue;*/
/*左边和下边的边框宽度设置为*/
/* border-bottom: 0 solid bLue;border-Left: 0 solid green;*/
/*1.只保留右边的边框有颜色*/
border-color: transparent #fff transparent transparent;
/* 2.样式都是soLid */
border-style: solid;
/*3.上边框宽度要大,右边框宽度稍小,其余的边框该为0*/
border-width: 24px 10px 0 0;
}
.origin del {
color: rgba(0, 0, 0, 0.459);
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="price">
<span class="miaosha">¥1650.00
<i></i>
</span>
<span class="origin"><del>¥6650.00</del></span>
</div>
</body>
</html>
十一 html5 新语义
11.1 视频播放标签
<video src="文件地址" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5视频标签</title>
<style>
div {
text-align: center;
margin: 100px auto;
}
video {
display: inline-block;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div>
<video src="/第十天/media/7f.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>
</div>
</body>
</html>
11.2 音频播放标签
语法:
<audio src="文件地址" controls="controls"></audio>
11.3 视频,音频 总结
11.4 表单的标签的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML新增表单input</title>
<style>
ul li {
list-style: none;
margin-top: 10px;
}
form {
border: 1px solid;
width: 400px;
}
</style>
</head>
<body>
<form action="">
<ul>
<li>邮箱:<input type="email"></li>
<li>网址: <input type="url"></li>
<li>日期: <input type="week"></li>
<li>时间: <input type="time"></li>
<li>数量: <input type="number"></li>
<li>手机号码: <input type="tel"></li>
<li>搜索: <input type="search"></li>
<li>颜色: <input type="color"></li>
<li>提交:<input type="submit"></li>
</ul>
</form>
</body>
</html>
11.4 HTML5 新增的表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 表单拥有该属性表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示, |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动把光标聚焦到此表单 |
autocomplete | off/on | 当用户在字段开始键入时,浏览器会提示之前成功提交过的值.但是得满足两个条件:1-autocomplete=“on” 需要放在表单内,2-name属性有值,同时成功提交此属性 ,autocomplete是默认打开的 |
multiple | multiple | 在input是文件提交类型时候,可以变为多选文件 |
可以通过以下设置方式修改placeholder里面的字体颜色∶
input:placeholder {
color: pink;
}
11.5 CSS3新增的选择器
11.5.1 属性选择器
选择符 | 简介 |
---|---|
E[att] | 选择具有att属性的E元素 |
E[ att="val] | 选择具有att属性且属性值等于 val的 E元素 |
E[ att^="val] | 匹配所有具有att属性且以val开头的 E元素 |
E[att$=“val” ] | 匹配具有att属性值且以val结尾的 E元素 |
E[ att*=“val”] | 匹配具有att属性且值中含有val的E元素 |
11.5.2 结构伪类选择器
选择符 | 简介 |
---|---|
A E:first-child | 匹配父元素 A 中的第一个子元素E |
A E:last-child | 匹配父元素 A 中的最后一个子元素E |
A E:nth-child | 匹配父元素 A 中的第n个子元素E ,n 可以是数字,关键字,也可以是公式,如果n是数字,就是选择第n个子元素,里面数字从1开始,如果是关键字:even 偶数,odd:奇数,n 所有的孩子 |
A E:first-of-type | 指定类型 E 的第一个 |
A E:last-child | 指定类型 E 的最后一个 |
A E:nth-of-type(n) | 指定类型E 的第n个 |
nth-child(1) 和 nth-of-type(1)的区别
区别:
1-nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
2-nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找第n个孩子
代码演示:
以下代码--要选中第一个p标签
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
section div:nth-child(1){
这个选择器,选不到
--因为这个选择器是先执行nth-child(1)--找到section的孩子:p,div1, div2,并编号,则p就是第一个孩子,之后再匹配div:nth-child(1)中的div,结果人家是p 不是div,所以选不上
}
section div:nth-of-type(1){
这个是选择器可以选到--
因为这个选择器是先找到孩子当中所有的div,然后再找到这群孩子的第一个div
}
n可以搭配的公式有:
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15 … |
n+5 | 从第5个开始(包含第五个)到最后 |
-n+5 | 前5个(包含第5个) |
小结:
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找第n个孩子
- 关于nth-child ( n)我们要知道n是从О开始计算的,要记住常用的公式
- 如果是无序列表,我们肯定用nth-child更多
- 类选择器、属性选择器、伪类选择器,权重为10。
11.5.3 伪元素选择器(重点)
11.5.3.1 伪元素的作用:
伪元素选择器可以帮助我们利用CSS创建标签元素,而不需要HTML标签,从而简化HTML结构.
选择符 | 简介 |
---|---|
::beforn | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
div {
width: 200px;
height: 200px;
background-color: rgb(128, 122, 122);
}
div::before {
display: inline-block;
width: 40px;
height: 40px;
content: '我';
background-color: rgb(148, 73, 73);
}
div::after {
content: '小猪佩奇';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>
页面显示如下
11.5.3.2 注意
- before 和 after创建一个元素,但是属于行内元素
- 新创建的 这个元素在文档树中(在浏览器F12中找不到该该元素的)是找不到的,所以我们称为伪元素.
- 语法:element::before{ }
- before 和 after 必须有content 属性
- before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
11.5.3.3 伪元素选择器的使用场景1:伪元素字体图标
1- 先从图标库中找到下拉三角,然后利用::before的content属性加入图标的特殊字符,然后就是图标的引入操作(忘了可以回看图标的引入)
2-图标引进去后,再用父相子决定位 去调整位置就可以
11.5.3.4 伪元素选择器的使用场景2:视频播放时候的遮罩
1-给放视频的土豆盒子的before伪元素定义好
2-当我们的鼠标经过 土豆这个盒子,就让遮罩层伪元素显示出来
(.tudou:hover::before, 里面不能有空格)
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.tudou {
position: relative;
height: 200px;
width: 500px;
background-color: rgb(219, 192, 192);
line-height: 200px;
margin: 0 auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
position: absolute;
content: '';
display: none;
width: 100%;
height: 100%;
background: url(/第八天/images/ico.png) no-repeat center rgba(122, 43, 43, 0.4);
}
.tudou:hover::before {
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="/第八天/images/bj.png" alt="">
</div>
</body>
</html>
页面显示如下
鼠标未经过时
鼠标经过时
11.5.3.5 伪元素选择器的使用场景3:伪元素清除浮动
如何清除浮动
1-就是在浮动的元素后面(推荐)或者前面添加一个块级盒子,然后加入核心代码:clear:both
方式1 :在CSS中定义清除浮动代码,再给父盒子伪元素添加 “clearfix” 类选择器
方式2 闭合清除浮动法
这里的display:table; 就是闭合after和before时,这两个转换为块级的时候就都会独占一行, table 的作用就是转换为块级盒子并且不独占一行
十二 css3 新特性
12.1 盒子模型
CSS3中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况︰
- box-sizing:content-box盒子大小为width + padding + border (以前默认的)
- box-sizing: border-box盒子大小为width
如果盒子模型我们改为了box-sizing: border-box ,那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)
所以开发的时候一般CSS都是首个样式都会这么写
12.2 CSS3过渡效果
口诀:谁做过渡,给谁加 transition
transition:要过渡的属性(两个以上的要用逗号隔开) 过度时间 运动曲线 何时开始;
1-属性,想要变化的CSS属性,宽度,高度,背景颜色,内外边距都可以,如果想要所有属性都变化,就写一个all 就可以
2-话费的时间:单位是 秒 (必须写单位) 比如 0.5s
3-运动曲线: 默认是ease (可以省略)
4-何时开始:单位是 秒 (必须写单位) 可以设置延迟触发时间 默认是0秒 (可以省略)
十三 网站的制作
13.1 网站的制作流程
13.2 需要创建的文件夹及文件
13.3 京东css初始化代码(base.css) 适合商城类页面开发
/*清除元素默认的内外边距 */
* {
margin: 0;
padding: 0;
/* css3的盒子模型 */
box-sizing: border-box;
}
/*让所有斜体 不倾斜*/
em,
i {
font-style: normal;
}
/*去掉列表前面的小点*/
li {
list-style: none;
}
/*图片没有边框 去掉图片底侧的空白缝隙*/
img {
border: 0; /*ie6*/
vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
cursor: pointer;
}
/*取消链接的下划线*/
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #e33333;
}
button,
input {
font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
/* 默认有灰色边框,和聚焦时候有蓝色边框变化效果我们需要去掉 */
border: 0;
outline:none;
}
body {
background-color: #fff;
font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
color: #666
}
.hide,
.none {
display: none;
}
/*清除浮动*/
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
13.4 样式的模式化开发
如:
13.4.1 如何添加自己的网站favicon 图标
13.4.2 制作favicon图标
1-先找到自己想要的favicon图片,(png或者jpg都可以)
2-去到这个网址上传这个图片并转换为.icon格式图片
https://www.bitbug.net/
3-生成以后把这个图片放大到页面的根目录上,之后在首页的html的头部引入
<link rel="shortcut icon" href=".ico的所在目录地址" />
之后刷新一下就能看到
13.5 网站TDK三大标签SEO优化–增加排名的
1-title 标题:
具有不可替代性,是我们内页的第一个重要标签,是搜索引擎了解网页的入口和网页主题归属的最佳判断点
建议命名格式:网站(产品名)-网站的介绍(尽量不要超过30个汉字)
例如:
<title>品优购 - 网上商城 - 正品低价、品质保障、及时发货、快乐购物!</title>
- 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!小米商城
- 小米5s、红米Note 4、小米MIX、小米笔记本官方网站
2- description 网站说明:
简要说明我们网站主要是做什么的
我们提倡,description 作为网站的总体业务和主题概括,多采用,“我们是…”,"我们提供… "“xxx网站作为…” "电话:00101…"之类的语句
例如:
<meta name="description" content="京东JD.COM-专业的综合网上购物商城销售家电、数码通讯、电脑.家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
3- keywords 关键字:
是页面的关键字,是搜索引擎的关注点之一.
keywords 最好限制为6~8个关键字,关键字之间用应为逗号隔开,采用关键字1,关键字2的形式
例如:
<meta name="keyword" content="网上购物,网上商城,服饰,母婴,品优购">
13.5.1 LOGO SEO 优化
- logo里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要。
- h1里面再放一个链接,可以返回首页的,把logo的背景图片给链接即可。
- 为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来。
方法1 : text-indent移到盒子外面( text-indent: -9999px),然后overflow:hidden(溢出隐藏),淘宝的做法。
方法2∶直接给font-size:0;就看不到文字了,京东的做法。 - 最后给链接一个title属性,这样鼠标放到logo上就可以看到提示文字了。