题一:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产看一年四季变化</title>
<script>
</script>
</head>
<body>
<div>
<table align="center" border="1" bordercolor="">
<tr>
<td>
<img src="img/chun1.png" width="624px" height="379px" />
</td>
<td>
<img src="img/xia1.png" width="624px" height="379px" />
</td>
</tr>
<tr>
<td style="text-align: center;"><a href="javascript:location.href='chun.html'">春</a></td>
<td style="text-align: center;"><a href="javascript:location.href='xia.html'">夏</a></td>
</tr>
<tr>
<td>
<img src="img/qiu1.png" width="624px" height="379px" />
</td>
<td>
<img src="img/don1.png" width="624px" height="379px" />
</td>
</tr>
<tr>
<td style="text-align: center;"><a href="javascript:location.href='qiu.html'">秋</a></td>
<td style="text-align: center;"><a href="javascript:location.href='dong.html'">冬</a></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><a href="javascript:location.reload()">刷新</a></td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>春的详情</title>
</head>
<body>
<div>
<table>
<tr>
<td>
<img src="img/chun2.jpg" />
</td>
<td>
春天,又称春季,是四季中的第一个季节,指立春至立夏期间,含节气有立春、雨水、惊蛰、春分、清明、谷雨。
是万物复苏的季节。通常将北半球的公历3月~5月 [1] 定为春季,而南半球则是公历9月下旬~12月下旬定为春季。
中国现代气象学上以连续5天平均气温在10℃以上为春季的开始。
春天气候温暖适中,中国内陆大部分地区有降雨,万物生机萌发,气候多变,乍暖还寒。
春三月,此谓发陈,天地俱生,万物以荣,夜卧早起,广(多)步(走)于庭,被发缓形(意喻不受束缚),以使志生。生而勿杀,予而勿夺,赏而勿罚,此春气之应,养生之道也。逆之则伤肝,夏为寒变,奉长者少。
春阳:因春天阳光温和明媚,令人神往陶醉,故而得名;陈子昂诗“白日每不归,春阳时暮矣”。就是描写春阳的诗句。
阳春:春天的美称。唐朝诗人李白诗中就有“阳春召我以烟景”的诗句。 [2]
芳春:因春天草木萌动,百草新生,大地草绿如茵,繁花似锦,故而得名。陆机诗“烈心厉劲秋,丽服鲜芳春”。将芳春的特点,写得入景入神。<br /><br />
<a href="javascript:location.href='xia.html'">夏天</a>
<a href="javascript:location.href='qiu.html'">秋天</a>
<a href="javascript:location.href='dong.html'">冬天</a>
<a href="javascript:history.back()">后退</a>
<a href="javascript:history.forward()">前进</a>
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>夏天详情</title>
</head>
<body>
<div>
<table>
<tr>
<td>
<img src="img/xia2.png" />
</td>
<td>
夏季是一年中具有“四季分明”地区的第二个季节,是四季之一。
气温高是夏季最显著的气候特征,但因地域、干湿环境的不同,会产生炎热干燥或者湿热多雨的不同气候。
春生、夏长、秋收、冬藏,夏季是许多农作物旺盛生长的最好季节,充足的光照和适宜的温度以及充沛的雨水给植物提供了所需的条件。
季风气候是我国气候的主要特点,夏季受来自海洋的暖湿气流的影响,表现为高温潮湿多雨。雨热同期,有利于农作物成长,农作物在夏季进入了茁壮成长阶段。
在北温带,气象意义上的夏季为公历5月21日(小满)~8月22日(处暑);
在南温带,气象意义上的夏季为公历11月21日(对应北半球的小雪)~次年2月19日(对应北半球的雨水)
根据地球公转特点,北温带的夏季时长理论上要长于南温带。<br /><br />
<a href="javascript:location.href='chun.html'">春天</a>
<a href="javascript:location.href='qiu.html'">秋天</a>
<a href="javascript:location.href='dong.html'">冬天</a>
<a href="javascript:history.back()">后退</a>
<a href="javascript:history.forward()">前进</a>
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>秋天详情</title>
</head>
<body>
<div>
<table>
<tr>
<td>
<img src="img/qiu2.jpg" />
</td>
<td>
秋季,是“春夏秋冬”四季之一。从现代气象学上划分,北温带的秋季在8月23日(处暑)~11月20日(小雪);
南温带的秋季在2月19日(北半球雨水)~5月21日(北半球小满)。在我国,传统上是以二十四节气的“立秋”作为秋季的起点,至立冬结束。
进入秋季,意味着降雨、风暴等趋于下降或减少,在自然界中万物开始从繁茂成长趋向萧索成熟。
立秋并不代表酷热天气的结束,所谓“热在三伏”,按照“三伏”的推算方法,立秋至处暑往往还处在“三伏”期间,所以初秋天气还很热,真正凉爽一般要到白露节气之后。
热与凉的分水岭在秋季,并不是在夏秋之交。秋天的气候分为两个阶段,初秋“闷热”,仲秋后趋向“干燥”、“凉爽”气候特征。总体来讲,进入秋季,太阳高度角渐低,温度由热渐降低;
秋风送爽、炎暑顿消、硕果满枝、田野金黄。<br /><br />
<a href="javascript:location.href='chun.html'">春天</a>
<a href="javascript:location.href='xia.html'">夏天</a>
<a href="javascript:location.href='dong.html'">冬天</a>
<a href="javascript:history.back()">后退</a>
<a href="javascript:history.forward()">前进</a>
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>冬天详情</title>
</head>
<body>
<div>
<table>
<tr>
<td>
<img src="img/don2.png" />
</td>
<td>
冬季,是四季之一,传统是以二十四节气“立冬”作为冬季的开始,“立冬”意味着风雨、湿度、光照、气温等,处于转折点上,
开始从秋季向冬季气候过渡。冬,即“终也、万物收藏也”,立冬后万物开始闭藏。“四立”划分四季反映了气候、物候等多方面特征。
现在划分四季常根据气温变化划分,采用的是近代学者张宝堃的“候平均气温”法,按候平均气温法划分的四季,
日平均气温连续五天等于或低于10摄氏度算是入冬。
立冬太阳位于黄经225°,11月7-8日交节;
小雪太阳位于黄经240°,11月22-23日交节;
大雪太阳位于黄经255°,12月6-8日交节;
冬至太阳位于黄经270°,12月21-23日交节;
小寒太阳位于黄经285°,1月5-7日交节;
大寒太阳位于黄经300°,1月20-21日交节。<br /><br />
<a href="javascript:location.href='chun.html'">春天</a>
<a href="javascript:location.href='xia.html'">夏天</a>
<a href="javascript:location.href='qiu.html'">秋天</a>
<a href="javascript:history.back()">后退</a>
<a href="javascript:history.forward()">前进</a>
</td>
</tr>
</table>
</div>
</body>
</html>
实现效果:
题二:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作树形菜单</title>
<style>
ul{
list-style: none;
}
</style>
<script>
function show1(){
if(document.getElementById("txt2").style.display=="block"){
document.getElementById("txt2").style.display="none";
}else{
document.getElementById("txt2").style.display="block";
}
}
function show2(){
if(document.getElementById("txt1").style.display=="block"){
document.getElementById("txt1").style.display="none";
}else{
document.getElementById("txt1").style.display="block";
}
}
</script>
</head>
<body>
<div>
<p onclick="show2()"><img src="img/fold.gif" />树形菜单:</p>
<ul id="txt1">
<li><img src="img/fclose.gif" />文学艺术</li>
</ul>
<ul id="txt1" onclick="show1()">
<li><img src="img/fclose.gif" />贴图专区</li>
</ul>
<ul id="txt2">
<li><img src="img/doc.gif" />真我风采</li>
<li><img src="img/doc.gif" />视频贴图</li>
<li><img src="img/doc.gif" />行行摄摄</li>
<li><img src="img/doc.gif" />Flash贴图</li>
</ul>
<ul id="txt1">
<li><img src="img/fclose.gif" />房产论坛</li>
</ul>
<ul id="txt1">
<li><img src="img/fclose.gif" />娱乐八卦</li>
</ul>
</div>
</body>
</html>
实现效果:
题三:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab切换效果</title>
<style>
#note2{
display: none;
}
#phone2{
display: none;
}
#phone{
display: none;
}
</style>
<script>
function showNote(){
document.getElementById("note1").style.display="block";
document.getElementById("note2").style.display="none";
document.getElementById("note").style.display="block";
document.getElementById("phone").style.display="none";
document.getElementById("phone1").style.display="block";
document.getElementById("phone2").style.display="none";
}
function showNote2(){
document.getElementById("note1").style.display="none";
document.getElementById("note2").style.display="block";
document.getElementById("note").style.display="none";
document.getElementById("phone").style.display="block";
document.getElementById("phone1").style.display="none";
document.getElementById("phone2").style.display="block";
}
</script>
</head>
<body>
<div>
<table>
<tr>
<td>
<img src="img/left1.jpg" id="note1" />
<img src="img/left2.jpg" id="note2" onmouseover="showNote()" />
</td>
<td>
<img src="img/right1.jpg" id="phone1" onmousemove="showNote2()" />
<img src="img/right2.jpg" id="phone2" />
</td>
</tr>
<tr>
<td colspan="2">
<img src="img/end1.jpg" id="note" />
<img src="img/end2.jpg" id="phone" />
</td>
</tr>
</table>
</div>
</body>
</html>
实现效果:
题四:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子产品</title>
<script>
function checkall(){
var p=document.getElementsByName("product");
for(var i=0;i<p.length;i++){
if(document.getElementById("check1").checked==true){
p[i].checked=true;
}else{
p[i].checked=false;
}
}
}
</script>
</head>
<body>
<div>
<form>
<table>
<tr>
<td colspan="4"><img src="img/list_bg.gif" /></td>
<!--<td></td>-->
<!--<td></td>-->
<!--<td></td>-->
</tr>
<tr>
<th>
<input type="checkbox" id="check1" onclick="checkall()" />全选
</th>
<th>商品图片</th>
<th>商品名称/出售者/联系方式</th>
<th>价格</th>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" id="check" name="product" /></td>
<td><img src="img/list1.jpg" /></td>
<td style="font-size:x-small;">杜比环绕,家庭影院必备,超真实享受<br />出售者:ling112233<br /><img src="img/contactme.gif" /><img src="img/addfav.gif" />收藏</td>
<td style="font-size: x-small;">一口价:<br />2833.0</td>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" id="check" name="product" /></td>
<td><img src="img/list2.jpg" /></td>
<td style="font-size:x-small;">NVDIA 9999GT 512MB 256bit极品显卡,不容错过<br />出售者:aipiaopiao110<br /><img src="img/contactme.gif" /><img src="img/addfav.gif" />收藏</td>
<td style="font-size: x-small;">一口价:<br />2460.0</td>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" id="check" name="product" /></td>
<td><img src="img/list3.jpg" /></td>
<td style="font-size:x-small;">精品热卖:高清晰,30cun等离子电视<br />出售者:阳光的挣扎<br /><img src="img/contactme.gif" /><img src="img/addfav.gif" />收藏</td>
<td style="font-size: x-small;">一口价:<br />18880</td>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" id="check" name="product" /></td>
<td><img src="img/list4.jpg" /></td>
<td style="font-size:x-small;">Sony索尼家用最新款笔记本<br />出售者:疯狂的镜无<br /><img src="img/contactme.gif" /><img src="img/addfav.gif" />收藏</td>
<td style="font-size: x-small;">一口价:<br />5889.0</td>
</tr>
<tr style="font-size: x-small;">
<td colspan="4" align="center">友情链接:百度|Google|雅虎|淘宝|拍拍|易趣|当当|京东商城|迅雷|新浪|搜狐|网易|猫扑|开心网|新华网|凤凰网</p></td>
<!--<td></td>-->
<!--<td></td>-->
<!--<td></td>-->
</tr>
</table>
</form>
</div>
</body>
</html>
实现效果:
题五:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作表格</title>
<script>
function addrow(){
var row4=document.getElementById("row4");
//创建行结点
var row=document.createElement("tr");
//创建单元格
var cell1=document.createElement("td");
var cell2=document.createElement("td");
cell1.innerHTML="60个瞬间";
cell2.innerHTML="¥32.00";
row.appendChild(cell1);
row.appendChild(cell2);
document.getElementById("row4").parentNode.appendChild(row);
}
function deleterow2(){
var dNode=document.getElementById("row2");
dNode.parentNode.removeChild(dNode);
}
function modify(){
var row1=document.getElementById("row1");
row1.setAttribute("style","font-size: 25px; background-color: cornflowerblue;");
}
function copyRow(){
var row4=document.getElementById("row4");
var new1=row4.cloneNode(true);
document.getElementById("t1").appendChild(new1);
}
</script>
</head>
<body>
<div>
<table border="1" id="t1">
<tr id="row1">
<td>书名</td>
<td style="text-align: center;">价格</td>
</tr>
<tr>
<td>看得见风景的房间</td>
<td style="text-align: center;">¥30.00</td>
</tr>
<tr id="row2">
<td>幸福从天而降</td>
<td style="text-align: center;">¥18.50</td>
</tr>
<tr>
<td>幸福从天而降</td>
<td style="text-align: center;">¥18.50</td>
</tr>
<tr id="row4">
<td>60个瞬间</td>
<td style="text-align: center;">¥32.00</td>
</tr>
</table>
</div>
<input type="button" value="增加一行" onclick="addrow()" />
<input type="button" value="删除第二行" onclick="deleterow2()" />
<input type="button" value="修改标题样式" onclick="modify()" />
<input type="button" value="复制最后一行" onclick="copyRow()" />
</body>
</html>
实现效果:
以上代码均为个人所写,如有错误,欢迎指正,谢谢~