实现页面：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贵美商城</title>
<style type="text/css">
.div{
width: 1000px;
text-align: center;
}
</style>
</head>
<div class="div">
<frameset rows="170px,*" border="0">
<frame src="subframe/top.html" noresize="noresize"/>
<frameset cols="30%,*" border="0">
<frame src="subframe/left.html" noresize="noresize"/>
<frame src="subframe/right.html" name="rightframe" noresize="noresize" />
</frameset>
</frameset>
<noframes>
对不起，您的浏览器暂不支持显示该页面，请换个浏览器再看....
</noframes>
</div>
</html>
top：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
list-style: none;
float: left;
font-size: 14px;
text-align: center;
line-height: 22px;
}
.help{
background-image: url(../img/icon.gif);
background-repeat: no-repeat;
background-position: -115px 0px;
width: 28px;
height: 20px;
}
.car{
background-image: url(../img/icon.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 28px;
height: 20px;
}
.login{
background-image: url(../img/icon.gif);
background-repeat: no-repeat;
background-position: 0px -20px;
width: 46px;
height: 22px;
}
.top1{
text-align: right;
font-size: x-small;
}
.top2{
text-align: center;
font-size: x-small;
color: darkolivegreen;
}
.top3{
font-weight: bold;
}
#table{
background-repeat: no-repeat;
}
ul{
float: right;
}
</style>
</head>
<body>
<div>
<form action="../index.html" method="post">
<table width="1000" background="../img/h_bg.jpg" height="150px" style="background-repeat: no-repeat;" align="center">
<tr height="50px">
<td class="top1">
<ul>
<li class="car"> </li>
<li>购物车</li>
<li class="help"> </li>
<li>帮助中心</li>
<li class="help"> </li>
<li>加入收藏</li>
<li class="help"> </li>
<li>设为首页</li>
<li class="login">登陆</li>
<li class="login">注册</li>
</ul>
</td>
</tr>
<tr>
<td class="top2">你好，欢迎访问贵美商城！2009年9月18日13点46分</td>
</tr>
<tr>
<td>
首 页 家用电器 手机数码 日用百货 书 籍 帮助中心
免费开店 全球咨询
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
left：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航页面</title>
<style>
.left{
line-height: 1px;
}
</style>
</head>
<body>
<div>
<form action="register.html" method="post">
<table background="../img/customer.jpg" height="500" align="right">
<tr>
<td><br /></td>
</tr>
<tr>
<td><br /></td>
</tr>
<tr>
<td><br /></td>
</tr>
<tr>
<td><br /></td>
</tr>
<tr class="left">
<td>
<a href="register.html" target="rightframe"><img src="../img/reg.jpg" /></a>
</td>
</tr>
<tr class="left">
<td><a href="register.html" target="rightframe"><img src="../img/buy.jpg" /></a></td>
</tr>
<tr class="left">
<td><a href="register.html" target="rightframe"><img src="../img/sale.jpg" /></a></td>
</tr>
<tr>
<td><br /></td>
</tr>
<tr>
<td><a href="register.html" target="rightframe"><img src="../img/person.jpg" /></a></td>
</tr>
<tr>
<td><br /></td>
</tr>
<tr>
<td><br /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
right：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知识堂首页</title>
<style>
li{
list-style: none;
line-height: 50px;
}
.right1{
font-size:x-large;
font-weight: bold;
font-family: 隶书;
}
.right2{
font-size: larger;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<ul>
<li class="right1">知识堂首页 >>商家帮助</li>
<li><img src="../img/reg_line.jpg" /></li>
<li>享受贵美网免费上网购物乐趣，您需要您需要了解贵美被的网上安全交易流程和网上购物的4步曲：</li>
<li class="right2">网上安全交易流程如下：</li>
<li><img src="../img/buy_sep1.jpg" /></li>
<li class="right2">客户交易演示4部曲：</li>
<li><img src="../img/buy_sep2.jpg" /></li>
</ul>
</div>
</body>
</html>
实现效果：
实现页面：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="42%,*">
<frame src="subframe/top1.html" name="top" scrolling="no" noresize="noresize"/>
<frame src="subframe/end01.html" name="end" scrolling="no" noresize="noresize"/>
</frameset>
</html>
top：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
td{
text-align: center;
}
</style>
</head>
<body>
<!--<p>第一章 天下大势 | 第二章 合久必分 | </p>-->
<div>
<form>
<table width="100%">
<tr>
<td><img src="../img/google.png" /><td>
</tr>
<tr>
<td><input type="text" size="40" name="txt" /><span style="font-size: small; color: blue;">高级设置</span></td>
</tr>
<tr>
<td>
<input type="submit" name="search" value="google搜索"/>
<input type="submit" name="good" value="手气不错"/>
<!--<span style="font-size: small; color: blue;">语言</span>-->
</td>
</tr>
<tr>
<td><a href="end01.html" target="end">第一章 天下大势 </a>|
<a href="end02.html" target="end">第二章 合久必分 </a>|
<a href="end03.html" target="end">第三章 分久必合 </a>|</td>
</tr>
</table>
</form>
</div>
</body>
</html>
right：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知识堂首页</title>
<style>
li{
list-style: none;
line-height: 50px;
}
.right1{
font-size:x-large;
font-weight: bold;
font-family: 隶书;
}
.right2{
font-size: larger;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<ul>
<li class="right1">知识堂首页 >>商家帮助</li>
<li><img src="../img/reg_line.jpg" /></li>
<li>享受贵美网免费上网购物乐趣，您需要您需要了解贵美被的网上安全交易流程和网上购物的4步曲：</li>
<li class="right2">网上安全交易流程如下：</li>
<li><img src="../img/buy_sep1.jpg" /></li>
<li class="right2">客户交易演示4部曲：</li>
<li><img src="../img/buy_sep2.jpg" /></li>
</ul>
</div>
</body>
</html>
实现效果：
实现页面：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会员登录页面</title>
</head>
<body>
<form action="index.html" method="post">
<table align="center" border="1" bordercolor="green" background="img/login_bg.gif">
<tr>
<td>
<img src="img/huiyuandenglu.png" />
<p style="text-align: left;" align="left" >
会员名：
<input type="text" size="20" />
(可包含a-z，0-9和下划线) <br />
密 码：
<input type="password" size="20" />
(至少包含6个字符)
</p>
<p style="text-align: center;" align="center">
<img src="img/登录.png" />
</p>
<ul style="font-size: small;">
<li><span style="color: blue;">什么是安全登录</span>。</li>
<li>香港会员（繁体中文用户）由此<span style="color: blue;">登入</span></li>
<li><span style="color: blue;">密码安全贴士</span></li>
<li>防止病毒或者木马窃取您的账户信息，<span style="color: blue;">在线检查</span>您的电脑是否安全。</li>
</ul>
</td>
<td>
<img src="img/zhuxehuiyuan.png" align="left" /> <br />
<p style="font-size: small;">
<img src="img/a.png" />
<span style="color: blue;">便宜有好货！</span>超过7000晚间商品任您选。 <br />
<img src="img/b.png" />
<span style="color: blue;">买卖更安全！</span>交易超安全。 <br />
<img src="img/c.png" />
<span style="color: blue;">免费开网店！</span>轻松赚钱交友。 <br />
<img src="img/d.png" />
<span style="color: blue;">超人气社区！</span>精彩活动每一天。 <br />
</p>
<p style="text-align: center;" align="center">
<a href="zhuce.html" target="_blank" /><img src="img/quzhuce.png" />
</p>
<table border="0" width="200px" height="60px" style="background-color: orange;text-align: center;" align="center">
<tr>
<td style="font-size: small;">
<span style="background-color: white;"><img src="img/biaoqian1.png" height="15" width="15"/>
您已经是会员？由此进入</span> <br /><br />
<span style="background-color: white;"><img src="img/biaoqian2.png" height="15" width="15" />
繁体中文用户由此<span style="color: blue;">注册</span></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p style="font-size: smaller;" align="center">友情链接：百度|Google|雅虎|淘宝|拍拍|易趣|当当|京东商城|迅雷|新浪|搜狐|网易|猫扑|开心网|新华网|凤凰网</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<form>
<table background="img/reg_bg.gif" align="center">
<tr>
<td colspan="2">
<br />
</td>
</tr>
<tr>
<td style="text-align: right;">名字：</td>
<td><input type="text" name="username" size="20" /></td>
</tr>
<tr>
<td style="text-align: right;">姓氏：</td>
<td><input type="text" name="familyname" size="20" /></td>
</tr>
<tr>
<td style="text-align: right;">登录名：</td>
<td><input type="text" name="loginname" size="20" />（可包含a-z，0-9和下划线）</td>
</tr>
<tr>
<td style="text-align: right;">密码：</td>
<td><input type="password" name="pwd" size="20" />（至少包含6个字符）</td>
</tr>
<tr>
<td colspan="2">
<br />
</td>
</tr>
<tr>
<td colspan="2">
<br />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
实现效果：
实现页面：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style>
li{
font-size: 12px;
}
.title{
font-size: 14px;
color: #ff7300;
font-weight: bold;
}
#div{
width: 200px;
background:#ccc;
}
</style>
</head>
<body>
<div id="div">
<ul>
<li class="title">家用电器</li>
<li>大家电</li>
<li>洗衣机</li>
<li>电冰箱</li>
<li>平板电视</li>
<li class="title">日用百货</li>
<li>肥皂</li>
<li>洗衣粉</li>
<li>纸巾</li>
<li>洗发水</li>
</ul>
</div>
</body>
</html>
实现效果：
实现页面：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
font-size: 12px;
list-style: none;
float: left;
line-height: 20px;
}
.title{
text-decoration: underline;
letter-spacing: 5px;
white-space: nowrap;
}
.tabl{
background-image: url(img/fenlei.png);
background-repeat: no-repeat;
height: 400px;
}
.smalltitle{
font-size: 14px;
color: #ff7300;
font-weight: bold;
text-align: left;
}
</style>
</head>
<body>
<div class="title">你好，欢迎访问贵美商城！</div>
<div class="tabl">
<ul style="height: 15px;"></ul>
<ul></ul>
<ul>
<li class="smalltitle">家用电器</li><br /><br />
<li>大家电 </li>
<li>洗衣机 </li>
<li>电冰箱</li><br />
<li>相机 </li>
<li>电视 </li>
<li>DVD</li><br />
<li>相机 </li>
<li>电视 </li>
<li>DVD</li><br /><br />
<li class="smalltitle">日用百货</li><br />
<li>肥皂 </li>
<li>洗衣粉 </li>
<li>纸巾</li><br />
<li>洗发水 </li>
<li>洗洁精 </li>
<li>毛巾</li><br />
<li>相机 </li>
<li>电视 </li>
<li>DVD</li>
</ul>
</div>
</body>
</html>
实现效果：
实现页面：
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.top{
background-image:url(img/picture1.png);
background-repeat: no-repeat;
background-position:0px 0px ;
width: 400px;
height: 60px;
font-size: 40px;
color: sandybrown;
}
.mid{
background-image: url(img/picture1.png);
background-repeat: no-repeat;
background-position:0px -60px ;
width: 400px;
height: 30px;
font-size: 25px;
}
.end{
background-image: url(img/picture1.png);
background-repeat: no-repeat;
background-position:0px -80px ;
width: 400px;
height: 40px;
}
</style>
</head>
<body>
<div>
<form>
<table>
<tr style="text-align: center;">
<td class="top">商品分类</td>
</tr>
<tr style="text-align: center;">
<td class="mid">分类名1</td>
</tr>
<tr style="text-align: center;">
<td class="mid">分类名2</td>
</tr>
<tr style="text-align: center;">
<td class="mid">分类名3</td>
</tr>
<tr style="text-align: center;">
<td class="mid">分类名4</td>
</tr>
<tr >
<td class="end"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
实现效果：
以上均为个人所写，如有错误，欢迎指正，谢谢！
2061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
