1.div+css网页标准布局
1.div
1.DIV全称是division，意为“区块、分割”，DIV标签是一个无意义的容器标签，用于将页面划分出不同的区域
2.通过DIV将复杂的页面进行细分块，可以将问题细分一个一个解决，所以通过DIV将页面分块是一个关键的工作，也是决定最终效果与质量的前提。
2.css
CSS (Cascading Style Sheet)，中文翻译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
3.div承载的是内容，而css承载的是样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords"content=""/>
<meta name="description" content="本篇网页的概述，一段话，对网站的进一步描述"/>
<meta name="author" content="网页作者的资料">
<meta name="robots" content="" />
<meta http-equiv="Content－Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
/*
body{
color:blue;
}
div{
font-size:15px;background:red;
}
*/
</style>
</head>
<body>
我是div
</body>
</html><!--more-->
|
2.css写法
1.嵌入式css写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- 嵌入式css写法 -->
<style type="text/css">/*选择器*/
p{
color:red;
font-size: 30px;
}
span{
color:green;
font-size: 40px;
}
</style>
</head>
<body>
[百度]()
<br />
span标签
<p>今天是星期天</p>
<!-- 行内样式 -->
今天天气不错
</body>
</html>
|
2.引入样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>今天是星期天</p>
<p>今天是星期天</p>
<p>今天是星期天</p>
<p>今天是星期天</p>
<p>今天是星期天</p>
</body>
</html>
|
CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
| /*导入样式*/
@import url('base.css');
p{
color:orange;
font-size: 50px;
}
span{
color:green;
font-size: 40px;
}
|
3.选择器
**当我们定义一条样式规则时候，这条样式规则会作用于网页当中的某些元素，而我们的规定的这些元素的规则就叫做选择器。 **
1.常用的选择器：
1、id选择器 #idname
2、类选择器 .classname
3、标签选择器 tagname
4、交叉选择器 tagname.classname tagname#idname
5、群组选择器 多个选择器用“，”隔开
6、后代选择器（包含选择器） 父级和子级用空格隔开
7、通用选择器 * {}
2.CSS选择器优先级示意图** **
所谓的优先级，指的就是哪条样式规则会最后作用于指定的元素，他只遵循一条规则，指定的越具体优先级越高
优先级由高到低：
** **行内样式
交叉选择器
id选择器
类型选择器
标签选择器
*通配符
浏览器对标记预定义的样式
继承的样式
后代级别选择器
同辈级别选择器
伪类选择器
属性选择器
UI伪类选择器
1
| <link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)"
|
2.利用CSS3-Media Query实现响应式布局
** （2）在样式表中内嵌@media：**
1
2
3
4
5
6
7
8
9
10
| <style>
@media screen and (min-width: 600px) {
.one{
border:1px solid red;
height:100px;
width:100px;
}
}
</style><br /><br />
|
特殊设备语法
