HTML+CSS（详细版）

网页的概念：上网打开浏览器是我们浏览的新闻，查询信息，看图片，视频所浏览的都是内容页面称之为网页
网页的组成：文字图像和超链接等元素构成

**网页的结构：**
<html>        
	<head>
		<title></title>
	</head>
	<body></body>
</html>

网页相关名词解释：
Interent：因特网
www：万维网
URL:统一资源定位符
DNS:域名解析系统
Web：网
W3c：万维网联盟
HTML和CSS概念：
HTML:是通过HTML标记对网页中的文本，图片声音等内容进行描述
CSS：设置于HTML页面中的文本内容，图片外形，以及版面的布局等外观显示样式
Web的优点：
1.提高页面浏览速度
2.让网站更易于维护
3.降低网站流量费用
4.更容易搜寻引擎搜索
常用的Web浏览器：IE FIREFOX GOOGLE SAFARI
HTML的基本结构：

<!DOCTYPE html>
<html>
<head>                <!--头部-->
	<title></title>   <!--网址标题-->
</head>
<body>
                      <!--网页内容-->
</body>
</html>

HTML标记：单标记和双标记：

<br>
<img>
<param >
<link>
<hr>
<input>
<meta>

双标记:

网页标记：<html></html>
表单标记：<table></table>
块标记：<p></p>
标题标记：<h1></h1>
<object></object>
块标记：<strong></strong>
<script ></script>
头部标记：<head></head>
列标记：<tr></tr>
表单标记：<form></form>
风格标记:<style ></style>
<i></i>
<center></center>
网页标题标记：<title></title>
<td></td>
<b></b>
样式标记：<div></div>
主体内容标记：<body></body>
<span></span>
<u></u>
<a></a>

注释标记:
标记嵌套的原则：在标记的嵌套过程中，必须先结束最靠近内容的标记，在按照由内及外的顺序关闭

定义页面元素信息标记：<meta>标记：用于定义页面的扩展信息
1.设置网页的关键字：content

<meta name="keywords" content="study">

name属性值为keywords，用于定义搜索内容名称为关键字

2.设置网页字符集的编码格式：charset =utf-8
3.设置网页作者的名字：name

列如：<meta charset="utf-8" name="witer" content="one">

引用外部文件标记：<link>标记：<link   属性="属性值">

属性值：
1.href: url 应用外部文档的地址
2.rel： stylesheet 定义一个外部样式表
3.type： text/css text/javascript 引入CSS样式表引入JAVASCRIPT脚本

例子：引入一个外部CSS的文件样式表
<link rel="stylesheet" type="text/css" href="1.css">

标题标记：<hr>标记：<hr 属性 =“属性值”/>
属性值：
1.align:对齐方式 center left right
2.size: 粗细 px %
3.color：颜色 #RGB 名称 rgb(r,g,b)
4.width:宽度 px

例子：
<!DOCTYPE html>
<html>
<head>
	<title>标题标记</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>

内嵌样式标记：

<style 属性="属性值">样式内容</style>

定义字体标记：font标记：<font 属性=“属性值”>文本内容
属性值：
1.face:字体
2.size:大小 px %
3.color:颜色 #RGB 名称 rgb(r,g,b)

文本标记格式化：
加粗：<b></b> <strong></strong>
倾斜：<i></i> <em></em>
加删除线：<s></s> <del></del>
加下划线：<u></u> <ins></ins>

特殊符号标记:
&nbsp:空格
&lt：小于
&gt:大于
&amp:和
&yen：人民币
&copy:版权
&reg:注册商标
&deg：摄氏度
&plusmn：正负号
&times：乘号
&divide：除号
&sup2：平方

例子：特殊标记的使用
<!DOCTYPE html>
<html>
<head>
	<title>特殊标记使用</title>
</head>
<body>
使用空格符 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
换行标记  &alt;
&copy; study.cn版权所有
</body>
</html>

图片格式：gif jpg png

引入方式\:<img src="图像地址"/>

图像属性：
title:鼠标悬停时显示的内容
hight:高度
width：宽度
src：地址
alt：图像替换文本属性
aligt：对齐方式
vspace：垂直边距
hspace：垂直边距
border：边框

<!DOCTYPE html>
<html>
<head>
	<title>图像标记</title>
</head>
<body>
<img src="1.jpg" height="100px" width="200px" alt="haedstudy" title="2020" align="center" vspace="1px" hspace="2px" border="3px">

</body>
</html>

CSS样式规则：
选择器{属性1：属性值1；
属性2：属性值2；
属性3：属性值3；}
1.CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般都采用小写的形式
2.多个属性之间必须要用";"隔开，最后一个分号可以省略
3.如果属性的值由多个单词组成且中间包含空格，则必须为这个属性加上英文状态的引号
4.CSS当中的空格键是不被解析的，一般可以用来炮班排版
CSS样式的注释：/注释内容/

CSS样式表的引入：
1.行内式
<标记名 style=“属性1：属性值1;属性2：属性值2;属性3：属性值3”>
一般很少用到，提一下
2.内嵌式

<style type="text/css">选择器{
    
    属性1：属性值1 ;属性2：属性值2;属性3：属性值3;}；</style>

3.链入式

<link rel="stylesheet" type="text/css" href="1.css">

然后我们在建立一个CSS样式的外部样式表的文件通过引入的方式来载入到页面当中，一般这种链入式为html的主流选择

例子：<!DOCTYPE html>
<html>
<head>
	<title>CSS样式的引入</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
  <h1>1</h1>
  <p>2</p>
  <div>3</div>
</body>
</html>

我们再定义一个文件名为1的css的外部样式表：
h1{
text-align:center;
}
p{
font-size:16px;
color:blue;
text-decoration:underline;
}
CSS基础选择器：
1.标记选择器
标记名{属性1：属性值1 ;属性2：属性值2;属性3：属性值3;}
2.类选择器
.类名{属性1：属性值1 ;属性2：属性值2;属性3：属性值3;}

例子：
<!DOCTYPE html>
<html>
<head>
	<title>类选择器</title>
	<style type="text/css">
		.one{
     
     
			color: blue;
			text-align: center;
			border: 1px;
			font-family: 楷体；
		}
	</style>
</head>
<body>
<span class="one">11</span>
</body>
</html>

3.id选择器
#id名{属性1：属性值1 ;属性2：属性值2;属性3：属性值3;}

<!DOCTYPE html>
<html>
<head>
	<title>id选择器</title>
	<style type="text/css">
		#id选择器{
     
     
			font-size: 25px;
			background-color: red;
		}
	</style>
</head>
<body>
<p id="id选择器">11</p>
</body>
</html

4.通配符选择器
*{属性1：属性值1 ;属性2：属性值2;属性3：属性值3;}
主要用来清楚内外边距的
*{
border:0px;
padding:0px;
}

选择器的优先级：
(从最高级到最低级排序)
!important
行内式
id选择器
类选择器
标签选择器
CSS的高级特性：层叠性和继承性
层叠性:多种CSS样式的叠加
继承性：标记回继承父标记的某些样式
不继承：边框属性定位属性内/外边距属性背景属性布局属性元素宽高属性

例子：
<!DOCTYPE html>
<html>
<head>
	<title>CSS的继承性和层叠性</title>
	<style type="text/css">
		.one{
     
     
			font-size: 10px;
			font-family: 楷体；
		}
		#two{
     
     
			text-align: center;
			text-decoration: underline; /*显示的样式会继承one的样式*/
		}
	</style>
</head>
<body>
<div class="one">111
	<span id="two">111</span>
</div>
</body>
</html>

CSS文本相关样式：
CSS字体样式属性：
字号大小：font-size:

字体类型：font-family:

字体粗细：font-weight:
normal(默认值)
bold（粗体字符）
bolder（更粗的字符）
lighter（更细的字符）

字体变化：font-variant:
normal（默认值）
small-caps(将所有小写字母转换为大写)

字体风格：font-style:
normal（默认值）
italic（显示斜体的字体）
oblique（显示倾斜的字体）

例子：
<!DOCTYPE html>
<html>
<head>
	<title>字体样式</title>
	<style type="text/css">
		#id{
     
     
			font-size: 16px;
			font-family:楷体；
			font-wegiht:1px;
			font-variant: normal;
			font-style: all;
		}
	</style>
</head>
<body>
<div id="字体样式">学习</div>
</body>
</html>

CSS文本外观属性：
定义文本颜色属性：color
三种取值方式：
预定义的颜色值：例如red blue green
十六进制: 如#000
RGB代码：如rgb（0，255，0）

文本字间距属性：letter-spacing
属性为数值，可以有负值，默认为normal

英文文本间距属性：word-spacing
属性为数值，可以有负值，默认为normal

文本行间距属性：line-height
属性为三种：px % em

文本控制英文字符大小写属性：text-transform
none:不转换
capitalize：首字母大小写
uppercas：全部字符转换为大写
lowercase全部字符转换为小写

文本装饰效果属性：text-decoration
none:默认
underline:下划线
overline:上划线
line-through:删除线

文本内容位置属性：text-align
left:左对齐
right:右对齐
center:居中

文本首行文本缩进属性：text-indent
px em % 可负值

文本空白符处理方式属性：white-space:
normal:默认
pre:预格式化
nowrap:空格空行无效

HTML的盒子模型
盒子模型的概念：html中一个封装元素内容的容器

盒子模型的组成：内容内边距边框外边距

边框：CSS中边框样式，边框宽度，边框颜色，单侧边框和边框的综合属性:

上边框
border-top-style：样式
border-top-width：宽度
border-top-color：颜色

右边框
border-right-style：样式
border-right-width：宽度
border-right-color：颜色

下边框
border-bottom-style：样式
border-bottom-width：宽度
border-bottom-color：颜色

左边框
border-left-style：样式
border-left-width：宽度
border-left-color：颜色

边框样式（boder-style）属性值：
none:默认
solid:单实线
dashed:虚线
dotted:点线
double:双实线
边框可以综合设置四边样式，设置顺序为顺时针顺序：四个值为:上右下左三个值为：上/左右/下

例子：
<!DOCTYPE html>
<html>
<head>
	<title>边框样式</title>
	<style type="text/css">
		#id{
     
     
			width: 100px;
			height: 100px;
			border-style: 1px solid;/*设置边框为1px 单实线*/
		}
	</style>
</head>
<body>
<div id="one">one</div>
</body>
</html>

**内边距：**指的是元素内容于边距之间的距离，包括上边距，下边距，左边距，右边距
padding-top:上边距
padding-right:右边距
padding-bottom:下边距
padding-left:左边距
padding:四边内边距

内边框可以综合设置四边样式，设置顺序为顺时针顺序：
四个值为:上右下左
三个值为：上/左右/下
两个值为：上下/左右

padding取值：aoto自动（默认值） % px

例子：
<!DOCTYPE html>
<html>
<head>
	<title>内边距</title>
	<style type="text/css">
		.one{
     
     
			width: 100px;
			height: 100px;
			padding:solid 1px;  /*设置内边距为1px的单实线*/
		}
	</style>
</head>
<body>
<div class="one">
	1
</div>
</body>
</html>

**外边距：**元素边框于相邻元素间的距离，包括上边距，下边距，左边距，右边距
margin:
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
margin:四边外边距

margin取值：px 允许负值

外边框可以综合设置四边样式，设置顺序为顺时针顺序：
四个值为:上右下左
三个值为：上/左右/下
两个值为：上下/左右

用处：更方便的控制网页中的元素，制作网页时，线清除元素的默认内外边距
*{
padding:0px;/清除内边距/
margin:0px;/清除外边距/
}
**背景：**对背景颜色和背景图片的控制
background-color:背景颜色属性
三种取值：
预定义的颜色值：例如red blue green
十六进制: 如#000
RGB代码：如rgb（0，255，0）

例子：
<!DOCTYPE html>
<html>
<head>
	<title>背景颜色</title>
	<style type="text/css">
		#背景颜色{
     
     
			height: 100px;
			width: 100px;
			background-color: blue;/*设置背景颜色为蓝色*/
		}
	</style>
</head>
<body>
<div id="背景颜色">背景颜色</div>
</body>
</html>

backgroung-image:背景图像
引入方式:background:url=“图片路径”

background-repeat:图像平铺属性
repeat:水平和竖直两个方向平铺
no-repeat：不平铺
repeat-x：水平方向平铺
repeat-y：竖直方向平铺

background-position:图像位置属性
单位数值:像素位置
px px

预定义的关键字:
水平方向值：left center right
垂直方向之：top center bottom

百分比：
0% 0%
50% 50%
20% 30%
100% 100%

background-attachment:图像固定位置
scroll:图像随页面元素一起滚动
fixed:图像固定再屏幕上

块元素和行内元素：
块元素：
1.在页面中以区域块的形式出现
2.每个块元素通常都会独自占据一整行或多整行
3.可以对其设置，宽度，高度，对齐等属性

常见的块元素：<h>  <p>  <li>  <div>  <Ul>  <ol>
 <div>:

1.块容器标记
2.网页分割以独立的部分，可以实现网页的规划和布局
3.可以嵌套
4.代替大多数的块级文本标记

行内元素：
1.不占有独立的区域
2.自身的字体大小和图像尺寸来支撑结构
3.一般不可以设置宽度，高度，对齐等属性

 常见的行内元素：<strong> <sapn> <a> <u> <b> <em>

<sapn>:

1.行内标记
2.只能包含文本和行内标记
3.常用定义网页中某些特殊显示的文本

列表和超链接
HTML提供了三种常用的列表，分别是无序列表，有序列表，定义列表
无序列表（ul）：网页中最常用的列表，其各个列表项之间没有顺序级别之分
有序列表（ol）：有排列序列的列表，其各个列表项按照一定的顺序排列
定义列表（dl）：用于对术语或名词进行解释和描述。
无序列表：

<ul>
<li></li>	
</ul>

属性：type (用于定义列表项目符号)
属性值：
disc: 实心圆点
circle: 空心圆点
square: 实心正方形

例子:
<!DOCTYPE html>
<html>
<head>
	<title>无序列表</title>
</head>
<body>
	<ul type="circle">  <!--定义个空心圆点的无序列表-->
		<li>one</li>
		<li>two</li>
		<li>three</li>
	</ul>

</body>
</html>

有序列表：

<ol>
	<li></li>    <!--每一对有序列表中至少包含一对li-->
</ol>

相关属性：
type: 1 A I
start:数字
value:数字

例子：
<!DOCTYPE html>
<html>
<head>
	<title>有序列表</title>
</head>
<body>
<ol>
	<li type="A">a</li>  <!--定义项目符号为A-->
	<li value="1">b</li> <!--定义项目符号为数字-->
	<li type="I">c</li>  <!--定义项目符号为I-->
</ol>
</body>
</html>

定义列表：

<dl>
<dd>
	<dt></dt>   <!--必须存在dd  dt标记-->
</dd>
</dl>

例子：
<!DOCTYPE html>
<html>
<head>
	<title>定义列表</title>
</head>
<body>
<dl>
	<dt>第一个</dt>
		<dd>1</dd>
	
	<dt>第二个</dt>
		<dd>2</dd>
	
</dl>
</body>
</html>

列表的嵌套：一般所有的无序有序列表都是可以嵌套再一起的，列表项中可以包含子列表

CSS控制列表样式：
属性：
list-style-type:控制无序和有序列表的项目符号
无序列表属性值(ul)：
disc
circle
square

有序列表属性值(ol)
decimal 阿拉伯数字
upper-alpha 大写英文字母
lower-alpha 小写英文字母
upper-roman 大写罗马数字
lower-roman 小写罗马数字
公共属性：none 默认值

list-style-image:为各个列表设置项目图像

基本格式ul{
    
    list-style-image:url(图片路径);}

list-style-position:用于控制列表项目符号的位置
属性值：
insiede:位于列表文本以内
outside:位于列表文本以外

例子：
<!DOCTYPE html>
<html>
<head>
	<title>列表的嵌套以及再CSS中的定义</title>
	<style type="text/css">
		#fruit{
     
     
			list-style-type:decimal;
		}
		#drink{
     
     list-style-type:lower-alpha;
		}
	</style>
</head>
<body>
<ul>
	<li>水果
		<ol id="fruit">
			<li>香蕉</li>
			<li>苹果</li>
			<li>梨子</li>
		</ol>
	</li>
	<li>饮料
		<ol id="drink">
			<li>可乐</li>
			<li>果汁</li>
			<li>咖啡</li>
		</ol>
	</li>
</ul>
</body>
</html>

超链接标记：`
锚点的作用：创建锚点链接，用户能能够快速定位到目标内容
创建锚点链接的方式：

<a href="#id学习">.</a>
<h1 id="学习">study</h1>`

超链接标记<a>的伪类
CSS的样式规则:
未访问超链接的状态 a:link{CSS样式规则；}
访问后超链接的状态 a:visited{CSS样式规则；}
鼠标经过，悬停时超链接的状态 a:hover{CSS样式规则；}
鼠标点击不动时超链接的状态 a:active{CSS样式规则；}

例子：
<!DOCTYPE html>
<html>
<head>
	<title>超链接</title>
	<style type="text/css"></style>
    a:link{
    	border-color: blue;
    }
</head>
<body>
<a id="study" href="#">study</a>
</body>
</html>

表格与表单
表格的创建
表格标记：
定义一个表格：<table>
属性值：
边框属性：border
单元格与单元格边框之间的空白间距：cellspacing
单元格内容与边距之间的空表间距cellpadding
宽度：width
高度：height
水平对齐方式：align
背景颜色：bgcolor
背景图像：background

定义表格中的一行:<tr>
属性值：
高度：height:
水平对齐方式：align:
垂直对齐方式：valign:
背景颜色：bgcolor:
背景图片：background:

定义表格中的单元格：<td>
属性值：
宽度：width:
高度：height:
水平对齐方式align:
背景颜色：bacolor:
背景图片：background:
横跨的列数：colspan:
竖跨的行数：rowspan:

设置表头的标签：<th>

例子：
<!DOCTYPE html>
<html>
<head>
	<title>表格</title>
	<style type="text/css">
		#table{
     
     
			width: 200px;
			height: 300px;
			border: solid 1px;
			background-color: rgb(255,0,0);  /*定义一个宽度为200px  高度为300px 变宽为1px实线的表格*/
		}
		#frist{
     
     
			width: 150px;
		}
		tr{
     
     
			height: 100px;
		}
	</style>
</head>
<body>
<table id="table">
<th>表格标签</th>	
<tr>第一行
	<td id="frist">只有一行</td>
</tr>
<tr>第二行
	<td>有两行</td>
	<td>就两行</td>
</tr>
<tr>第三行
	<td>有三行</td>
	<td>就三行</td>
	<td>还是三行</td>
</tr>
</table>
</body>
</html>

表格的划分可以为：

头部:<thead></thead>    
主体：<tfoot></tfoot>
页脚：<tbody></tbody>

使用原则：
1.只能定义一对
2.按照从头部到页脚的顺序使用

含义：是网页上用于输入信息的区域，主要功能是收集用户信息，并将这些信息传递
给后台服务器，实线网页与用户的沟通

表单的组成：表单控件，提示信息，表单域

表单的创建：<form>
创建方式：<form action="url地址" method="提交方式" name="表单名"></form>

action:用于接受服务器的url地址
name:用于指定表单的名称
method:用于设置表单数据的提交方式

常见的表单控件：
输入控件：<input>
属性：
type:
属性值:
text:单行文本输入框
password:密码输入框
radio：单选按钮
checkbox:复选按钮
buuton: 普通按钮
submit: 提交按钮
reset: 重置按钮
image: 图像形式的提交按钮
hidden: 隐藏域
file: 文件域

name:控件的名称
value:input控件中的默认文本值
size: 在页面中显示的宽度
readonly:内容为只读
disabled:第一次加载页面禁用该控件
checked:定义选择控件默认被选中的项
maxlength:控件允许输入的最多字符数

文本控件：<textarea>
基本语法格式：

<textarea cols="每行中的字符数" rows="显示的行数">文本内容</textarea>

下拉列表：<select>
基本语法格式：<select>
	    <option>选项1</option>
	    <option>选项2</option>
	    <option>选项3</option>
              </select>

<select>属性：
size:可见选项数
multiple:定义下拉菜单具有多项选择的功能
<option>属性：
selected:定义当前项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>表单标记的使用</title>
    <style type="text/css">
        .table{
     
     
            width: 200px;
            height: 300px;
            border: solid 1px coral;
            padding: 0px;
            background-color: blue;
            font-family: 楷体;
        }
    </style>
</head>
<body>
<form action="#" method="post">
    <table class="table" align="center">
        <tr>
            <td class="frist">用户名</td>
            <td><input type="text" maxlength="12"></td>
        </tr>
        <tr>
            <td class="frist">手机号码</td>
            <td><input type="text" maxlength="11"></td>
        </tr>
        <tr>
            <td class="frist">性别</td>
            <td>男 <input type="radio" name="sex" id="boy">
                女<input type="radio" name="sex" id="gril">
            </td>
        </tr>
        <tr>
            <td class="frist">密码</td>
            <td><input type="password" maxlength="16"></td>
        </tr>
        <tr>
            <td class="frist">确认密码</td>
            <td><input type="password" maxlength="16"></td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea rows="12"></textarea></td>
        </tr>
        <tr>
            <td class="frist"> 您所在的区域</td>
            <td>
            <select>省份:
                <option>广东</option>
                <option>浙江</option>
                <option>江苏</option>
            </select>
            <select>城市:
                <option>广州</option>
                <option>杭州</option>
                <option>南京</option></select>
            </td>
        </tr>
        <tr>
            <td class="frist">您的兴趣爱好</td>
            <td><input type="button" >游戏
            <input type="button" >运动
            <input type="button" >学习
            <input type="button" >唱歌</td>
        </tr>
        <tr>
            <td> <input type="submit"></td>
            <td> <input type="file"></td>
        </tr>

    </table>
</form>
</body>
</html>

浮动与定位
元素的浮动：
设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程
浮动标记：float
left：向左浮动
right：向右浮动
none：默认值
基本格式：选择器{float:属性值;}

清除浮动：
空标记：在浮动元素之后添加空标记，并对该标记应用"clean:both"样式，清除浮动

overflow：overflow:hidden;样式清除浮动，也可以清除浮动对该元素的影响
属性值：
visible:内容不会被修剪，会呈现在元素框之外
hidden:溢出内容会被修剪，修剪内容不可见
auto:需要时产生滚动条，自适应所要显示的内容
scroll:溢出内容会被修剪，浏览器始终显示滚动条

after伪对象：该方法只适用于IE8及以上版本的浏览器

元素的定位：通过CSS定位可以实线网页元素的精确定位
元素的定位属性主要博爱阔定位模式和边偏移两部分

定位模式：position
基本格式：选择器{position:属性值;}
属性值：
自动定位：static 默认
相对定位：relative 原文档流
绝对定位：absolute 父元素
固定定位：fixed 浏览器

边偏移：
顶部偏移量：top
底部偏移量：bottom
左侧偏移量：left
右侧偏移量：right

z-index层叠等级属性分析
1.可以调整重叠定位元素的堆叠顺序，其取值可以为正整数，负整数和0
2.对多个元素同时设置定位时，定位元素之间有可能会发生重叠

定位的原则：
1.如果仅设置绝对定位，不设置边偏移，则元素的位置不变，但其不再占用标准文档流
中的空间，与上移的后续元素重叠
2.定义多个边偏移属性时，如果left和right冲突时，以left为准，top

例子：
<!DOCTYPE html>
<html>
<head>
	<title>浮动与定位</title>
	<style type="text/css">
		#box{
     
     
			width: 200px;
			height: 100px;
		}
		.onebox{
     
     z-index: -10px;
			position: absolute;
		    width: 70px;
		    height: 30px;
		    background-color: blue;
		}
		    .twobox{
     
     z-index: -20px;
			position: absolute;
		    width: 70px;
		    height: 30px;
		    background-color: red;
		}
		    .threebox{
     
     z-index: -30px;
			position: absolute;
		    width: 70px;
		    height: 30px;
		    background-color: rgb(255,255,255);}
	</style>
</head>
<body>
<div id="box">
<div class="onebox">1</div>
<div class="twobox">2</div>
<div class="threebox">3</div>
	
</div>
</body>
</html>

CSS高级技巧
CSS精灵技术的需求：
当用户访问一个网站时，网页上的每张图像都要经过一次请求才能展现给用户，
然而，一个网页中给往往会应用很多小的背景图像作为修饰，服务器就会频繁的接受和发送该请求
这将大大降低页面的加载速度

通过使用background-position

CSS布局：
在制作网页时，要想使页面结构清晰，有条理，也需要对网页进行"排版"
“版心"是指网页中主体内容所在的区域，一般在浏览器窗口中"水平居中显示”

布局原则：
1.确定页面的"版心"
2.分析页面中的行模块，以及每个行模块中的列模块
3.运用个盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

网页中的组成模块：
头： header
导航： nav
焦点图： banner
内容： content
页面底部：footer

命名需要遵循以下几个原则：
1.避免使用中文字符命名
2.以能数字开头命名
3.不能占用关键字
4.用最少的字母达到最容易理解的意

HTML+CSS（详细版）

猜你喜欢