-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss18.html
58 lines (56 loc) · 3.57 KB
/
css18.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css positioning定位</title>
<style>
p.pos_fixed {position:fixed;top:30px;right:50px;} /*元素的位置相对于浏览器窗口是固定位置,不会移动*/
h2.pos_left {position:relative;left:-20px;}/*相对定位元素的定位是相对其正常位置。*/
h2.pos_right {position:relative;left:50px;}
h2.pos_top {position:relative;top:-50px;} /*可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。*/
h2.one {position:absolute;left:100px;top:150px;}/*绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:*/
img {position:absolute;left:0px;top:830px;z-index:-1;}
img {position:absolute;clip:rect(0px,60px,200px,0px;)} /*裁剪元素的外形*/
div.scroll {background-color:#00ffff;width:100px;height:100px;overflow:scroll;} /*使用滚动条来显示元素内溢出的内容*/
div.hidden {background-color:green;width:100px;height:100px;overflow:hidden;}/*使用隐藏来显示元素内溢出的内容*/
</style>
</head>
<body>
<p class="pos_fixed">this is some text</p>
<p><b>注意:</b> IE7和IE8支持只有一个!DOCTYPE指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
<h2>正常标题没有定位</h2>
<h2 class="pos_left">向左边定位了</h2>
<h2 class="pos_right">向右边定位了</h2>
<h2 class="pos_top">向上定位了 所占的空间不会改变</h2>
<h2 class="one">This is a heading with an absolute position</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。</p>
<h1>this is a heading</h1>
<img src="http://www.w3cschool.cn/attachments/cover/cover_cssref.jpeg" width="100" height="140"/>
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p><br>
<img src="http://www.w3cschool.cn/attachments/cover/cover_cssref.jpeg" width="100" height="140"/>
<p>overflow 属性规定当内容溢出元素框时发生的事情.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<p>将鼠标移动带这些字上改变鼠标样式cursor</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<spam style="cursor:wait">wait</spam><br>
</body>
</html>