<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页面</title>
<style type="text/css">
body{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
</body> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鲜花详情页面</title>
<style type="text/css">
body{
font-size:12px;
line-height:20px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
p{font-size:14px;
font-weight:bold;
}
</style>
</head>
<body>
<img src="images/flow.jpg" />
<p style="text-align:right;"><a href="javascript:history.back()">返回主页面</a></p>
<p>服务提示：</p>非节日期间，可指定时间段送达；并且允许指定送达收货人的最快时间为两小时；节日期间，只保证当日送达。<br />
配送范围：<br />
鲜花配送范围：北京、上海、深圳、天津、广州、重庆等各大中城市。<br />
蛋糕、果篮配送范围：全国大中城市。<br />
绿植配送范围：仅限于直辖市，省会城市市区。<br />
更多详细的配送区域与相应配送费率请点击这里！<br />
配送方式：<br />
专业鲜花、蛋糕礼品速递机构，送货上门。 <br />
服务时间：<br />
全年365天，节假日不休息，24小时接单； 每日送花时间：8:00-20：00。<br />
其它时间送花酌情加收10-30服务费用。 <br />
替换原则：<br />由于地域或季节的限制，需要更换主花材时，我们将电话向订货人提出更换建议，假如在有效配送时间内得不到订货人的确认，我们将采用同等价值或相同寓意的花材代替。实际送花以图片为参考，以商品规格文字说明为主。鲜花为手工做品，实际花束可能会与图示有些出入，但我们保证鲜花的主花材品种、新鲜程度、数量、颜色与说明一致。<br />
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>显示和隐藏图片</title>
<script type="text/javascript">
function hidden_b2(){
document.getElementById("b2").style.visibility="hidden";
}
function none_b2(){
document.getElementById("b2").style.display="none";
}
</script>
</head>
<body>
<img src="images/book1.jpg" alt="book1" id="b1" />
<img src="images/book2.jpg" alt="book2" id="b2" />
<img src="images/book3.jpg" alt="book3" id="b3" /><br />
<input name="btn1" type="button" value="visibility隐藏图b2" onclick="hidden_b2()" />
<input name="btn2" type="button" value="display隐藏图b2" onclick="none_b2()" />
</body> 
7.5 制作简单的树形菜单
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作简单的树形菜单</title>
<style type="text/css">
body{font-size:13px;
line-height:20px;
}
a{font-size: 13px;
color: #000000;
text-decoration: none;
}
a:hover{font-size:13px;
color: #ff0000;
}
img {
vertical-align: middle;
border:0;
}
.no_circle{list-style-type:none; /*设置列表项标志的类型为无*/
display:none;
}
</style>
<script type="text/javascript">
function show(){
if(document.getElementById("art").style.display=='block'){
document.getElementById("art").style.display='none'; //触动的ul如果处于显示状态，即隐藏
}
else{
document.getElementById("art").style.display='block'; //触动的ul如果处于隐藏状态，即显示
}
}
</script>
</head>
<body>
<b><img src="images/fold.gif">树形菜单：</b>
<ul><a href="javascript:onclick=show() "><img src="images/fclose.gif">文学艺术</a></ul>
<ul id="art" class="no_circle">
<li><img src="images/doc.gif" >先锋写作</li>
<li> <img src="images/doc.gif" >小说散文</li>
<li><img src="images/doc.gif" >诗风词韵</li>
</ul>
</body>运行结果：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TAB切换</title>
<style type="text/css">
.div_bg{
background-image:url(images/index-rightbg.jpg);
background-repeat:no-repeat;
width:302px;
height:290px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
td{font-size:14px;line-height:20px;color: #414141;}
.white{font-size:14px;
color:#FFFFFF;
padding-top:5px;
cursor:pointer;
}
.white:hover{font-size:14px;
color:#FFFFFF;
padding-top:5px;
cursor:pointer;
}
a {
color: #06329b;text-decoration: none;line-height:24px;
}
a:hover {
color: #cc0000;text-decoration: none;line-height:24px;
}
.bg{background-image:url(images/right-menu1.gif);
background-repeat:no-repeat;
height:40px;
width:95px;
text-align:center;}
.nobg{background-image:url(images/right-menu2.gif);
background-repeat:no-repeat;
height:40px;
width:95px;
text-align:center;}
</style>
</head>
<body><div class="div_bg"><table width="290" border="0" cellspacing="0" cellpadding="0" style=" margin:0px auto 0px auto;">
<tr>
<td style="height:35px;" colspan="5"></td>
</tr>
<tr>
<td id="bg1"><a class="white" onMouseOver="chgtt(1);">小说</a></td>
<td style="width:1px;"></td>
<td id="bg2"><a class="white" onMouseOver="chgtt(2);">非小说</a></td>
<td style="width:1px;"></td>
<td id="bg3"><a class="white" onMouseOver="chgtt(3);">少儿</a></td>
</tr>
<tr>
<td colspan="5" style="padding-top:10px; padding-left:5px; text-align:left;"><div id="book1" style="display:block;"><a
href="product.aspx?product_id=9292071"
target=_blank>1.时间旅行者的妻子</a><br><a
href="product.aspx?product_id=9301784"
target=_blank>2.女心理师（下）</a><br><a
href="product.aspx?product_id=9213024"
target=_blank>3.鬼吹灯之精绝古城</a><br><a
href="product.aspx?product_id=9272710"
target=_blank>4.女心理师（上）</a><br><a
href="product.aspx?product_id=9304960"
target=_blank>5.小时候</a><br><a
href="product.aspx?product_id=9174964"
target=_blank>6.追风筝的人</a><br><a
href="product.aspx?product_id=9288517"
target=_blank>7.盗墓笔记2</a><br><a
href="product.aspx?product_id=9189377"
target=_blank>8.输赢</a>
</div>
<div id="book2" style="display:none;"><a
href="product.aspx?product_id=8960640" target=_blank>1.你在为谁工作,人生若只如初见</a><br><a
href="product.aspx?product_id=9253577" target=_blank>2.高效能人士的七个..</a><br><a
href="product.aspx?product_id=9258919"
target=_blank>3.求医不如求己</a><br><a
href="product.aspx?product_id=9057812"
target=_blank>4.人体使用手册</a><br><a
href="product.aspx?product_id=8891083"
target=_blank>5.孩子，把你的手给我</a><br><a
href="product.aspx?product_id=9240993"
target=_blank>6.别笑！我是英文单词书</a><br><a
href="product.aspx?product_id=9265395"
target=_blank>7.人体经络使用手册</a><br><a
href="product.aspx?product_id=9277013"
target=_blank>8.股市稳赚</a>
</div>
<div id="book3" style="display:none;"><a
href="product.aspx?product_id=9284655"
target=_blank>1.斯凯瑞金色童书·..神奇校车1（全10册）</a><br><a
href="product.aspx?product_id=9036740"
target=_blank>2.哈利·波特与“混..</a><br><a
href="product.aspx?product_id=9213954"
target=_blank>3.不一样的卡梅拉（..</a><br><a
href="product.aspx?product_id=9187891"
target=_blank>4.它们是怎么来的</a><br><a
href="product.aspx?product_id=8688091"
target=_blank>5.五·三班的坏小子..</a><br><a
href="product.aspx?product_id=482002"
target=_blank>6.男生日记</a><br><a
href="product.aspx?product_id=142600"
target=_blank>7.哈利·波特与魔法石</a><br><a
href="product.aspx?product_id=9033155"
target=_blank>8.噼里啪啦丛书(全7册)</a>
</div></td>
</tr>
</table>
<script type="text/javascript">
//设当前显示层
function chgtt(d1) {
var NowFrame;
if(Number(d1)) {
NowFrame=d1;
}
else
{
NowFrame=1;
}
for(var i=1;i<=3;i++){
if(i==NowFrame) {
document.getElementById("book"+NowFrame).style.display ="block"; //当前层
document.getElementById("bg"+NowFrame).className="bg";
}
else
{
document.getElementById("book"+i).style.display ="none"; //隐藏其他层
document.getElementById("bg"+i).className="nobg";
}
}
}
window.onLoad=chgtt() ;
</script>
</div>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>全选效果</title>
<style type="text/css">
.bg{
background-image: url(images/list_bg.gif);
background-repeat: no-repeat;
width: 730px;
}
td{text-align:center;
font-size:13px;
line-height:25px;
}
body{margin:0}
</style>
<script type="text/JavaScript">
function check(){
var oInput=document.getElementsByName("product");
for (var i=0;i<oInput.length;i++){
if (document.getElementById("all").checked==true){
oInput[i].checked=true;
}else{
oInput[i].checked=false;
}
}
}
</script>
</head>
<body><table border="0" cellspacing="0" cellpadding="0" class="bg">
<tr>
<td style="height:40px;"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr style="font-weight:bold;">
<td><input id="all" type="checkbox" value="全选" onclick="check();" />全选</td>
<td>商品图片</td>
<td>商品名称/出售者/联系方式</td>
<td>价格</td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="1" /></td>
<td><img src="images/list0.jpg" alt="alt" /></td>
<td>杜比环绕，家庭影院必备，超真实享受<br />
出售者：ling112233<br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
2833.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="2" /></td>
<td><img src="images/list1.jpg" alt="alt" /></td>
<td>NVDIA 9999GT 512MB 256bit极品显卡，不容错过<br />
出售者：aipiaopiao110 <br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
6464.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="3" /></td>
<td><img src="images/list2.jpg" alt="alt" /></td>
<td>精品热卖：高清晰，30寸等离子电视<br />
出售者：阳光的挣扎 <br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
18888.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="4" /></td>
<td><img src="images/list3.jpg" alt="alt" /></td>
<td>Sony索尼家用最新款笔记本 <br />
出售者：疯狂的镜无<br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
5889.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
</table>
</body>
782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
