网页布局的三个阶段和CSS的基本概念

  1. 网页布局的三个阶段
  • table网页设计 内容和样式(外观和布局)混合
  • table+css网页设计 table布局,css指定外观
  • div+css网页设计 div放内容,css指定样式(外观和布局), 内容和样式彻底分离
  1. CSS的基本概念

CSS(cascading style sheet,层叠样式表)是一种制作网页的新技术,现在已经为大多数浏览器所支持,成为网页设计必不可少的工具之一

  1. CSS的优点
  • 使网页代码更少,网页下载更快
  • 实现了内容与样式的分离,使网站维护更快捷
  • 使网页与浏览器的兼容性更好

CSS的语法结构

每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束

FZSFP.png

注意:在CSS中,选择器是非常重要的,它制定了对哪些元素进行样式设置


CSS的三种引入方式

  1. 行内样式

它是所有样式方法中最为直接的一种,它直接对HTML的标签使用style属性, 然后将css代码直接写在其中

1
2
3
<p style="color:#ff0000; font-size:20px; ">正文内容 1</p>
<p style="color:#000000; font-style:italic;">正文内容 2</p>
<p style="color:#ff00ff; font-size:25px; ">正文内容 3</p>
  1. 内部样式

内部样式就是将css写在与之间,并且用标签进行声明

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
p{
color:#0000ff;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
</style>

<p>这是第1行正文内容......</p>
<p>这是第2行正文内容......</p>
<p>这是第3行正文内容......</p>
  1. 外部样式

外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可

1
2
3
4
5
6
7
8
<head>
<title>页面标题</title>
<link href="07-07.css" type="text/css" rel="stylesheet">
</head>
<h2>CSS标题</h2>
<p>这是正文内容……</p>
<h2>CSS标题</h2>
<p>这是正文内容……</p>

CSS常见选择器

  1. 标签选择器

FZ9W8.png

1
2
3
4
5
6
7
8
<style>
h1{
color:red;
font-size:25px;
}
</style>

<h1>fuck alex</h1>
  1. ID选择器

FZPSS.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
#bold{
font-weight:30px;
}
#green{
font-size:30px;
color:#009900;
}
</style>

<p id="bold">ID选择器1</p>
<p id="green">ID选择器2</p>
<p id="green">ID选择器3</p>
<p id="bold green">ID选择器4</p>
  1. 类别选择器

FZiQg.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< style type="text/css">
.red{
color:red;
font-size:18px;
}
.green{
color:green;
font-size:20px;
}
</style>

<p class="red">css选择器1</p>
<p class="green">css选择器2</p>
<h3 class="green">h3同样适用</h3>
  1. 通用选择器
1
* {margin:0;padding:0;}
  1. 包含选择器
1
div p {background:red;}
  1. 分组选择器
1
div, span, h1 {color:blue;}
  1. 伪类选择器

:link 定义超链接默认样式
:visited 定义访问过的样式
:hover 定义鼠标经过的样式
:active 定义鼠标按下的样式

1
2
3
4
a:link { color:#ff0000; }  /*默认样式,超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后,超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过,超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时,超链接文字为黄色*/
  1. 选择器的优先级

行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
#show1{color:gold;}
.show {color:pink;}
h1 {color:red;}
* {color:green;}
</style>
</head>
<body>
<h1 id="show1" class="show" style="color:gray;">优先级测试</h1>
</body>

段落(文本)属性和边框以及背景属性

  1. 文本的行高 — line-height
1
line-height:行高值(像素)
  1. 文本对齐 — text-align
1
2
3
4
5
text-align : left / right / center

left:左对齐;
right:右对齐
center:居中对齐
  1. 边框设置 — border
1
宽度,样式,颜色  (border: 1px solid red;)
  1. 文字属性

字号:font-size
语法:font-size:大小的取值(像素值)

文字颜色:color
语法:Color:颜色取值

color:#292378; //6个十六进制数获得颜色
color:#A64; //#AA6644的缩写
color:red; //颜色关键字定义颜色
color:rgb(100,159,170); //rgb定义颜色

tips: chrome控制台可以获取你想要的颜色

  1. 背景属性

背景颜色 —- background-color

关键字:red pink orange

背景图像 —- background-image

使用background-image属性可以设置元素的背景图像
语法:background-image:url(图像地址)

**背景位置 ---- background-position** >background-position-x : 200px; >background-position-y : 100px;

背景重复 —- background-repeat

语法:background-repeat:取值

Repeat(默认) 背景图像平铺排满整个网页
repeat-x 背景图像只在水平方向上平铺;
repeat-y 背景图像只在垂直方向上平铺。
no-repeat 背景图像不平铺

**使用背景属性的一个常见案例**

当我们的网站流量比较大的时候,我们一般在请求图片资源时,并不是一张一张的去请求,而是一整张的去请求,然后根据需求对图像进行截取,这样的话,能够减少网络的请求,节省大量的费用

FZFyQ.png

1
2
3
4
5
6
7
8
9
10
11
12
<style>
#myimg{
border:1px solid red;
height:18px;
width:18px;
background-image:url('2.png');
background-position-y:138px;
}
</style>
<body>
<div id="myimg"></div>
</body>

布局属性

注意:只有块级元素使用下列属性才有效

1. 外边距 – margin

FZkLj.png

margin是对外元素的距离,用来控制元素本身的浮动位置

margin的取值:

  • 四边距margin
  • 上边距margin-top
  • 下边距margin-bottom
  • 左边距margin-left
  • 右边距margin-right
1
margin 10px 20px 30px 40px;

margin取值解释:

提供一个,用于四边;
提供两个,第一个用于上-下,第二个用于左-右;
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
提供四个参数值,将按上-右-下-左的顺序作用于四边;

注意:margin: a auto — 居中显示

2. 内边距 – padding

FZVwn.png

padding是对内元素,用来控制内部元素的位置

padding的取值:

  • 四边距padding
  • 上边距padding-top
  • 下边距padding-bottom
  • 左边距padding-left
  • 右边距padding-right
1
padding 10px 20px 30px 40px;

padding取值解释:

提供一个,用于四边;
提供两个,第一个用于上-下,第二个用于左-右;
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
提供四个参数值,将按上-右-下-左的顺序作用于四边;

3. 元素浮动 – float

float的取值:left, right, none(默认值)

3个div正常显示如下:
FZMSU.png

如果想让3个div并排显示,就需要设置它们的float属性,如下是设置float:left;

FZQlF.png

如下是设置第1个和第3个div向左浮动float:left;第2个div向右浮动float:right;

FZly4.png

因此我们想,如果有若干个div,都设置float:left,则会像流水一样排开

FZ1OJ.png

看到这块以后,想必聪明的你也许想到了,各大电商网站上商品的展示不就是这个样子的吗,嗖嘎!

FZGwR.png

常见的banner头部的制作案例

FZ8m9.png

1
2
3
4
5
6
7
8
9
10
11
<div style="background-color:#f2f2f2;height:38px;line-height:38px;">
<div style="width:980px; margin:0 auto;">
<div style="float:left;font-size: 12px;">请登录</div>
<div style="float:right;">
<a href="#">我的淘宝</a>
<a href="#">购物车</a>
<a href="#">手机淘宝</a>
</div>
</div>
<div style="clear:both;"></div>
</div>

4. display属性

  • block:将元素变成块级标签,可以设置高度和宽度
  • inline:将元素变成行内标签,不能设置高度和宽度
  • inline-block:同时具有两种
  • none:标签消失
1
<span style="background-color:gray;height:70px;width:20px;">行内标签</span>

5. overflow溢出处理属性

  • Overflow (水平和垂直均设置)
  • Overflow-x (设置水平方向)
  • Overflow-y (设置垂直方向)

设置水平滚动条

overflow-x : scroll

FZJT1.png

设置垂直方向滚动条

overflow-y : scroll

FZtFx.png

6. 定位属性

  • fixed : 将某个元素固定在页面的某个位置
  • absolute : 绝对定位
  • relative:相对定位

定位方式通常与定位坐标一起使用
定位坐标:要定位的元素偏离目标位置多远的距离
常见取值:Top,left,right,bottom

1.fixed属性

将某个元素固定在页面的某个位置

特点:

相对于浏览器的窗口来进行定位的
固定到窗口的某个位置上,不随内容而滚动
如果不设置定位坐标,就在原来的位置,否则反之

案例:

FZdSO.png

2.relative属性

相对定位

特点:

相对定位是相对于,自身的左上角为坐标点

FZ06e.png

3.absolute属性

绝对定位

特点:

相对于(祖先元素的定位方式(relative)来进行定位

找祖先元素是否有定位,如果没有定位,找到<body>,就相对body来定位
如果找到祖先元素有定位,相对祖先元素来定位

FZrmd.png

简单的案例

FZs0A.png

学会了这个定位属性之后,我们可以做出如下的效果

FZckt.png

7. z-index

设置对象的层叠顺序

特点

较大 number 值的对象会覆盖在较小 number 值的对象之上

浮层的效果

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
33
34
<style>  
.one{
height:2000px;
background-color: #dddddd;
}
.two{
height:2050px;
background-color: #3ba354;
position: fixed;
top:0;
right:0;
left:0;
opacity: 0.3;
/*z-index:10;*/
}
.three{
height:400px;
width:300px;
position: fixed;
top:100px;
right:400px;
left:800px;
background-color: white;
z-index: 10;
}
</style>
<body>
<div class="one">
</div>
<div class="three">
</div>
<div class="two">
</div>
</body>

网站页面

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

body{
background-color: #999999;
margin:0;
}
.pg-body{
background-color: white;
border:1px solid orange;
width: 770px;
margin:0 auto;
}
.item{
border:1px solid #dddddd;
float: left;
width:150px;
margin:10px;
padding:10px;
position: relative;
}
h2{
border:1px solid orange;
height:48px;
line-height: 48px;
margin-top: 0;
padding-left:15px;
color:orange;
}
p, span, u{
font-size: 12px;
text-align: center;
}
.item span{
color:red;
margin-left: 30px;
}
.hot{
position: absolute;
top:0;
right:0;
}
</style>
<body>
<div class="pg-body">
<h2>限时抢购</h2>
<div class="item">
<img src="images/01.jpg" alt="">
<p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
<span>¥476.00</span> <u>¥1360</u>
<div class="hot">
<img src="images/xsq.png" alt="">
</div>
</div>
年终盛典 满128减30元</p>
<span>¥476.00</span> <u>¥1360</u>
<div class="hot">
<img src="images/xsq.png" alt="">
</div>
</div>
<div class="item">
<img src="images/01.jpg" alt="">
<p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
<span>¥476.00</span> <u>¥1360</u>
<div class="hot">
<img src="images/xsq.png" alt="">
</div>
</div>
<div class="item">
<img src="images/01.jpg" alt="">
<p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
<span>¥476.00</span> <u>¥1360</u>
<div class="hot">
<img src="images/xsq.png" alt="">
</div>
</div>
<div class="item">
<img src="images/01.jpg" alt="">
<p>[特价款]雷朋板材光学镜架 <br>
年终盛典 满128减30元</p>
<span>¥476.00</span> <u>¥1360</u>
<div class="hot">
<img src="images/xsq.png" alt="">
</div>
</div>

<div style="clear: both;"></div>
</div>
</body>
</html>
####
常见的网站布局

FZgtP.png

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
background-color: #2459a2;
height:48px;
line-height: 48px;
}
.pg-left{
background-color: #666666;
width:10%;
position: fixed;
top:48px;
bottom:0;
left:0;
}
.pg-content{
background-color: wheat;
width:90%;
position: fixed;
top:48px;
bottom:0;
left:10%;
right:0;
overflow: auto;
}

.pg-header .logo{
color: white;
width:10%;
background-color: #204982;
text-align: center;
}

.pg-header .userinfo{
width:150px;
margin-top: 4px;
}
.pg-header .userinfo .infolist{
background-color:red;position: absolute;top:44px;right: 20px;z-index:10;
display: none;
}
.pg-header .userinfo:hover .infolist{
background-color: #204982;
display: block;
}
.pg-header .userinfo img{
border-radius: 50%;
}
.pg-header .userinfo a{
display: block;
width:160px;
color:white;
}
</style>
</head>
<body>
<div class="pg-header">

<div class="logo left">
<span>欢迎光临</span>
</div>

<div class="userinfo right" style="position: relative;">
<img src="3.jpg" alt="" style="width: 40px;height: 40px;">
<div class="infolist">
<a>我的信息</a>
<a>退出</a>
</div>
</div>

</div>

<div class="pg-body">
<div class="pg-left left">
这是菜单页面
</div>
<div class="pg-content left">
这是内容页面<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>这是内容页面<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>这是内容页面<p>这是内容页面<p>这是内容页面<p>这是内容页面<p>这是内容页面<p>
这是内容页面<p>这是内容页面<p>这是内容页面<p>这是内容页面<p>这是内容页面<p>这是内容页面<p>这是内容页面<p>这是内容页面<p>
这是内容页面<p>这是内容页面<p>这是内容页面<p>这是内容页面<p>这是内容页面<p>这是内容页面<p>这是内容页面<p>
</div>
</div>


<div class="pg-foot">
这是最底页面
</div>
</body>
</html>