-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-css(定位).html
153 lines (141 loc) · 4.47 KB
/
index-css(定位).html
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index-css(定位)</title>
<style type="text/css">
/*相对定位relative*/
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
/*绝对定位absolute*/
h2.pos_abs{
position: absolute;
left: 100px;
top: 150px;
}
/*浮动(float )和清理(clear)*/
img.ai{float:right;border:1px dotted black;margin: 30px 0px 15px 20px }
span{
float: left;
width: 0.7em;
font-size: 400%;
font-family:algerian,Courier;
line-height:80%;
}
ul{
float: left;
width: 100%;
padding: 0px;
margin: 0px;
list-style-type: none;
}
a{
float: left;
width:7em;
text-decoration: none;
color:white;
background-color: purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover{
background-color: #ff3300;
}
li{
display: inline;
}
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
/*除侧面元素*/
img{float: left;clear: both}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<br>
<br>
<br>
<br>
<img class="ai" src="img/egtag.png" />
<p>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>
<p class="float-l">
<span>T</span>his is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<ul>
<li><a href="#">Link one</a> </li>
<li><a href="#">Link two</a> </li>
<li><a href="#">Link three</a> </li>
<li><a href="#">Link four</a> </li>
</ul>
<div class="container">
<div class="header"><h1 class="header">W3School.com.cn</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain
anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3School.com.cn you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>
<img src="img/eg_planets.jpg" alt="le">
<img src="img/eg_planets.jpg" alt="le1">
</body>
</html>