1.普通设置<html>
<head>
<style type="text/css">
H1{font-size:16pt;color:red}
H2{font-size:10pt;color:green}
#code1{font-size:16pt;color:red}
P.code{font-size:16pt;color:red}
.comment{font-size:20pt;color:red}
p a{font-size:45;color:yellow}
</style>
</head>
<body>
<h2 style="font-size:10pt;background:yellow;font-family:courier">World</h2>
<p id="code1">
</p>
<P class="code">
</P>
<P class="comment">
</P>
<p>
<a name="test">hello</a>
</p>
<pre>里面可以安照你想要的格式写</pre>
2.引进css
<link REL=stylesheet href="03.css" type="text/css">
3.字体属性
<style type="text/css">
.font1{font-family:verdana; font-style:italic; font-variant: small-caps; font-weight: lighter; font-size:18pt; color:red}
</style>
<p class="font1">Hello world!</p>
4.链接
<style type="text/css">
/* 我是注释 */
a:link{color:green;text-decoration:none}
a:active{color:blue;text-decoration:none}
a:visited{color:orange;text-decoration:none}
a:hover{color:red;text-decoration:underline}
</style>
</head>
5.鼠标效果
<div style="font-family:隶书; font-size:24pt; color:green">
<span style="cursor:hand">手的形状</span><br>
<span style="cursor:move">移动</span><br>
<span style="cursor:ne-resize">反方向</span><br>
<span style="cursor:wait">等待</span><br>
<span style="cursor:help">求助</span>
</div>
6.定位属性
<HTML>
<HEAD>
<TITLE>定位属性</TITLE>
<STYLE type=text/css>
#container1 {POSITION: absolute; TOP: 100px}
#container2 {VISIBILITY: hidden; POSITION: absolute; TOP: 100px}
P{FONT-SIZE: 12pt}
</STYLE>
</HEAD>
<BODY>
<P style="FONT-SIZE: 15pt; COLOR: #cc33cc; FONT-FAMILY: 行书体">请选择一幅图片: </P>
<DIV id=container1>
<IMG height=280 src="images/sand.jpg" width=185>
<P style="FONT-SIZE: 12pt; COLOR: #cc9933; FONT-FAMILY: 行书体">名称：大漠</P>
</DIV>
<DIV id=container2>
<IMG height=280 src="images/ocean.jpg" width=185>
<P style="FONT-SIZE: 12pt; COLOR: #3366cc; FONT-FAMILY: 行书体">名称：大海</P>
</DIV>
<FORM name=myform>
<P>
<INPUT οnclick="container1.style.visibility='visible'; container2.style.visibility='hidden'" type=button value=大漠>
<INPUT οnclick="container2.style.visibility='visible'; container1.style.visibility='hidden'" type=button value=大海>
</P>
</FORM>
</BODY>
</HTML>
7.多层图片显示
<HTML>
<HEAD>
<TITLE>zindex</TITLE>
<STYLE type=text/css>
.pile {LEFT: 2in; WIDTH: 3in; POSITION: absolute; TOP: 2in; HEIGHT: 3in}
.pile1 {LEFT: 3in; WIDTH: 1in; POSITION: absolute; TOP: 2in; HEIGHT: 1in}
</STYLE>
</HEAD>
<BODY>
<IMG class=pile id=image style="Z-INDEX: 2" src="images/flower.jpg">
<DIV class=pile id=text1 style="Z-INDEX: 1; COLOR: #ffff33">
<font size=5 color="red"><b>将覆盖在图片上。 </b></font>
</DIV>
<IMG class=pile1 id=image style="Z-INDEX: 3" src="images/mouse.gif">
</BODY>
</HTML>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
