做一个简单的网页。
在做的过程中遇到的问题：
1、框架问题（刚开始打算写在一个html文件里，但是没处理好布局问题，之后分成了五个页面，使用frameset进行划分）
2、图像截取问题（写之前对这个方法不太熟练，在写的过程中在网上查阅解决方法）
3、表格间距问题（最左列的表格，我想将行间距增大，使用border-spacing，但一直没有变化，于是就没有调整）
这是原图：
这是代码：
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>食全食美——特产 茶 保健品 酒 咖啡烘培</title>
</head>
<frameset rows="10%,*" frameborder="0">
<frame src="3.1.html" name="topframe" scrolling="no" noresize="noresize" />
<frameset cols="25%,*,26.5%">
<frame src="3.2.html" name="leftframe" scrolling="no" noresize="noresize" />
<frame src="3.3.html" name="centerframe" scrolling="no" noresize="noresize" />
<frame src="3.4.html" name="rightframe" scrolling="no" noresize="noresize" />
</frameset>
</frameset>
</html>3.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top</title>
<style type="text/css">
.col{
background-color: rgb(243,173,53);
border-radius: 5px;
width: max-content;
border: gray 5px;
margin: 0px auto;
line-height: 20px;
}
.ziti{
font: bold 18px 宋体;
text-align: center;
}
</style>
</head>
<body>
<table class="col">
<tr class="ziti">
<td>首 页</td>
<td> </td>
<td>家用电器</td>
<td> </td>
<td>手机数码</td>
<td> </td>
<td>日用百货</td>
<td> </td>
<td>书 籍</td>
<td> </td>
<td>帮助中心</td>
<td> </td>
<td>免费开店</td>
<td> </td>
<td>全球咨询</td>
<td> </td>
<td>
<form method="post" action="">
<p>
<input type="search" name="search" value=" " size="20"/>
<input type="submit" name="submit" value="搜索" style="background-color: yellow;border-radius: 5px">
</p>
</form>
</td>
</tr>
</table>
</body>
</html>3.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left</title>
<style type="text/css">
.ziti1{
font: bold 18px 宋体;
text-align: left;
color: rgb(250,118,9);
}
.col1{
background-color: rgb(239,239,239);
width: 250px;
height: max-content;
}
.col2{
background-color: white;
font-size: 14px;
text-align: center;
}
.shop{
width: 250px;
height: 43px;
background-size: 1225px 798px;
background-image: url("images/bg.gif");
background-position: 0px -1px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="shop" style="margin-left: 100px"></div>
<div style="margin-left: 100px;">
<table class="col1" rules="none">
<tr>
<td colspan="3" class="ziti1">家用电器</td>
</tr>
<tr class="col2">
<td>大家电</td>
<td>洗衣机</td>
<td>平板电视</td>
</tr>
<tr class="col2">
<td>电热水器</td>
<td>家庭音响</td>
<td>热水器</td>
</tr>
<tr class="col2">
<td>空调冰箱</td>
<td>冰柜</td>
<td>DVD</td>
</tr>
<tr class="col2">
<td>电视附件</td>
<td>电燃气</td>
<td>家电下乡</td>
</tr>
<tr class="col2">
<td>家电服务</td>
<td>电饭煲</td>
<td>摄像机</td>
</tr>
<tr>
<td colspan="3" class="ziti1">书籍</td>
</tr>
<tr class="col2">
<td>大家电</td>
<td>洗衣机</td>
<td>平板电视</td>
</tr>
<tr class="col2">
<td>电热水器</td>
<td>家庭音响</td>
<td>热水器</td>
</tr>
<tr class="col2">
<td>空调冰箱</td>
<td>冰柜</td>
<td>DVD</td>
</tr>
<tr class="col2">
<td>电视附件</td>
<td>电燃气</td>
<td>家电下乡</td>
</tr>
<tr class="col2">
<td>家电服务</td>
<td>电饭煲</td>
<td>摄像机</td>
</tr>
<tr>
<td colspan="3" class="ziti1">手机数码</td>
</tr>
<tr class="col2">
<td>大家电</td>
<td>洗衣机</td>
<td>平板电视</td>
</tr>
<tr class="col2">
<td>电热水器</td>
<td>家庭音响</td>
<td>热水器</td>
</tr>
<tr class="col2">
<td>空调冰箱</td>
<td>冰柜</td>
<td>DVD</td>
</tr>
<tr class="col2">
<td>电视附件</td>
<td>电燃气</td>
<td>家电下乡</td>
</tr>
<tr class="col2">
<td>家电服务</td>
<td>电饭煲</td>
<td>摄像机</td>
</tr>
<tr>
<td colspan="3" class="ziti1">日用百货</td>
</tr>
<tr class="col2">
<td>大家电</td>
<td>洗衣机</td>
<td>平板电视</td>
</tr>
<tr class="col2">
<td>电热水器</td>
<td>家庭音响</td>
<td>热水器</td>
</tr>
<tr class="col2">
<td>空调冰箱</td>
<td>冰柜</td>
<td>DVD</td>
</tr>
<tr class="col2">
<td>电视附件</td>
<td>电燃气</td>
<td>家电下乡</td>
</tr>
<tr class="col2">
<td>家电服务</td>
<td>电饭煲</td>
<td>摄像机</td>
</tr>
</table>
</div>
</body>
</html>3.3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>center</title>
<style type="text/css">
.buy{
width: 654px;
height: 34px;
background-size: 1225px 798px;
background-image: url("images/bg.gif");
background-position: -270px -250px;
background-repeat: no-repeat;
}
.cen{
font-size: 12px;
width: 650px;
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="images/ad-03.jpg" width="650" height="190"/>
</div>
<div class="buy"> </div>
<table class="cen">
<tr>
<td><img src="images/promote-1.jpg" border="1" /></td>
<td><img src="images/promote-2.jpg" border="1"/></td>
<td><img src="images/promote-3.jpg" border="1"/></td>
</tr>
<tr>
<td>惠普商务移动应用英寸笔记本</td>
<td>夏新N6 GPS真人语音导航手机 超低特价疯抢 数量有限！</td>
<td>三星家庭影院 HT-TZ325 购机送好礼（超值性价比）</td>
</tr>
<tr>
<td><img src="images/laser-pen.jpg" border="1"/></td>
<td><img src="images/mouse.jpg" border="1"/></td>
<td><img src="images/earphone.jpg" border="1"/></td>
</tr>
<tr>
<td>明基MP512投影机 2899元 送100元京券 SVGA 2200流明</td>
<td>罗技数据1TB移动鼠标729元开抢了！</td>
<td>海森那尔极品耳机绝对不容错过！</td>
</tr>
<tr>
<td><img src="images/Wancom.jpg" border="1"/></td>
<td><img src="images/Frame.jpg" border="1"/></td>
<td><img src="images/notebook.jpg" border="1"/></td>
</tr>
<tr>
<td>亚马逊随时阅读，随时记录，时尚最佳选择！</td>
<td>优雅相框</td>
<td>IBM 2009最新上网本，特色尽显</td>
</tr>
</table>
</body>
</html>3.4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>right</title>
<style type="text/css">
.discount{
width: 292px;
height: 245px;
background-size: 1225px 798px;
background-image: url("images/bg.gif");
background-position: -935px -530px;
background-repeat: no-repeat;
}
.gonggao{
width: 292px;
height: 160px;
background-size: 1225px 798px;
background-image: url("images/bg.gif");
background-position: -935px -10px;
background-repeat: no-repeat;
}
.clarify{
width: 292px;
height: 41px;
background-size: 1225px 798px;
background-image: url("images/bg.gif");
background-position: -935px -173px;
background-repeat: no-repeat;
}
.ziti2{
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<div class="gonggao"> </div>
<div class="clarify"> </div>
<table class="ziti2">
<tr>
<td><img src="images/show1.jpg" border="1" width="55" height="40"/></td>
<td>大品牌降价，三折直送</td>
</tr>
<tr>
<td><img src="images/show2.jpg" border="1" width="55" height="40"/></td>
<td>大学要求老师开网店</td>
</tr>
<tr>
<td><img src="images/show5_big.jpg" border="1" width="55" height="40"/></td>
<td>黑眼圈推荐，美白不停</td>
</tr>
<tr>
<td><img src="images/show4.jpg" border="1" width="55" height="40"/></td>
<td>瘦身狂潮风，修形之选</td>
</tr>
</table>
<div class="discount"> </div>
</body>
</html>这是运行结果：
这是用到的材料：
花了几个小时做一个简单的网页，虽然大体相像，但是好多细节部分还是需要修改，等之后了解了怎么处理一些细节的问题，再回来修改。
扫一扫
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
