第一章 HTML 语言基础
第一节HTML基本结构
1.HTML概念
HTML（Hyper text Mark-up Language）超文本标记语言包含很多不同的标签，用不同的标签定义不同的内容开发网页的基础语言
2.HTML的文档结构
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
....
</head>
<body>
...
</body>
</html>-
<html></html>:文档的根标签，所有的内容都必须包含在该标签内，<!Doctype html>开头 -
<head></head>:文档的头部，包含title、meta、style、script -
<body></body>:文档的主题，内容的开始结束 -
<title></title>:标题，显示在标题栏上的内容 -
<meta>:元素可提供有关页面的元信息 -
其中，用来设置防止中文显示乱码的问题的代码是
<meta charset="UTF-8">
3.html注释和特殊字符
<！--注释内容-->特殊字符：常用五种
©:版权符号
®：注册商标
 ：空格
>：大于号
<：小于号
4.文件路径
4.1相对路径
相对于当前文件的路径
进入上层：..
进入下层：/ 本地文件/与\都可使用 网络文件必须使用/
4.2绝对路径
带有根目录或者根地址的路径，称为绝对路径
第二节常用标签
1.基本标签
1.1<p></p>:段落标签
1.2<h1>~<h6>:标题标签
1.3<br/>:换行符
1.4<img/>图片标签
<img>属性
1.src:源，路径
2.title：鼠标悬停在图片上时显示的文字，无论是否加载出来
3.alt：图片加载失败时， 显示的文字，一般用于告知用户
4.align：图片的水平对齐方式，可用于制作文字环绕实现图片下沉效果。
5.width：图片的宽度
6.height：图片的高度
图片格式：
bmp格式：windows位图，图片清晰度高，但是尺寸大，网页中的图片一般不用bmp
jpg或jpeg格式：文件扩展名为.jpg或.jpeg,图像品质高，下载速度快。
gif格式：图片压缩比高，磁盘空间占用较少，可制作2D动画文件。
png格式：是网上接受的最新图像文件格式。PNG能够提供长度比 GIF小30%的无损压缩图像文件
1.5<a></a> 超链接 锚点
<a href="路径">链接文字</a>路径：内外部都可以链接
例如：
<a href="http://www.baidu.com">百度</a>
<a href="xxx.html"></a>锚点：
<a name="锚点名称">锚点名称（可不写）</a>链接锚点的方式 使用超链接可以跳转到指定锚点
当在同一页面时：
<a href="#锚点名称">文本</a>当在不同页面时：
<a href="页面路径#锚点名称">文本</a>
1.6纯净标签
<span></span>标签，行内元素 inline 常用于页面布局
<div></div>标签，行块元素 块状 block 常用于限定内容样式
1.7格式化标签
<center></center>:居中标签
<hr/>:分割线
<ol><ol>:有序列表 一般与<li></li>标签连用
<ul></ul>:无序列表 一般与<li></li>标签连用
<li></li>列表项
<pre></pre>预定义格式标签
<dl></dl>自定义列表
<dt></dt>自定义列表标题
<dd></dd>自定义描述
1.8字体标签
<u></u>:下划线 underline
<i></i>: 斜体 italic
<sub></sub>:下标
<sup></sup>: 上标
<b></b>:粗体 bold
<font></font>:修饰字体样式
<font size="" color="" face="">文本</font>
size:大小有七个等级：1~7
color：设置字体颜色
face：设置字体类型注意：一般不使用行内标签包含块状标签；
2.H5新增标签
2.1文档结构标签
<header><header>: 页眉标签
<footer></footer>:页脚标签
<nav></nav>:导航标签
2.2小型文本标签
<small></small>:
字体较小的文本类型，一般用于解释文本
<ruby>睚眦<rt>ya zi</rt></ruby>
2.3标记文本标签
<ins></ins>:新增效果
<del></del>:删除效果
2.4视频标签
<video></video>: 视频
属性值：
src ：路径
width：大小
controls：控件
autoplay: 是否自动播放
第三节表格
1.基本标签
<table></table>:表格
属性：
border：边框
cellspacing：单元格间距
cellpadding：单元格距离
width：宽
height：高
bgcolor：背景颜色
background：背景图片
align：水平对其方式
<th></th>:表头 上级-tr 自动加粗居中
<tr><tr>:行 上级-table 不可设置背景图片
<td></td>:单元格 上级-tr 可设置背景图片
2.结构标签
<thead></thead>: 表格头部
<tbody></tbody>: 表格主体部分
<tfoot></tfoot>:表格的脚部
<caption></caption>: 表的标题
第四节表单
1.根标签<form></form>
表单：用于搜集用户的信息，并将信息发送给指定服务器程序进行处理。
有三个重要属性
1.name：元素名称
2.action：路径
3.method：方法，get和post方法
1.get：默认，会创建一个请求，该请求会返回页面的URL，一个问号和表单提交的值。
2.post: 采用代码块的方式传输数据
2.输入框：<input/>
表单中常用的标签
属性
1.id 名字
2.value：设置表单元素的初始值。
3.maxlength：最大输入字符数，默认无限大。
4.type：类型
类型 <input type=""/>
1.text：默认，文本框
2.radio：单选框，value：获取选择的值，若要实现单选效果需要给相同的name，构成互斥关系
3.checkbox：多选框，设置默认选中状态：checked
4.reset：重置表单，恢复初始状态 按钮文本(value=”文本“)
5.submit：提交按钮，带有初始值（value="文本"）
6.button：按钮，无初始值需要设置，和JS脚本结合使用
7.file：文件，可以查询获取文件的路径，name文件框的名字
8.image：图片，与img标签使用相似，触发按钮提交表单
9.hidden：隐藏
3.补充
1.H5<input type=""/>新类型
color 颜色 选择颜色
date 日期类型，可直接选择日期，name=” 日期框名字“
email 邮箱 限定只能输入email会提醒请输入邮箱
number 数字 限定数字
2.H5新属性
placeholder： 当文本框没有输入值时，显示的内容，其提示内容不会被提交
required：是否允许为空 required="required"
autofocus：自动获取焦点 autofocus="autofocus"
3.下拉选项框<select></select>
<option></option>: 选项，选中状态为：selected，
书写方式：selected=”selected“
4.多行文本框<textarea><textarea>
属性：
name ：文本框名字
rows：行数
cols：列数
5.分组框<fieldset></fieldset>
<legend></legend>: 分组框标题
<fileset>
<legend>标题</legend>
</fileset>
第二章 样式表基础
第一节 使用CSS
1.什么是CSS
css是（Cascad Style Sheet），称为层叠样式表，也叫级联样式表。用于对HTML标签元素进行样式修饰，并且能实现HTML内容和样式分离的标签化语言。
2.为什么使用CSS
3.如何使用CSS
/*例子*/
<html>
<head>
<style>
span{font-family:黑体; }
.red{font-size:50px; color:red;}
.orange{color:#FFBB00;font-size:50px;}
.blue{color:blue;font-size:50px;}
.green{color:green;font-size:50px;}
</style>
</head>
<body>
</body>
</html>4.基本选择器
选择器：用于选择页面中对应的HTML元素，使这些元素自动应用选择器定义的样式规则，实现不同的样式效果。
4.1标签选择器
使用HTML标签作为选择器来定义CSS样式，那么颜面中和选择器匹配的HTML元素，会自动应用选择器中定义的样式进行内容的修饰
语法：
HTML标签名
{
样式属性1：属性值；
。。。
}
/*例子*/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>my html</title>
<style type="text/css">
p{
/*字体大小*/
font-size:20px;
/*字体颜色*/
color:red;
}
h1{
/*字体类型*/
font-family:隶书;
/*字体大小*/
font-size:50px;
}
i{color:red;}
b{color:blue;}
span{color:green;}
sub{color:purple;}
u{color:yellow;}
</style>
</head>
<body>
<h1>静夜思</h1>
<small>李白</small>
<p>窗前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
<i>红</i><u>黄</u><b>蓝</b>
<span>绿</span><sub>紫</sub>
</body>
</html>
效果：
4.2类选择器
如果页面中的多个HTML元素，需要使用一类样式，此时我们可以使用类选择器来定义CSS样式。
类样式的定义:
.类名
{
样式属性:属性值;
...
}类样式的引用:
<HTML标签 class="类名"></HTML标签>语法说明:类样式需要先定义再使用，类名可以使用字母，数字，下划线或中划线构成，类名前要加.
在引用类样式的时候，需要在标签中通过class属性来引用，应用类样式时，前面不能加.
4.3id选择器
id选择器和类选择器的定义方式和使用方式类似。id选择器的定义要在id名前加#，在引用id选择器定义的样式时，HTML标签需要使用id属性来引用id名，以此使用id样式。
语法:
使用id选择器定义id样式
#id名
{
样式属性:属性值;
...
}在页面中引用id样式
<HTML标签名 id="id名"></HTML标签名>语法说明:定义id样式时，要使用#开始, 使用id样式时，标签中要使用id属性来引用id样式。
id样式和类样式的区别，在标签中的id属性，在整个页面中必须是唯一值。一般用id定义页面的框架结构。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.blue{color:blue; font-size:50px;}
.green{color:green;}
.yellow{color:yellow;}
#top{
height:100px;
background-color:gray;
margin-bottom:10px;
}
#main{
height:500px;
background-color:blue;
margin-bottom:10px;
}
#bottom{
height:150px;
background-color:yellow;
}
.red{color:red;}
</style>
</head>
<body>
<div id="top"></div>
<div id="main"></div>
<div id="bottom"></div>
<h1 class="red">晚桃花</h1>
<p>白居易</p>
<p class="green">一树红桃亚拂池，竹遮松荫晚开时。</p>
<p class="blue">非因斜日无由见，不是闲人岂得知。</p>
<p class="green">寒地生材遗校易，贫家养女嫁常迟。</p>
<p class="red">春深欲落谁怜惜，白侍郎来折一枝。</p>
</body>
</html>
效果：
5.通用选择器
若是想 将页面中的所有元素使用同一种样式，可以使用通用选择器。
语法：
*{
样式属性：属性值；
。。。
}
/*例子*/
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
*
{
color:red;
}
</style>
</head>
<body>
<h1>这是H1标题</h1>
<h2>这是H2标题</h2>
<h3>这是H3标题</h3>
<p>这是一个段落</p>
<a href="#">这是超链接</a>
<div>这是一个DIV1</div>
<div>这是一个DIV2</div>
<span>这是一个SPAN1</span>
<span>这是一个SPAN2</span>
<hr/>
<span>红</span><b>蓝</b><i>绿</i><u>紫色</u><sub>黄</sub>
</body>
</html>
6.选择器的组合使用
-
后代选择器
使用空格表示后代选择器
选择器 选择器
{
样式属性：属性值；
。。。
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div b{
color:red;
}
</style>
</head>
<body>
<span>span标签<span/>
<b>b标签</b>
<hr/>
<div>
<b>这是b标签</b>
<span>这是div里的span标签
<b>这是span里的b标签</b>
</span>
</div>
<hr/>
<div>
<b>这是b标签</b>
<span>这是div里的span标签
<b>这是span里的b标签</b>
</span>
</div>
</body>
</html>效果：
-
子级选择器
使用
>表示子级选择器选择器1>选择器2 { 样式属性：属性值； 。。。 }<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> div b{ color:red; } div > b{color:blue;} </style> </head> <body> <span>span标签<span/> <b>b标签</b> <hr/> <div> <b>这是b标签</b> <span>这是div里的span标签 <b>这是span里的b标签</b> </span> </div> <hr/> <div> <b>这是b标签</b> <span>这是div里的span标签 <b>这是span里的b标签</b> </span> </div> </body> </html> 效果：
-
交集选择器
语法：
标签选择器.类选择器 { 属性：属性值； ... } -
并集选择器
语法
标签选择器,.类选择器，id选择器,标签选择器 { 属性：属性值； ... }<!DOCTYPE html> <html> <head> <title> 这是我的页面 </title> <style type="text/css"> /*并集选择器 div,p { color:red; }*/ /*所有的div和第二个p标签变红 div,.p2 { color:red; }*/ /*div第一个元素，和p的第二个元素变红 #d1,.p2 { color:red; } */ /*交集选择器*/ /*针对p标签种具有类样式为p2的元素，变红*/ p.p2 { color:red; } div#d1 { color:green; } </style> </head> <body> <h1>交集选择器，并集选择器测试</h1> <div id="d1">这是DIV1</div> <div class="p2">这是DIV2</div> <div>这是DIV3</div> <p>这是P1</p> <p class="p2">这是P2</p> <p>这是P3</p> </body> </html>并集选择器效果：
所有的div和p标签变红
所有div和第二个p标签变红
div第一个元素，和p的第二个元素变红：
交集选择器效果：
-
7.选择器的权重
1.同类选择器遵循就近原则
2.标签选择器权重 1
类选择器权重 10
id选择器权重 100
3.使用多个选择器时，选择器的权重可以进行累加
样式属性最终所取的属性值优先考虑就近原则，再考虑权重最高的属性值
第二节 常用样式
1.文本常用格式
| 样式属性 | 说明 |
|---|---|
| font-size | 字体大小 px (1/96英寸)，pt（1/72英寸 7） |
| font-family | 字体类型 隶书 黑体 幼圆 |
| font-weight | 字体粗细 bold |
| font-style | 字体样式 斜体 italic |
| color | 文本颜色 |
| text-align | 字体对齐方式 left right center |
| text-indent | 文本缩进：2em(2个字的宽度) |
2.超链接伪类样式
| 样式属性 | 说明 |
|---|---|
| a:link | 未访问的链接样式 |
| a:visited | 已访问的链接样式 |
| a:active | 选定链接的样式 |
| a:hover | 鼠标移动上（悬浮）的样式 |
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后或者单独存在时，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
3.行内样式表
第三节 样式表的定义方法
1.内部样式表
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
选择器
{
...
}
*
{
color:red;
}
</style>
</head>
<body>
...
</body>
</html>
2.外部样式表
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<link rel="stylesheet" type="text/css" href="css文件路径"/>
</head>
<body>
...
</body>
</html>
3.行内样式表
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<标签名 style="样式属性:属性值;....">
</标签名>
<div style="color:blue;">
</div>
</body>
</html>拓展
CSS3属性样式: background-size 背景图片大小设置
background-size:100px 100px
background可设置多组属性.
background:第一组属性值，第二组属性值...
background: color省略 url() no-repeat 100px 100px,
color省略 url() no-repeat 100px 100px
第三章 CSS样式深入
内容回顾
-
CSS样式相关
-
文本样式相关属性
-
超链接样式
-
背景样式
-
定义样式表的三种方法
本章内容
-
样式扩展，表格表单常用样式
-
盒子模型
-
浮动模型
-
垂直菜单、水平菜单
第一节 文本样式补充以及表格表单相关样式
1.文本样式的补充
| 属性 | 说明 |
|---|---|
| line-height | 用于设置内容行高，主要用在调整元素的垂直方向的位置 |
| vertical-align | 垂直对齐方式:top,bottom,middle.也可用像素值 |
| letter-spcing | 设置文本之间的间距 |
| white-space | 设置文本内容是否换行。 |
line-height常用来设置文字垂直居中，方法是：将line-height的值与容器height设置成一致,即: height:30px;line-height：30px
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{
background-color:#ff99ff;
height:50px;
/*容器的行高与高度一致时，那么容器的内容会在垂直方向居中*/
line-height:50px;
text-align:center;
}
</style>
</head>
<body>
<div>
<a href="#">菜单1</a>
<a href="#">菜单2</a>
<a href="#">菜单3</a>
<a href="#">菜单4</a>
</div>
</body>
</html>
2.表格样式
| 属性 | 说明 |
|---|---|
| boder-collapse:collapse; | 边框合并 |
| border-width | 边框宽度 |
| border-style | 边框样式：solid实线 dashed虚线 |
| border-color | 边框颜色 |
table td
{
/*复合属性设置边框*/
border:1px solid gray;
text-align:center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
table
{
border-width:1px;
border-style:solid;
border-color:gray;
width:600px;
height:300px;
border-collapse:collapse;/*合并单元格边框*/
}
table td
{
border:1px solid gray;
text-align:center;
}
table td a
{
text-decoration:none;
}
.even/**/
{
background-color:#33ccff;
}
</style>
</head>
<body>
<table>
<caption>导航</caption>
<tr class="even">
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
</tr>
<tr>
<td colspan="3"><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
</tr>
<tr class="even">
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
</tr>
<tr>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
</tr>
<tr class="even">
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
<td><a href="#">网站</a></td>
</tr>
</table>
</body>
</html>
3.表单样式
属性选择器：
[type="submit"]
{
border:1px solid black;
padding:3px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
/*属性选择器*/
input[type="text"]
{
/*
样式属性：属性值
border-radius:5px;
*/
/*细边框样式*/
border-width:0px;
border-top:1px solid black;
}
.cir
{
border:1px solid black;
border-radius:5px;
}
</style>
</head>
<body>
账号：<input type="text" name="account"/>
密码：<input type="password" name="pwd"/>
确认密码：<input type="password" name="cpwd" class="cir"/>
<input type="submit" name="tijiao" value="查询" class="cir"/>
</body>
</html>
第二节 块状元素和行内元素
从布局来划分HTML元素，可以分为三大类：
1.属性值 block块状元素
-
块状标签默认在水平方向上撑满整个容器，独霸一行，默认宽度为100%。
-
可设置宽和高
-
属性值为：
block的典型标签：div，h1~h6,pulollidldtddtableform
2. 属性值 inline行内元素
-
行内元素默认在一行内排列
-
不能设置宽和高，要靠内容撑起元素
-
属性值为
inline的典型标签:spanbuisubsupa
3.属性值 inline-block行内块状元素
同时具有行内和块状的特点，在一行内排列，但是可以设置宽和高。
典型标签：img
4.display显示属性
display:block inline inline-block none(不显示)
第三节 盒子模型
HTML标签默认呈现的就是方框样式，方框样式其实就是对应CSS盒子模型，CSS盒子模型都具备方框样式。常用的方框样式有：边界(margin)、边框(border)、填充(padding)、内容。
盒子模型由content(内容)、border(边框)、padding(内补丁)、margin(外补丁)四部分组成
标准W3C盒子
-
标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分
-
适用于所有浏览器(不包括低版本ie)
IE盒子
-
IE 盒子模型的范围也包括 margin、border、padding、content
-
与标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding
-
适用于IE浏览器
盒子的 margin 为 20px，border 为 1px，padding 为 10px，宽为 200px，高为 50px
border:宽度 样式 颜色
border-left border-right border-top border-bottom
内填充 padding-left padding-right padding-top papdding-bottom
外边距 margin-left margin-right margin-top margin-bottom
宽度width 高度height
padding（margin）：上 右 下 左 例如：padding：2px 5px 6px 4px
padding(margin): 上下 左右 例如：padding：10px 5px
padding(margin):上下左右 例如：padding:5px
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
#d1
{
width:100px;
height:100px;
border:2px solid red;
/*
padding复合属性(上，右，下，左)
一个值：默认设置四个方向
二个值: 上下 左右
三个值: 上 左右 下
四个值: 上 右 下 左
*/
padding:1px 40px 30px 50px;
/*
margin:复合属性(上右下左)
一个值：默认设置四个方向
二个值: 上下 左右
三个值: 上 左右 下
四个值: 上 右 下 左
*/
margin:100px 200px 300px 400px;
}
</style>
</head>
<body>
...
</body>
</html>
盒子之间的关系
-
盒子的水平间距
等于元素的间距之和
-
盒子的垂直间距
等于元素间距较大的间距
-
盒子的重叠
设置盒子的边距为负值实现盒子的重叠
<!DOCTYPE html> <html> <head> <title> 这是我的页面 </title> <style type="text/css"> span { border:2px solid red; } .s1 { margin-right:50px; } .s2 { margin-left:30px; } #d1,#d2 { border:2px solid black; width:100px; height:100px; } #d1 { margin-bottom:50px; } #d2 { margin-top:30px; } #d3 { border:2px solid red; width:300px; height:300px; background-color:red; } #d4 { border:2px solid blue; width:100px; height:100px; background-color:blue; margin-top:-50px; margin-left:250px; } </style> </head> <body> <!-- 水平盒子:间距等于累加之和 <span class="s1">这是SPAN1</span><span class="s2">这是SPAN2</span> --> <!-- 垂直盒子:取间距最大的 <div id="d1"></div> <div id="d2"></div> --> <!--层叠盒子--> <div id="d3"></div> <div id="d4"></div> </body> </html>用盒子模型布局
<style type="text/css"> /*页面布局要遵循:外宽内高原则*/ #con { width:800px; /*height:500px;*/ /*border:2px solid red;*/ /*外边距上下为0px，左右自适应，页面居中的典型用法*/ margin:0px auto; } #top { height:100px; background-color:#ff66cc; } #main { height:400px; background-color:#66ccff; margin-top:10px; margin-bottom:10px; } #footer { height:50px; background-color:#cc6633; } </style> <body> <div> </body>
第四节 浮动样式
浮动属性用于设置元素在父级包含容器中的停靠方向
语法
float:left; 停靠在容器的左面
float:right; 停靠在容器的右面
float：none； 不浮动
浮动可以让元素具有行内块状类型的特征，在一行排列，而且可以设置宽和高，并且紧密挨在一起
第四章 定位模型
内容回顾
垂直对齐的方式
元素分类
盒子模型
浮动样式
本章内容
定位模型
position属性定位样式
第一节 定位模型
定位是将某个元素放在某个位置上
1.定位方式
-
流动定位
文档默认的定位方式，元素按照自左向右，自上而下的方式定位。具有水流的特征，称为流动定位。
-
浮动定位
使用
float属性实现元素的定位 -
position属性定位
使用position属性设置元素的定位方式
2.position属性定位
position属性用于控制页面元素的位置
position：static/absolute/relative/fixed；
2.position属性定位
position属性用于控制页面元素的位置
position：static/absolute/relative/fixed；
2.1静态定位
元素没有设置position定位属性时默认就是静态定位。
2.2绝对定位
以特定的位置为参考进行定位。可以配合四个方向的偏移属性(left,top,right,bottom)进行元素定位。绝对定位的元素脱离了文档流，在文档中不占据任何位置。
-
默认的绝对定位，是以浏览器的左上角位置作为参考进行定位。
-
如果父容器设置了定位属性（absolute,relative,fixed），那么就以父容器为参考，进行定位
包含块:如果元素设置了定位属性为:absolute,relative,fixed,则该元素被称为包含块。此时，该元素的子元素在定位时，会以该元素为基准进行偏移。
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
#d1
{
width:100px;
height:100px;
background-color:blue;
/*float:left;*/
position:absolute;
/*绝对定位和偏移属性结合使用
以浏览器的左上角为标准进行偏移
*/
/*left:100px;
top:80px;*/
right:100px;
bottom:100px;
}
#d2
{
width:500px;
height:300px;
background-color:red;
color:white;
}
</style>
</head>
<body>
<!--绝对定位会让元素脱离文档流，跑到另外一个层上-->
<div id="d1"></div>
<div id="d2">这是一些内容,有很多东西</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
#d1
{
width:300px;
height:300px;
margin-left:200px;
margin-top:200px;
background-color:red;
color:white;
/*如果元素设置了定位属性为:absolute,relative,fixed
则该元素被称为包含块。此时，该元素的子元素在定位时，
会以该元素为基准进行偏移
*/
position:fixed;
}
#d2
{
width:100px;
height:100px;
background-color:blue;
position:absolute;
left:10px;
top:10px;
}
</style>
</head>
<body>
<div id="d1">这是内容
<div id="d2"></div>
</div>
</body>
</html>
2.3相对定位
相对定位，以元素原有的位置为基准进行定位，定位时可以使用偏移属性(left,top,right,bottom)进行位置的设置。没有脱离文档流，受文档流的制约。
2.4固定定位
就是讲元素固定定位到浏览器窗口的某个位置。
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
#login
{
width:300px;
height:200px;
border:2px solid red;
background-color:gray;
/*固定到浏览器窗口的指定位置*/
position:fixed;
left:40%;
top:20%;
}
form
{
width:200px;
height:150px;
border:2px dashed black;
margin:10px auto;
}
</style>
</head>
<body>
<!--固定定位-->
<div id="login">
<form>
账号:<input type="text" name="account"/><br/>
密码:<input type="password" name="pwd"/><br/>
<input type="submit" value="登录"/>
</form>
</div>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
</body>
</html>
第二节 祝福墙
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
#wall
{
border:2px solid gray;
background-color:#ffcc33;
width:600px;
height:400px;
/*让容器变为包含块*/
position:relative;
margin:0px auto;
}
#wall h3
{
text-align:center;
}
#wall div
{
width:150px;
height:200px;
border:1px solid red;
font-size:12px;
}
#wall div:hover
{
z-index:9;
}
#wall div p
{
text-indent:2em;
}
#wall div.card1
{
border:2px dashed blue;
background-color:#ff66cc;
position:absolute;
left:50px;
top:50px;
}
#wall div.card2
{
border:2px dashed blue;
background-color:#cc6699;
position:absolute;
left:70px;
top:70px;
}
#wall div.card3
{
border:2px dashed blue;
background-color:#ccff66;
position:absolute;
left:90px;
top:100px;
}
#wall div.card4
{
border:2px dashed blue;
background-color:#3333ff;
position:absolute;
right:50px;
top:50px;
}
#wall div.card5
{
border:2px dashed blue;
background-color:#66ff66;
position:absolute;
right:80px;
top:100px;
}
</style>
</head>
<body>
<div id="wall">
<h3>祝福墙</h3>
<div class="card1">
<h4>To tommy:</h4>
<p>
今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错
</p>
</div>
<div class="card2">
<h4>To tommy:</h4>
<p>
今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错
</p>
</div>
<div class="card3">
<h4>To tommy:</h4>
<p>
今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错
</p>
</div>
<div class="card4">
<h4>To tommy:</h4>
<p>
今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错
</p>
</div>
<div class="card5">
<h4>To tommy:</h4>
<p>
今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错
</p>
</div>
</div>
</body>
</html>
第三节 箭头菜单
实现箭头的要素：
首先必须设置宽高0px；1.块状元素以及行块元素可以设置宽高2.浮动过后可以设置宽高3.设置定位（fixed、absolute注意子绝父相）后可以设置宽高
其次需要设置border样式属性
最后设置某一边的border属性。具体代码如下：
{
width:100px;
height:100px;
border：8px solid rgba(0,0,0,0);//一定要写在前面
border-left:8px solid red;
}
第四节 级联菜单
水平级联菜单
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style type="text/css">
ul{
list-style:none;
padding:0px;
margin:0px;
overflow:auto;
}
li
{
text-align:center;
}
#nav
{
width:306px;
margin:0px auto;
}
#nav>li
{
width:100px;
border:1px solid black;
float:left;
}
#nav>li ul
{
display:none;
}
#nav>li:hover ul
{
width:100px;
display:block;
position:absolute;
background:white;
}
#nav>li>ul>li
{
border:1px solid black;
}
</style>
<body>
<ul id="nav">
<li>
<a href="#">菜单</a>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<a href="#">菜单</a>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<a href="#">菜单</a>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</body>
</html>
垂直级联菜单
二级菜单在右侧显示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
a{
text-decoration:none;
}
ul
{
list-style:none;
padding:0px;
}
#nav
{
background-color:pink;
width:160px;
text-align:center;
}
#nav>li>ul
{
position:absolute;
left:170px;
background:lightblue;
display:none;
margin-top:-20px;
}
#nav li
{
padding:2px 0px;
}
#nav>li:hover ul
{
display:block;
}
</style>
</head>
<body>
<ul id="nav">
<li>
<a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>
<a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>
<a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</body>
</html>
二级菜单在下侧显示
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
ul
{
border:1px solid red;
margin:0px;
padding:0px;
/*none:去除列表项目符号*/
list-style:none;
}
#menu
{
width:150px;
}
#menu a
{
display:block;
height:30px;
text-align:center;
line-height:30px;
}
#menu>li>a
{
background-color:black;
color:white;
}
#menu ul a
{
background-color:gray;
color:white;
}
/*初始隐藏二级菜单*/
#menu ul
{
display:none;
}
/*放到一级菜单的li元素上时,让下面的ul元素显示*/
#menu li:hover ul
{
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="#">一级菜单2</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="#">一级菜单3</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
</body>
</html>
第五章 框架集
第一节 页面布局的常用方式
1.单列自适应
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
#con
{
height:800px;
background-color:gray;
width:80%;
margin:0px auto;
}
</style>
</head>
<body>
<div id="con">
<p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
</div>
</body>
</html>
2.双列布局
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
#con
{
width:80%;
margin:0px auto;
height:500px;
background-color:gray;
}
#left
{
width:200px;
height:500px;
float:left;
background-color:red;
}
#right
{
/*width:70%;*/
height:500px;
/*float:right;*/
background-color:green;
}
</style>
</head>
<body>
<div id="con">
<div id="left">这是内容</div>
<div id="right">
这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
</div>
</div>
</body>
</html>
3.多列布局
上中下，左中右
第二节 框架集
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
</style>
</head>
<!--定义框架集
rows:分成多行显示
cols:分成多列
-->
<frameset rows="20%,80%">
<!--frame:用于显示具体页面的窗口-->
<frame src="p1.html" name="top"/>
<frameset cols="200,*">
<frame src="p2.html" name="menu"/>
<frame src="p3.html" name="main"/>
</frameset>
</frameset>
</html>
第三节 浮动框架
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
</style>
</head>
<body>
<!--浮动框架(内嵌框架) iframe -->
<a href="http://www.baidu.com" target="main">百度</a>
<a href="#">菜单2</a>
<a href="#">菜单3</a>
<hr/>
<iframe src="http://www.taobao.com" name="main" width="800" height="600" frameborder="0"></iframe>
</body>
</html>
扫一扫
2680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
