<!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>
<style type="text/css">
a.normal {font-variant: normal}
a.small {font-variant: small-caps}
c.thick {font-weight: bold}
d.italic {font-style:italic}
div#container{width:1300px;}
div#header {background-color:#99BBBB;}
div#menu { height:330px; width:400px; float:left;}
div#win {height:230px; width:400px; float:left;}
div#content {background-color:#CCCCCC; height:250px; width:900px; float:right;}
div#great {height:230px; width:330px; float:right;}
div#footer {background-color:#99BBBB;height:30px; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
h1 {text-transform: uppercase}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
<title>CSS Test</title>
<link id="style1" type="text/css" rel="stylesheet"
href="style1.css" title="蓝色风格" />
<link id="style2" type="text/css" rel="stylesheet" background="36.jpg"
href="style2.css" title="灰色风格" />
<script type="text/javascript">
function setStyle(title) {
// 首先禁用所有的样式表
$("style1").disabled = true;
$("style2").disabled = true;
// 启用指定的样式表
$(title).disabled = false;
}
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<body>
<div id="container">
<div id="header">
<h1 align="center">
<MARQUEE behavior=scroll>
<font color=blue size=6 face="华文隶书">欢迎进入My First Web Page</font>
</MARQUEE></h1>
</div>
<div id="menu">
<h2 align="center">字体格式</h2>
<ul>
<body>
<a class="normal">This is a paragraph</p>
<a class="small">This is a paragraph</p>
<c class="thick">This is a paragraph</p>
<d class="italic">This is a paragraph</p>
</body>
</ul>
</div>
<div id="content">
<body>
<table id="customers">
<tr>
<th>公司</th>
<th>总裁</th>
<th>所属国</th>
</tr>
<tr>
<td>苹果</td>
<td>乔布斯</td>
<td>美国</td>
</tr>
<tr class="alt">
<td>百度</td>
<td>李彦宏</td>
<td>中国</td>
</tr>
<tr>
<td>谷歌</td>
<td>拉里·佩奇</td>
<td>美国</td>
</tr>
<tr class="alt">
<td>联想</td>
<td>柳传志</td>
<td>中国</td>
</tr>
<tr>
<td>微软</td>
<td>比尔.盖茨</td>
<td>美国</td>
</tr>
<tr class="alt">
<td>诺基亚</td>
<td>斯蒂芬.埃洛普</td>
<td>芬兰</td>
</tr>
</table>
</body>
</div>
</div>
<div id="great">
<body>
<a href="http://www.sina.com.cn" target=_new > 进入新浪 </a><p>
<a href="http://www.microsoft.com/zh-cn/default.aspx" target=_new > 微软中国 </a><p>
<a href="http://www.apple.com.cn/" target=_new > 苹果官网 </a><p>
<a href="http://www.lenovo.com.cn/"target=_new> 联想中国 </a><p>
<a href="http://www.nokia.com/cn-zh//" target=_new > 诺基亚官网 </a><p>
<a href="http://www.tianyt.com/forum.php/" target=_new > 个人休闲论坛 </a><p>
</body>
</div>
<div id="win">
<h3 align="center">大小写控制</h3>
<body>
<h1>This Is An H1 Element</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
</body>
</div>
</body>
<bgsound src="sound/newmorning.mp3" loop="-1">
</body>
<div id="footer"><button onclick="setStyle('style1')">蓝色风格</button>
<button onclick="setStyle('style2')">灰色风格</button></div>
</div>
<SCRIPT LANGUAGE="JavaScript">
var snow_size = new Array();
var snow_color = new Array();
var num= 50;
var smallest = 5 ;
var largest = 30;
var dx = new Array();
var xp = new Array();
var yp = new Array();
var am = new Array();
var stx = new Array();
var sty = new Array();
var doc_width;
var doc_height;
function makeSize()
{
return smallest + Math.random()*largest;
}
function makeColor1()
{
for(i = 0; i < num; ++ i)
{
snow_color[i] = '#ffffff';
}
}
function makeColor2()
{
for(i = 0; i < num; ++ i)
{
A = Math.ceil(Math.random()*255);
B = Math.ceil(Math.random()*255);
C = Math.ceil(Math.random()*255);
snow_color[i] = 'rgb('+A+','+B+','+C+')';
}
}
function init()
{
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
makeColor2();
for (i = 0; i < num; ++ i)
{
dx[i] = 0;
xp[i] = Math.random()*(doc_width-40);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
snow_size[i] = makeSize();
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
document.write("<div id='snow_"+ i +"' style='POSITION: absolute; Z-INDEX: eval(30"+ i +"); VISIBILITY: visible; TOP: 15px; LEFT: 15px;font-size:"+snow_size[i]+";color:"+snow_color[i]+"'>*</div>");
}
}
function snow()
{
for (i = 0; i < num; ++ i)
{
yp[i] += sty[i];
if (yp[i] > doc_height-50)
{
xp[i] = Math.random()*(doc_width-am[i]-20);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("snow_"+i).style.top = yp[i];
document.getElementById("snow_"+i).style.left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snow()", 10);
}
//-->
</SCRIPT>
<BODY id='myBody' bgcolor="#000">
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
init();
snow();
//-->
</SCRIPT>
</html>
html.zip_HTML简单网页_html 注册登录_html登录网页_登录注册_登录背景
版权申诉
142 浏览量
2022-09-14
20:27:19
上传
评论
收藏 3.36MB ZIP 举报
html.zip （9个子文件） 
新建文件夹 
style0.htm 1003B style2.css 132B image 
yu.gif 106KB
2.jpg 277KB shuimo.jpg 6KB 36.jpg 155KB
style3.html 6KB sound newmorning.mp3 2.86MB style1.css 132B资源评论
