上海HTML5开发培训机构大咖分享html虚线边框设置教程

习HTML时有时候我们需要用代码设置边框或虚线边框的样式，那该怎么设置呢？下面上海非凡进修学院HTML5开发培训机构大咖分享下html虚线边框设置教程，会对几个不同标签加虚线边框效果样式，同学们可以根据示例灵活掌握与应用到自己DIV+CSS布局中。

为了对html不同标签加边框虚线，我们选择几个常用标签对齐设置边框虚线效果。

1、html常用标签

div标签

span

ul li

table tr td

2、实例用到CSS属性单词

border

width

height

3、实现虚线的CSS重点介绍

border为边框属性，如果要实现对象边框效果，要设置边框宽度、边框颜色、边框样式（实线还是虚线）

border:1px dashed #F00 这个就是设置边框样式宽度为1px，虚线，虚线为红色。

4、实例描述

我们对以上几个标签设置相同宽度、相同高度、边框效果。

5、HTML代码示例：

以上示例对html中不同标签设置相同的样式，包括相同边框虚线。

上海HTML5开发培训机构大咖提示边框三个样式

通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。

1）、边框颜色：border-color:#000

2）、边框厚度（宽度）：border-width:1px

使用数字+单位设置边框厚度宽度，如1px(边框厚度宽度为1像素)，边框必须为正数字，大于0的数值。否则设置边框border样式无效。

3）、border边框样式：border-style:solid

上海HTML5开发培训机构大咖提示：边框border样式值如下：

none :无边框。与任何指定的border-width值无关

hidden : 隐藏边框。IE不支持

dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）

dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）

solid :实线边框（常用）

double : 双线边框。两条单线与其间隔的和等于指定的border-width值

groove : 根据border-color的值画3D凹槽

ridge :根据border-color的值画菱形边框

inset : 根据border-color的值画3D凹边

outset : 根据border-color的值画3D凸边

，html+css基础

1-1

Html和CSS的关系

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

1-2

1， HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。

1-3

一个HTML文件是有自己固定的结构的。

<html>

</html>

代码讲解：

1. <html></html>称为根标签，所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。

3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

1-4

1，下面这些标签可用在 head 部分：

<head>

<meta>

<link>

</head>

2，代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法：

3，CSS注释代码

就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)

1-5

1，语义化：说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如，网页上的文章的标题就得用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。

2，语义化的作用

1）. 更容易被搜索引擎收录。

2）. 更容易让屏幕阅读器读出网页内容。

二，认识标签（第一部分）

2-1

如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。

语法：

2-2

<hx>标签来制作文章的标题。

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法：

<hx>标题文本</hx> (x为1-6)

文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们

2-3

有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。

但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调

2-4

<em>、<strong>、<span>的区别：

1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。

2. <span>标签是没有语义的，它的作用就是为了设置单独的样式用的，把一段话圈起来，然后用css设置样式。

2-5

q标签，短文本引用

比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。

语法：

1，注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

2，注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话

blockquote标签，长文本引用

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用

<q>标签是对简短文本的引用，比如说引用一句话就用到<q>标签。

语法:

浏览器对<blockquote>标签的解析是缩进样式

2-6

换行标签<br/>

<br/>标签作用相当于word文档中的回车。

分割线标签<hr/>

<hr/>标签和<br/>标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

<hr/>标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。

2-7

html特殊字符

空格： (;分号必不可少)

2-8

address标签，为网页加入地址信息

语法：

如：

<address>北京市西城区德外大街10号</address>

在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用css样式来修改它<address>标签的默认样式

2-9

在介绍语言技术的网站中，必免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：

语法：

注意：在文章中一般如果要插入多行代码时不能使用<code>标签，如果是多行代码，可以使用<pre>标签。

<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如果用以前的方法，回车需要输入<br>签，空格需要输入。

注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

三，认识标签（第二部分）

3-1

1，无序列表

ul-li是没有前后顺序的信息列表。

语法：

<ul>

......

</ul>

举例：

<ul>

<li>美丽突然出现</li>

<li>触动心灵的旋律</li>

</ul>

ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点

2,有序列表

语法：

<ol>

......

</ol>

举例：

下面是一个热点课程下载排行榜：

<ol>

<li>前端开发面试心法 </li>

<li>零基础学习html</li>

<li>JavaScript全攻略</li>

</ol>

<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开

3-2

<div>容器标签

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

语法：

确定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器

注释：<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。

3-3

创建表格的五个元素：

table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。（这个标签基本上不怎么用了）

3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...<td/>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

表格还是需要添加一些标签进行优化，可以添加标题和摘要

<caption>2012年到2013年库存记录</caption>

3-4

1，使用<a>标签，链接到别一个页面

使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：

<a href=”目标网址”>链接显示的文本</a>

例如：

<a href = "http://www.imooc.com">click here!</a>

上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。

3-5

认识<img>标签，为网页插入图片

在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。

语法：

举例：

讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

四，表单标签（与用户进行交互）

4-1

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

讲解：

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ：数据传送的方式（get/post）。

4-2

<input>输入框

文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

语法：

<form>

</form>

1、type：

当type="text"时，输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)

4-3

文本域，支持多行文本输入

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4-4

单选框，复选框

语法：

1、type:

当type="radio"时，控件为单选框

当type="checkbox"时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序ASP、PHP使用

4、checked：当设置checked="checked"时，该选项被默认选中

注意：同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。

4-5

下拉列表框，节省空间

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。

语法：<option value="提交值">选项</option>

提交值是向服务器提交的值，选项是显示的值。

</select>

</form>

4-6

使用下拉列表框进行多选

下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，

就可以实现多选功能，进行多选时按下Ctrl键同时进行单击，可以选择多个选项。

如下代码：

</select>

</form>

4-7

在表单中有两种按钮可以使用，分别为：提交按钮、重置。

1，提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

2，重置按钮，重置表单信息

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

语法：

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

五，css样式

5-1

认识css样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

如下列代码：

font-size:12px;

color:red;

font-weight:bold;

}

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

5-2

CSS代码语法

css 样式由选择符和声明组成，而声明又由属性和值组成

选择符{属性:值}

p{color:red;}

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{font-size:12px;color:red;}

5-3

从CSS 样式代码插入的形式来看基本可以分为以下3种：

内联式、嵌入式和外部式三种

1,内联式css样式

就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red">这里文字是红色。</p>

css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<p style="color:red;font-size:12px">这里文字是红色。</p>

2,嵌入式css样式，

就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：

span{

color:red;

}

</style>

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

3,外部式css样式

写在单独的一个文件中

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

注意：

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

六，CSS选择器

每一条css样式定义由两部分组成，形式如下：

选择器{

样式;

}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

6-1，标签选择器

标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：

p{font-size:12px;line-height:1.6em;}

上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。

6-2，类选择器

类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。

语法：

.类选器名称{css样式代码;}

注意：

1、英文圆点开头

2、其中类选器名称可以任意起名（但不要起中文噢）

使用方法：

第一步：使用合适的标签把要修饰的内容标记起来，如下：

第二步：使用class="类选择器名称"为标签设置一个类，如下：

第三步：设置类选器css样式，如下：

.stress{color:red;}/*类前面要加入一个英文圆点*/

6-3，ID选择器

在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

6-4,类和ID选择器的区别

相同点：可以应用于任何元素

不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

下面代码是正确的：

<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>

而下面代码是错误的：

<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

下面的代码是正确的(完整代码见右侧代码编辑器)

.stress{

color:red;

}

.bigsize{

font-size:25px;

}

<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px

下面的代码是不正确的(完整代码见右侧代码编辑器)

#stressid{

color:red;

}

#bigsizeid{

font-size:25px;

}

<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>

上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。

6-5，子选择器

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的子元素。如下面的代码：

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li加入红色实线边框。

6-6，包含(后代)选择器

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first span{color:red;}

请注意这个选择器与子选择器的区别

1，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代

2，后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

6-7，通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中任意标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

6-8，伪类选择符

更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}

这行代码会使被<a></a>标签包裹的文字内容中的“胆小如鼠”字体颜色在鼠标滑过时变为红色。

6-9，分组选择符

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

它相当于下面两行代码：

h1{color:red;}

span{color:red;}

七，CSS的继承、层叠和特殊性。

7-1

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

但注意有一些css样式是不具有继承性的。如border:1px solid red;

7-2

根据权值来判断使用哪个css样式

浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

下面是权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低

7-3，层叠

我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

如下面代码:

p{color:red;}

p{color:green;}

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

7-4，重要性

重要性

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。

如下代码：

p{color:red!important;}

p{color:green;}

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

注意：!important要写在分号的前面

八，CSS格式化排版

8-1

文字排版

1，文字排版--字体

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。

body{font-family:"宋体";}

这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）

2，文字排版--字号、颜色

可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：

body{font-size:12px;color:#666}

3，文字排版--粗体

我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。

p span{font-weight:bold;}

4，文字排版--斜体

以下代码可以实现文字以斜体样式在浏览器中显示：

p a{font-style:italic;}

<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

5，文字排版--下划线

有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：

p a{text-decoration:underline;}

<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

删除线，在电商网站上经常见。

p a{text-decoration:line-through;}

8-2

段落排版

1，段落排版--缩进

中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：

p{text-indent:2em;}

注意：2em的意思就是文字的2倍大小。

2，段落排版--行间距

这一小节我们来学习一下另一个在段落排版中起重要作用的行间距属性（line-height），如下代码实现设置段落行间距为1.5倍。

p{line-height:1.5em;}

3，段落排版--字间距、字母间距

文字间隔、字母间隔设置：

如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing来实现，如下面代码：

h1{

letter-spacing:50px;

}

...

<h1>了不起的盖茨比</h1>

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

单词间距设置：

如果我想设置英文单词之间的间距呢？可以使用word-spacing来实现。如下代码：

h1{

word-spacing:50px;

}

...

<h1>welcome to imooc!</h1>

九，CSS盒模型

9-1

元素分类

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。

常用的块状元素有：

常用的内联元素有：

常用的内联块状元素有：

9-2

元素分类--块级元素

什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素，从页使用a元素具有块状元素特点。

a{display:block;}

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

9-3

元素分类--行内元素

在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行内元素（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为行内元素。

行内元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

9-4

元素分类--内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

9-5

盒模型--边框（一）

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：

div{

border:2px solid red;

}

上面是border代码的缩写形式，可以分开写：

div{

border-width:2px;

border-style:solid;

border-color:red;

}

注意：

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

9-6

盒模型--边框（二）

现在有一个问题，如果有想为p标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css样式中允许只为一个方向的边框设置样式：

div{border-bottom:1px solid red;}

同样可以使用下面代码实现其它三边上、右、左边框的设置：

border-top:1px solid red;

border-right:1px solid red;

border-left:1px solid red;

9-7

盒模型--边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

div{margin:20px 10px 15px 30px;}

也可以分开写：

div{

margin-top:20px;

margin-right:10px;

margin-bottom:15px;

margin-left:30px;

}

如果上下左右的边界都为10px;可以这么写：

div{ margin:10px;}

如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}

总结一下：padding和margin的区别，padding在边框里，margin在边框外。

9-8

盒模型--填充

元素内容与边框之间是可以设置距离的，称之为填充。填充也可分为上、右、下、左。如下代码：

div{padding:20px 10px15px 30px;}

顺序一定不要搞混。可以分开写上面代码：

div{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

}

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

如果上下填充一样为10px，左右一样为20px，可以这么写：

div{padding:10px 20px;}

9-9

盒模型代码简写

还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;

可缩写为：

margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代码：

margin:10px 20px 10px 20px;

可缩写为：

margin:10px 20px;

3、如果left和right的值相同，如下面代码：

margin:10px 20px 30px 20px;

可缩写为：

margin:10px 20px 30px;

注意：padding、border的缩写方法和margin是一致的。

9-10

颜色值缩写

关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

例子1：

p{color:#000000;}

可以缩写为：

p{color: #000;}

例子2：

p{color: #336699;}

可以缩写为：

p{color: #369;}

十，CSS布局模型

10-1

css布局模型

清楚了CSS 盒模型的基本概念、盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。

在网页中，元素有三种布局模型：

1、流动模型（Flow）

2、浮动模型 (Float)

3、层模型（Layer）

10-2

流动模型（一）

流动（Flow）：自上而下。

先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

10-3浮动模型

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。

div{

width:200px;

height:200px;

border:2px red solid;

float:left;

}

注意：设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。

10-4什么是层模型？

什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。

如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

1，层模型--绝对定位（相对于父类）

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

}

2，层模型--相对定位（相对于以前）

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

如下代码实现相对于以前位置向下移动50px，向右移动100px;

#div1{

width:200px;

height:200px;

border:2px red solid;

position:relative;

left:100px;

top:50px;

}

3，层模型--固定定位（相对于网页窗口）

固定住某一坐标。

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#div1{

width:200px;

height:200px;

border:2px red solid;

position:fixed;

left:100px;

top:50px;

}

10-5Relative与Absolute组合使用

小伙伴们学习了12-6小节的相对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box2">相对参照元素进行定位</div>

</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{

width:200px;

height:200px;

position:relative;

}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{

position:absolute;

top:20px;

left:30px;

}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

有任何关于编程的问题都可以私信我，我看到后会及时解答。

编程小石头，为分享干货而生！据说，每个年轻上进，颜值又高的互联网人都关注了编程小石头。

tml入门基础笔记(简单实用)

一、初识html

1.HTML：Hyper Text Markup Language（超文本标记语言）

java是一门编译性语言

html是一门解释性的标记语言

超文本：文字、图片、音频、视频、动画、超链接

标记：就是指组成HTML的各种标签

2.HTML5的优势：

1、各大浏览器厂商对它的支持

2、市场的需求

3、跨平台

3.W3C标准：

1、结构化标准：指用什么语言去搭建整个网站（html 5）

2、表现化标准：指用什么去装饰整个网站（css3）

3、行为标准：指用什么去实现网站的功能（JavaScript，jQuery）

4.html的基本结构：

<html>

<head>

<title>天猫精选-理想生活上天猫</title>

</head>

大家好！！！！！

</body>

</html>

双标签：有个两个标签成对出现的叫做双标签

表示HTML网页的开始，表示网页的结束

表示网页头部的开始，表示网页头部的结束

表示网页身体的开始，表示网页身体的结束

表示网页标题的结束

标题标签

<h1></h1>....<h6></h6>:会对文字进行加粗，并且改变字体的大小，还会进行换行

段落标签

<p></p>:表示它独占一行，会保留段落之间的间距

加粗

<strong></strong>:表示加粗

斜体

<em></em>:表示斜体

字体设置

<font></font>:表示字体

属性：color颜色

face字体的样式

size字体的大小

单标签：只有一个，开始就结束的叫做单标签

属性：charset = “utf-8”;utf-8表示国际编码格式，所有的字符都能识别

换行标签

<br/>：表示换到下一行

水平线标签

<hr/>:表示水平线

属性：width表示水平线的宽度

size表示水平线的厚度

color表示水平线的颜色

align表示水平线的水平位置，left左边，center中间，right右边

图像标签

src表示的是图片地址

绝对路径：直接写完整图片所在的位置

相对路径：先找到和你的网页所在同一级的图片所在位置，然后再去在这个基础

去找图片的位置，如果图片在下一级那么使用“/”来找到它，如果

上一级使用“..”来找到它

alt表示的是图片加载失败的替代文字

title表示的是鼠标悬浮时图片的提示文字

width表示图片的宽度

height表示图片的高度

特殊标签：

大于符号：>（great than）

小于符号：<（less than）

空格符号：

版权符号：©

注释：

5.超链接标签

href表示链接的地址，使用相对路径的方式去使用

target表示连接的方式

_blank表示在新窗口打开

_self表示在本窗口打开

_parent表示在父窗口打开

1、页面间的链接，用于两个页面之间相互的跳转

2、锚链接，用于页面之间定位

①要设置一个锚点，语法锚点

②将点击之后要跳转的超链接设置跳转的锚点位置，语法：

如果不在同一个页面中，先写好要跳转页面所在的位置，然后再写锚点的名字

3、功能性链接 (发邮件、msn、可以打开本地的相应的客户端)

语法：

二、网页媒体元素

1.视频元素<video></video>

属性：src表示添加视频的路径(位置)

controls表示在添加的视频元素上添加播放控件，只有一个属性值

/autoplay表示自动播放（慎用），只有一个属性值

如果属性只有一个值，属性值可以省略不写

source表示引用的视频源路径，一般会引用多个源路径，以避免浏览器不兼容的问题

2.音频元素<audio></audio>

属性：src表示添加视频的路径（位置）

controls表示在添加的音频元素上添加播放控件，只有一个属性值

/autoplay表示自动播放（慎用），只有一个属性值

source表示引用的音频源路径，一般会引用多个源路径，以避免浏览器不兼容的问题

3.内嵌框架<iframe></iframe>

属性：src表示添加内嵌内容的路径

name表示这个框架的名字

width表示这个框架的宽度

height表示这个框架的高度

frameborder表示内嵌框架的边框

scrolling表示是否出现滚动条

作用：

1、将多个网页重复的部分抽取出来，通过内嵌框架的方式，放到各个网页中

2、使用<a>标签跳转到指定的框架中，先在指定要跳转到的框架中取一个name，使用target=“name的值”

<a>标签一定要写href属性才能生效，如果不想跳转到任何页面，那么href="#",表示该超链接为空

链接，点击空链接会刷新页面

4.语义化结构标签：主要是为了让结构更加清晰化

<header>表示页面头部内容

<section>表示页面主体内容

<footer>表示页面底部内容

<nav>表示导航栏内容

<aside>表示侧边栏内容

<article>表示页面独立文章内容

三、表单元素

1.表单<form></form>

属性：1、method表示表单的提交方式，有两个值，第一个叫post，第二个叫get

get方式的请求会将表单中所有表单元素信息显示在地址栏中

post方式的请求必须有一个服务器来处理请求，所有表单元素的信息不会显示在地址栏中，在实际开发中一般使用post方式请求

2、action表单要提交的位置

2.表单元素

语法：

属性： name表示input标签的名字

value表示input标签的值

type表示input标签的元素类型

文本框：专门用来输入文字

语法：<input type="text" name="userName" value="admin"/>，type的值为text

size表示文本框的长度

maxlength表示允许输入的最大字符长度

密码框：用来输入密码

语法：<input type="password" name="userName" value="admin"/>，

type的值为password

size表示文本框的长度

maxlength表示允许输入的最大字符长度

单选按钮

<input type="radio" name="sex" value="boy"/>男

<input type="radio" name="sex" value="girl"/>女

注意：单选按钮的每个input中的name值必须相同，不然不能实现选择一个切换的作用

checked属性表示默认选中

复选框

<input type="checkbox" name="hobby" value="" />打游戏

<input type="checkbox" name="hobby" value="" checked/>睡觉

<input type="checkbox" name="hobby" value="" />出去约会

复选框可以选择多个，并且可以取消

checked属性表示默认选中

下拉列表框

<select>表示定义了一个列表框

<option>表示列表项

</select> selected表示默认选中

按钮

1、提交按钮submit，它可以将表单中的信息提交到指定的位置

2、重置按钮reset，它可以将表单中的信息恢复到默认值

3、普通按钮button，它只是单纯起一个按钮的作用，需要和JavaScript和jQuery一起使

用，实现各种功能

4、图片按钮image，src表示图片的路径，也具有提交作用

多行文本域：需要输入多行文字

<textarea>表示定义了一个多行文本域

cols表示文本域的宽度

rows表示文本域的高度

文件域：上传文件

需要设置编码属性enctype="multipart/form-data"，表示将表单数据分为多部分提交

邮箱：可以进行邮箱验证

网址：可以进行网址验证

数字：提供输入数字

min表示允许的最小值

max表示允许的最大值

step表示每次增加或者减少的数字间隔

value表示默认值

搜索框：可以搜索提示关键字的文本框

3.表单的高级应用

1、隐藏域：主要应用于在提交信息时不想让用户看到的信息进行隐藏提交

2、只读和禁用属性

只读：表示在网站上用户只能够查看，不能够修改的数据，使用readonly添加只读

禁用：一般表示在满足某个条件之后，才能使用的功能，使用disabled添加禁用

3、表单元素的标注

①选择要点击后跳转文本加上<label>标签

②选择跳转对应的表单元素，给它加上id这个属性（id属性值在整个网页只能出现一

次，不可以有重复的id值）

③在<label>中添加for属性，然后属性值为对应的id值

4.表单的初步验证

为什么要进行表单验证

1、减轻服务器的压力

2、保证数据的可行性和安全性

5.验证的方法

1、placeholder表示这个表单元素期待用户输入什么信息，它是起提示作用，当用户输入

内容时，提示信息隐藏

2、required表示表单元素填写内容不能为空，使用了required的该表单元素必须填写

3、pattern表示表单中的内容必须和输入的正则表达式一致

^表示正则表达式的开始

$表示正则表达式的结束

[]表示在中括号中任选其中一个

\d表示匹配0~9之间的任意一个数

{n}表示前面的一种匹配方式匹配的次数，表示匹配n次

-表示就是-

\w表示匹配所有字母或数字或下划线

\u4E00-\u9FA5匹配汉字

{4,10}表示匹配前面的一种匹配方式4~10次

A-Z表示匹配大写的英文字母

a-z表示匹配小写的英文字母

|表示或者

四、初识CSS3

1.CSS:层叠样式表，它是专门用来设计网页风格的

2.CSS的优点

1、内容与表现分离，便于网页维护

2、网页的表现统一，统一风格

3、丰富的样式，使得页面布局更加灵活

4、减少网页的代码量，增加网页的浏览速度

5、运用独立于页面的CSS，有利于网页被搜索引擎收录

3.CSS样式的语法

选择器{

声明(可以为1~n条)

属性:属性值;

}

选择器：需要添加这些声明的元素（标签）

声明：由属性和属性值组成，中间用“:”,使用“;”结尾

4.在html中添加样式的方式

1、行内样式

在需要添加样式的标签中，添加一个style属性，在style属性中添加声明

2、内部样式

在里面添加一个,然后通过选择器和声明添加样式

3、外部样式

它可以实现表现与内容的彻底分离，可以让样式表重复使用，便于维护和修改，并且

可以极大的减少代码量

①链接外部样式表

语法：

href表示引用的哪一个外部样式表

rel表示使用的是样式表

type表示文本类型为css类型

②导入外部样式表

语法：@import url(“css/第一个外部样式.css”);

区别：链接外部样式表它是先将外部的CSS样式添加到网页中进行加载，再加载网页的

内容，导入外部样式表是先加载网页中的内容，再进行外部样式表的加载

样式表的优先级别

行内样式>内部样式>外部样式，遵循“就近原则”

5.CSS3中的选择器

一、基本选择器

1、标签选择器：以标签名称作为选择器的名称

选择所有网页的该标签元素，比如：p表示选择该网页中所有的p标签

2、类选择器：以类的名称作为选择器的名称，并且在选择器的名称前加上“.”，类

名能够重复使用

3、id选择器：以id的名称作为选择器的名称，并且在选择器的名称前加上“#”，id

名在该网页只能出现一次，具有唯一性

选择器的优先级

id选择器>类选择器>标签选择器

二、层次选择器

1、后代选择器

语法：E F{声明}，E表示的是被匹配的元素，F表示被匹配的E的后代元素

比如：body p{},表示匹配所有body的后代p元素

2、子选择器

语法：E>F{声明}，E表示的是被匹配的元素，F表示被匹配的E的子元素

比如：body>p{},表示匹配所有body的子元素中的p元素

3、相邻兄弟选择器

语法：E+F{声明}，E表示的是被匹配的元素，F表示被匹配的E的相邻兄弟元素

比如：.p1+p{},表示匹配.p1的相邻元素并且为p元素，只匹配后面的元素

4、通用兄弟选择器

语法：E~F{声明}，E表示的是被匹配的元素，F表示被匹配的E的所有兄弟元素

比如：.p1~p{},表示匹配.p1的所有兄弟元素并且为p元素，只匹配后面的

元素

三、结构伪类选择器

1、语法：E>F:first-child，E表示的是被匹配的元素，F表示被匹配的F:first-

child表示被匹配的E的子元素中第一个元素并且这个元素是F元素

2、语法：E>F:last-child，E表示的是被匹配的元素，F表示被匹配的F:last-

child表示被匹配的E的子元素中最后一个元素并且这个元素是F元素

3、语法：E>F:nth-child(n)，E表示的是被匹配的元素，F表示被匹配的F:nth-

child(n)表示被匹配的E的子元素中最后一个元素并且这个元素是F元素

even表示匹配所有偶数行

odd表示匹配所有奇数行

4、语法：E>F:nth-of-type(n)，E表示的是被匹配的元素，F表示被匹配的F:nth-

of-type(n)表示被匹配的E的子元素中所有的F元素，然后再去找第n个

E>F:nth-child(n)表示先匹配所有的儿子，再去找第几个儿子是不是F元素，如果是

就能匹配，E>F:nth-of-type(n)先匹配所有F元素，再去找第几个元素

四、属性选择器

1、E[attr],E表示匹配的E元素，attr表示属性，匹配具有attr属性的E元素

2、E[attr=val],匹配具有attr属性，并且属性值为val的E元素

3、E[attr^=val],匹配具有attr属性，并且属性值以val开头的E元素

4、E[attr$=val],匹配具有attr属性，并且属性值以val结尾的E元素

5、E[attr*=val],匹配具有attr属性，并且属性值中包含val的E元素

六、CSS3美化网页元素

前言：<span>这个标签没有任何实际意义，它只是为了突出显示某个部分，它是一个行内元素，不能够独

占一行，并且该元素所占的区域是根据内容大小决定，不会因为改变宽度和高度改变它的大小

<div>这个标签没有任何实际意义,它只是为了将某些部分装起来，它是一个块元素，会独占一行，

并且该元素所占的区域是根据它的宽度和高度决定，会因为改变宽度和高度改变它的大小

1.字体样式：

1、font-family字体类型，字体类型的值有：“楷书”、“隶书”、“微软雅黑”、英文字体

可以写多个字体格式，使用“，”隔开，如果同时存在英文和中文字体，英文就显示

英文字体，中文就显示中文字体，并且英文字体要放在中文字体前面

2、font-size字体大小，就是改变字体大小，字体大小的单位使用px

3、font-style

字体风格，normal正常的（默认）、italic（倾斜的）、oblique（倾斜的）

4、font-weight字体粗细，bold（粗体）、bolder（更粗的）、lighter（细的）

font字体属性，需要满足字体属性设置顺序，风格=》粗细=》大小=》类型

2.文本样式：

1、color

文本颜色

①使用英文单词去表示颜色

②使用十六进制的方式表示，并且如果相邻的两两数字相同，可以缩写为一位

③使用三原色的方式去表示，语法：rgb(r,g,b)，rgba(r,g,b,a)

r,g,b取值从0~255

a表示透明度，取值从0~1,0表示完全透明，1表示完全不透明

2、text-align

水平对齐方式，设置文本的水平对齐方式

属性值：center居中，left居左，right居右

3、vertical-align垂直对齐方式，设置文本的水平对齐方式

属性值：middle居中，top居上，bottom居下

4、text-indent设置文本首行缩进，属性值一般使用em相对单位，em表示长度为文本字符

大小的长度

5、line-height设置文本行高，属性值使用px为单位，还可以设置为倍数

6、text-decoration

文本装饰

属性值：①none表示没有任何装饰

②underline表示下划线

③overline表示上划线

④line-through表示删除线

7、text-shadow文本阴影

语法：text-shadow : color x-offset y-offset blur-radius; color阴影颜色

x-offset表示X轴偏移量，正数往右偏移，负数往左偏移

y-offset表示Y轴偏移量，正数往下偏移，负数往上偏移 blur-radius表示模糊半径

2.超链接伪类

1、a:link单击访问前的超链接样式

2、a:visited单击访问后的超链接样式

3、a:hover鼠标悬浮的超链接样式

4、a:active鼠标单击未释放的超链接样式

列表样式

1、list-style-type表示设置列表的标记类型

常用类型：none表示没有标记

disc表示实心圆点

square表示实心正方形

circle表示空心圆点

decimal表示数字

2、list-style-image使用图像代替标记

3、list-style-position表示在哪个位置使用标记

4、list-style设置列表属性，通常使用这个属性

3.背景样式

1、背景颜色background-color

①使用英文单词去表示颜色

②使用十六进制的方式表示，并且如果相邻的两两数字相同，可以缩写为一位

③使用三原色的方式去表示，语法：rgb(r,g,b)，rgba(r,g,b,a)

r,g,b取值从0~255

a表示透明度，取值从0~1,0表示完全透明，1表示完全不透明

有一个特殊值，transparent表示透明的意思，它是默认值

2、背景图片background-image

url表示的图片路径

3、背景重复方式background-repeat

repeat表示沿水平方向和垂直方向进行重复

no-repeat表示不重复

repeat-x表示沿水平方向重复

repeat-y表示沿垂直方向重复

4、背景位移background-position：X轴方向偏移量 Y轴方向偏移量

①可以使用像素值来表示偏移量，比如：50px 50px;

②可以使用百分比来表示偏移量，比如：20% 50%;

③可以使用英文字母来表示偏移量，比如：center middle;

5、背景属性设置所有的背景样式

6、背景尺寸background-size

①auto表示背景图片保持原样，默认值

②percentage表示背景图片大小根据容器大小的百分比决定大小，只写一个值表示只

对一个值进行设置，另外一个值会根据图片本身的比例等比例缩放

本身比例为4:3

400px 300px

800px 600px

1200px 900px

③直接使用像素值px来设置图片大小，只设置一个值和百分比一样

④cover放大充满整个容器

⑤contain放大充满整个容器，如果有一个方向充满了整个容器，那么不在放大

4.渐变

1、线性渐变

：颜色沿着一条直线过渡

linear-gradient(渐变方向,颜色1，颜色2，颜色n)

不加前缀方向使用“to 方向”表示往哪个方向进行渐变，加上前缀之后使用“方向”

表示从哪个方向开始渐变

2、径向渐变：从一个起点朝所有方向混合

-radial-gradient(渐变方向,颜色1，颜色2，颜色n)

5.浏览器前缀：(避免兼容问题)

IE浏览器前缀-ms-

Chrome浏览器前缀-webkit-

Safiri浏览器前缀-webkit-

Opera浏览器前缀-o-

Firefox浏览器前缀-moz-

七、盒子模型

1.盒子模型：就是一个虚拟的矩形容器

2.盒子模型的组成：

1、content（内容）：表示主要内容

2、padding（内边距）：表示内容与边框之间的距离

3、border（边框）：表示包着内容的外框，边框是有一定宽度的

4、margin（外边距）：表示边框外部与其他盒子的距离

3.边框border

1、border-color边框颜色

①使用英文字母来表示颜色

②使用十六进制来表示颜色

③使用三原色来表示颜色，rgb(),rgba()

所有的块元素都是一个盒子模型

border-top-color上边框，border-bottom-color下边框

border-left-color左边框，border-right-color右边框

※※※※※※※

可以使用border-color去设置，可以取1~4个值任意一个

如果设置一个值表示对应所有的方向

如果设置两个值，第一个值表示上边框和它对应边框的值，第二个值表示右边框和它

对应的值

如果设置三个值，第一个值表示上边框，第二个值表示右边框和它对应的值，第三个

表示下边框的值

如果设置四个值，第一个值表示上边框，第二个值表示右边框，第三个值表示下边框，

第四个值表示左边框，按照顺时针的顺序依次设置

2、border-width边框的粗细

使用像素值去设置边框的粗细，网页一般使用这种方式

设置边框颜色的方式一样

3、border-style边框的样式

none表示没有边框

solid表示实线边框

dashed表示虚线边框

dotted表示点线边框

设置边框样式的方式和置边框颜色的方式一样

border边框属性

可以设置边框的所有属性，不需要按照顺序

border-left设置左边框的属性

border-right设置右边框的属性

border-bottom设置下边框的属性

border-top设置上边框的属性

外边距margin

margin-top设置上外边距的距离

margin-right设置右外边距的距离

margin-bottom设置下外边距的距离

margin-left设置左外边距的距离

可以使用margin去设置，可以取1~4个值任意一个

和设置边框颜色的方式一样

使用margin设置盒子居中，语法：margin：0px auto;需要满足两个条件

①必须为块元素

②必须设置盒子的宽度和高度

内边距padding

padding-top设置上内边距的距离

padding-right设置右内边距的距离

padding-bottom设置下内边距的距离

padding-left设置左内边距的距离

可以使用padding去设置，可以取1~4个值任意一个

和设置边框颜色的方式一样

4.盒子模型的尺寸

盒子模型的尺存分为盒子模型的宽度和高度

盒子模型的外盒宽度=内容宽度+内边距的左右宽度+边框左右宽度+外边距左右宽度

盒子模型的外盒高度=内容高度+内边距的上下高度+边框上下高度+外边距上下高度

盒子模型的内盒宽度=内容宽度+内边距的左右宽度+边框左右度

盒子模型的内盒高度=内容高度+内边距的上下高度+边框上下度

5.拯救布局

使用box-sizing拯救布局，有3个值

1、content-box：默认值，表示设置的宽度和高度等于内容的宽度和高度，盒子的宽度和

高度通过计算获得

2、border-box：表示设置的宽度和高度等于盒子的宽度和高度

3、inherit：继承父元素的盒子模型模式

6.圆角边框border-radius：为矩形边框设置圆角效果

语法：border-radius:可以设置1~4个值;

设置一个值会对四个角进行设置

设置两个值，第一个值设置左上角和它对角的值，第二值是设置右上角和它对角的值

设置三个值，第一个设置左上角，第二个设置右上角和它对角的值，第三个设置右下角的值

设置四个值，第一个设置左上角，第二个设置右上角，第三个设置右下角，第四个设置左下角

设置圆形

①必须盒子的宽度和高度相同

②圆角边框的值必须将四个角的值都设置为宽度的一半或者50%

设置上半圆：宽度不变，高度变为一半，第一个值、第二值为一半，第三和第四个为0

设置下半圆：宽度不变，高度变为一半，第一个值、第二值为0，第三和第四个为一半

设置左半圆：宽度为一半，高度变不变，第一个值、第四值为一半，第二和第三个为0

设置左半圆：宽度为一半，高度变不变，第一个值、第四值为0，第二和第三个为一半

扇形：高度和宽度都为一半，需要哪一个方向的就添加哪个角的值，其他都为0

7.盒子阴影box-shadow

语法：box-shadow:inset x-offset y-offset blur-radius color;

第一个参数表示阴影的类型，不写为外阴影，inset表示为内阴影

第二个参数表示阴影的水平偏移量，正数往右，负数往左

第三个参数表示阴影的垂直偏移量，正数往下，负数往上

第四个参数为模糊半径，模糊范围大小，越往外越模糊

第五个参数为阴影颜色

八、块元素与行内（内联）元素

1.块元素与行内（内联）元素的特性

1、块元素：独占一行，并且可以设置元素的宽高(div,h1-h6,p,列表)

2、行内元素：不是独占一行，设置宽高对它不起作用，宽度由元素内容撑开。

2.display:显示（元素以哪种形式进行显示）

1、block：块级元素的默认值，在元素前后会有换行

2、inline:行内元素的默认值，元素前后没有换行

3、inline-block:行内块元素，元素既有行内元素的特性(可以和其他元素显示在同一行)又有块级元素的特性（可以设置宽高）。

4、none:该元素不被显示。

3.float:浮动:使得块级元素排列在同一行

1、left:左浮动

2、right：右浮动

3、none:元素不浮动，按照标准文档流显示

4.clear：清除浮动

1、left：清除元素左边的浮动

2、right:清除元素右边的浮动

3、both：清除两侧

4、none:默认值，不清除浮动

5.解决父级边框塌陷的方法

1、在浮动元素的后面加空div，并且给这个空div设置样式：clear：both

2、给父级设置高度height

3、给父级添加属性overflow:auto;

4、给父级添加伪类after

#father:after{

content:’’;

display:block;

clear:both

}

6.overflow:属性用来处理溢出

1、visible:可见的，内容元素会被显示出来，但是在父级边框的外面

2、hidden:内容元素会被显示在边框里，但是超出的部分会被隐藏

3、scroll:内容元素会被隐藏，但是浏览器会提供滚动条，滚动以显示超出的内容

4、auto:当内容元素超出父级的高度时就提供滚动条以显示超出的内容，若内容未超出就不显示滚动条。

九、定位与动画

1.定位属性:position

1、static:默认值，没有定位

2、relative：相对定位，相对于元素原本的位置进行偏移，元素原来的位置会被保留，浮动元素设置相对定位后，是相对元素浮动以后的位置进行偏移。

3、absolute:绝对定位，相对于离元素最近的已经设置定位属性的祖先元素为基准进行偏移，元素原来的位置不会被保留，如果没有已经定位的祖先元素，则以浏览器窗口为基准进行偏移。

4、fixed：固定定位，以浏览器窗口为基准进行偏移。

5、定位的元素的层级会比未定位的元素的级别更高，相对定位通常用于给父元素设置定位属性，但是不设置不偏移量，结合绝对定位使用，固定定位用于广告栏，返回顶部的图标，楼层导航等。

6、z-index：改变定位元素的堆叠顺序，值为整数，值越大，级别越高，显示在最上面。

2.动画

1、变形

语法:transform:变形函数;

2、平移函数：translate(x,y);x代表水平方向的位移，y代表垂直方向的位移，单位为px；

3、缩放函数：scale(x,y);x代表元素宽度的缩放量，y代表高度的缩放量。

4、倾斜函数：skew(x,y);x代表元素水平方向的倾斜度数，y代表垂直方向的倾斜度数，单位是deg。

5、旋转函数：rotate(x);x代表旋转的度数，为正数时顺时针旋转，为负数时逆时针旋转。

2、过渡transition：是一种动画转换过程，渐慢，渐快等。

语法：transition:过渡样式的属性过渡花费的时间过渡函数(过渡的速度) 过渡的延迟时间；

1)使用步骤

A、在元素默认样式中声明元素默认的样式

B、声明元素最终呈现的样式，如悬浮(hover)，获取焦点(focus)时的样式

C、在元素默认的样式中添加过渡属性。

3、过渡函数：

1、ease：默认值，由快到慢

2、linear:匀速

3、ease-in:越来越快

4、ease-out:越来越慢

5、ease-in-out:先越来越快再越来越慢

3.动画animation

1、创建关键帧(浏览器兼容前缀是加在@与keyframes中间的)

语法：@keyframes 动画名称{

0%{元素样式}

25%{元素样式}

…

}

4.调用动画

在元素样式中调用

语法：animation:动画名称动画次数动画播放的方向动画播放状态

1)、动画播放次数：为整数，默认值为1，无限循环infinite

2)动画发生的操作：forwards(向前) backwards（向后） both（既可以向前又可以向后）

3)动画播放状态：running(播放) paused(暂停)

4)动画播放方向：normal（向前） alternate(偶数次向前)

在线咨询

上一篇：JavaScript代码怎样引入到HTML中？
下一篇：JavaScript代码怎样引入到HTML中？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

上海HTML5开发培训机构大咖分享html虚线边框设置教程

，html+css基础

1-1

1-2

1-3

1-4

1-5

2-1

2-2

2-3

2-4

2-5

2-6

2-7

2-8

2-9

3-1

3-2

3-3

3-4

3-5

4-1

4-2

4-3

4-4

4-5

4-6

4-7

5-1

5-2

5-3

注意：

6-1，标签选择器

6-2，类选择器

6-3，ID选择器

6-4,类和ID选择器的区别

6-5，子选择器

6-6，包含(后代)选择器

6-7，通用选择器

6-8，伪类选择符

6-9，分组选择符

7-1

7-2

7-3，层叠

7-4，重要性

8-1

8-2

9-1

9-2

9-3

9-4

9-5

注意：

9-6

9-7

9-8

9-9

9-10

10-1

10-2

10-3浮动模型

10-4什么是层模型？

10-5Relative与Absolute组合使用

有任何关于编程的问题都可以私信我，我看到后会及时解答。

您的项目需求