使用表格<table></table>对网站首页进行布局有缺陷，不能拖动版块，不灵活。
DIV
Div是一个html的标签，单独使用没有意义，必须结合CSS使用；
是一个块级元素，单独占一行；
它主要用于页面的布局；
Span
Div是一个html的标签，单独使用没有意义，必须结合CSS使用；
是一个内联元素，显示一行；
它主要用于对括起来的内容进行样式的修饰；
CSS
层叠样式表：同一元素，同一属性，设置不同值；
解决内容与表现分离的问题（html只能将元素展现出来，内容样式无法展示出来），对内容进行修饰；
语法和规范：
设置样式：
<style></style>
*第一种写法：写在<head></head>内部
<style></style> 内部：
（选择器：用于快速查找需要设置样式的元素）
选择器{
属性名1:属性值1；
属性名2:属性值2(；)
}
*冒号是英文输入法的
*最后一个分号可以省略
基本选择器：(3种)
- 元素选择器：对整体设置样式（div）
例子：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>元素选择器</title> 7 <!--对整体设置样式--> 8 <style type="text/css"> 9 div{ 10 font-size:50px; 11 color:pink; 12 } 13 </style> 14 </head> 15 <body> 16 <div> 17 哈哈哈哈哈11 18 </div> 19 <div> 20 哈哈哈哈哈22 21 </div> 22 <div> 23 哈哈哈哈哈33 24 </div> 25 <div> 26 哈哈哈哈哈44 27 </div> 28 <div> 29 哈哈哈哈哈55 30 </div> 31 </body> 32 33 </html>
结果：
- 类选择机器：部分设置样式（. class名字）
例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>类选择器</title> 6 <!--部分设置样式--> 7 <style> 8 .div2{ 9 font-size: 30px; 10 color:gold 11 } 12 </style> 13 </head> 14 <body> 15 <div> 16 哈哈哈哈哈11 17 </div> 18 <div class="div2"> 19 哈哈哈哈哈22 20 </div> 21 <div> 22 哈哈哈哈哈33 23 </div> 24 <div class="div2"> 25 哈哈哈哈哈44 26 </div> 27 <div> 28 哈哈哈哈哈55 29 </div> 30 </body> 31 </html>
结果：
- id选择器：单个设置样式（# id名）
*注意：虽然44可以实现样式，但不是id选择器的目的，此处是有问题的。使用时只设置一个。
例子：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>id选择器</title><!--单个设置样式--><style>#div5 {font-size: : 30px;color: yellow;}</style></head><body><div>哈哈哈哈哈11</div><div class="div2">哈哈哈哈哈22</div><div>哈哈哈哈哈33</div><!--虽然44可以实现样式，但不是id选择器的目的，此处是有问题的。使用时只设置一个。--><div class="div2" id="div5">哈哈哈哈哈44</div><div id="div5">哈哈哈哈哈55</div></body></html>
结果：
其他选择器
- 层级选择器：层次选择样式(div p)
例子：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>层级选择器</title> 7 <style> 8 div p{ 9 font-size:30px;; 10 color:green; 11 } 12 </style> 13 </head> 14 15 <body> 16 <div> 17 哈哈哈哈哈11 18 </div> 19 <div> 20 哈哈哈哈哈22 21 </div> 22 <div> 23 哈哈哈哈哈33 24 </div> 25 <div> 26 <p> 27 哈哈哈哈哈55 28 </p> 29 </div> 30 <div> 31 哈哈哈哈哈55 32 </div> 33 </body> 34 35 </html>
结果：
- 属性选择器：属性选择样式( input[type='..' ] )
例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>属性选择器</title> 6 <style> 7 input[type='text']{ 8 background-color: red; 9 } 10 11 input[type='password']{ 12 background-color: blue; 13 } 14 </style> 15 </head> 16 <body> 17 用户名：<Input type="text" name="username"/><br /> 18 密码：<input type="password" name="password" /> 19 </body> 20 </html>
结果：
