html制作完成后底部有大量的空白区域怎么解决

weixin_44522223 2019-03-06 12:13:14
html制作完成后底部有大量的空白区域怎么解决,改变给定的宽度就没有要的效果，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
width: 100%;
height: 100%;
margin: 0;
background-image: url(bj.png);
overflow-x: hidden;
}
.zt {
width: 1005px;
height: 1080px;
position: relative;top:0px;
position: relative;left:448px;
border: 5px solid #cded9a;/*有边框*/


}
.logol {
width: 1005px;
height: 50px;
background-color: #EEE;
text-align: center;
border: 1px solid #00a251;
position: relative;left:-4px;
position: relative;top:-3px;
}
.logo {
float: left;
}
.but {
float: right;
width: 229px;
position: relative;left:-50px;
position: relative;top:12px;
border: 2px solid #018b32;
}
.butt {
float: right;
border: 2px solid #018b32;
position: relative;left:219px;
position: relative;top:12px;
background-color: #00a73c;
}
.zdl {
background-color: #ffffff;
width: 1002px;
height: 26px;
color: #626262;
line-height: 26px;
float: left;
}
.a1 {
color: #ffffff;
background-color:#fc7002;
border:0px;
width: 56px;
border-radius:0.2em;
}
.a2 {
color: #ffffff;
background-color:#b81b20;
border:0px;
width: 56px;
border-radius:0.2em;
}
.a3 {
color: ##0b3dac;;
background-color:#cde0f7;
border:0px;
width: 56px;
border-radius:0.2em;
}
.top {
padding: 0 0 0 0;
position: relative;top:-8px;
position: relative;left:-2px;
}
.logo {
position: relative;top:0px;
position: relative;left:-2px;
}
.bt {
width: 1003px;
height: 40px;
background-color: #bbdd86;
font-size: 14px;
position: relative;top:468px;
position: relative;left:-2px;
}
.aa2 {
color:rgb(255, 255, 255);
font-size: 16px;
text-align: center;
font-family: 微软雅黑;
line-height: 40px;
font-weight: 700;
background: none;
padding: 9px 60px;
text-decoration: none;
position: relative;top:-26px;

}
.aa2:hover {

color: #ffffff;
background:#cded9a;
padding:7px;
}
.gsjj {
width: 1003px;
position: relative;top:468px;
position: relative;left:-3px;
}
.shang {
width: 1003px;
position: relative;top:317px;
position: relative;left:0px;
}
.kuang_zhong {
width: 1003px;
position: relative;top:311px;
position: relative;left:0px;
}
.kuang_xia {
width: 1003px;
position: relative;top:0px;
position: relative;left:0px;
}
.kuang_zhong1 {
width: 1003px;
position: relative;top:306px;
position: relative;left:0px;
}
.kuang_zhong2 {
width: 1003px;
position: relative;top:302px;
position: relative;left:0px;
}
.kuang_xia {
width: 1003px;
position: relative;top:298px;
position: relative;left:0px;
}
.cwz {
font-size: 14px;
position: relative;top:283px;
position: relative;left:27px;
}
.bbk {

position: relative;top:143px;
position: relative;left:-1px;
}
.ts {
width: 1003px;
height: 1306px;
background-color: #ffffff;
position: relative;top:293px;/*有边框*/
position: relative;left:-3px;
border: 5px solid #cded9a;
overflow-x: hidden;
}
.jfxl {
position: relative;top:0px;
position: relative;left:0px;
}
.cpbk {
position: relative;top:-332px;
position: relative;left:0px;
}
.kuang_xia1 {
width: 1003px;
position: relative;top:296px;
position: relative;left:0px;
}
.kuang_zhong3 {
width: 1003px;
height: 330px;
position: relative;top:302px;
position: relative;left:0px;
}
.cpbg {
border:0.2px solid #b6b6b5;
position: relative;top:-918px;
position: relative;left:30px;
}
.cpt {
border-bottom: 0.2px solid #b6b6b5;


height: 275px;
}
.zxrj {
width: 260px;
height: 210px;
position: relative;top:4px;
position: relative;left:14px;
}
.rs {
text-decoration:none;
color:#cc0000;

}
.gg {
width: 65px;
border: 0.1px solid #b6b6b5;
position: relative;top:-1283px;
position: relative;left:30px;
}
.gg1 {
width: 234px;
border: 0.05px solid #b6b6b5;
position: relative;top:-1304px;
position: relative;left:95px;
}
.cpbg1 {
border: 0.05px solid #b6b6b5;
position: relative;top:-168px;
position: relative;left:30px;
}
.ltp1 {
position: relative;top:0px;
position: relative;left:12px;
}
.dbg1 {
width: 147px;
height: 50px;
border: 0.05px solid #b6b6b5;
position: relative;top:-1114px;
position: relative;left:0px;
}
.dbg2 {
width: 147px;
height: 50px;
border: 0.05px solid #b6b6b5;
position: relative;top:-1114px;
position: relative;left:0px;
}
.dlcp {
position: relative;top:0px;
position: relative;left:10px;
}
.dbg3 {
position: relative;top:-191px;
position: relative;left:29px;
}
.lmgp {
position: relative;top:-1026px;
position: relative;left:-1px;
}
.shang1 {
width: 1003px;
position: relative;top:-527px;
position: relative;left:-2px;
}
.kuang_zhong4 {
height: 390px;
width: 1003px;
position: relative;top:-531px;
position: relative;left:-2px;
}
.kuang_xia2 {
width: 1003px;
position: relative;top:-616px;
position: relative;left:-2px;
}
.s {
width: 1003px;
position: relative;top:-1285px;
position: relative;left:2px;
}
.lmgpxl {
position: relative;top:-1265px;
position: relative;left:2px;
}
.sz {
width: 1003px;
height: 360px;
position: relative;top:-714px;
position: relative;left:2px;
overflow-x: hidden;
}
.x {
width: 1003px;
position: relative;top:-930px;
position: relative;left:2px;
}
.gjjp {
width: 260px;
height: 212px;
position: relative;top:-1336px;
position: relative;left:40px;
}
.gjjp1 {
width: 260px;
height: 212px;
position: relative;top:-1336px;
position: relative;left:112px;
}
.gjjp2 {
width: 260px;
height: 212px;
position: relative;top:-1336px;
position: relative;left:172px;
}
.dzg {
color: #cc0000;
border: 0.05px solid #b6b6b5;
width: 260px;
position: relative;top:-1321px;
position: relative;left:42px;
}
.gg2 {
border: 0.05px solid #b6b6b5;
position: relative;top:-1322px;
position: relative;left:42px;
width: 65px;
text-align: center;
}
.gg3 {
border: 0.05px solid #b6b6b5;
position: relative;top:-1343px;
position: relative;left:106px;
width: 196px;
text-align: center;
}
.tp2g {
border: 0.05px solid #b6b6b5;
position: relative;top:-1344px;
position: relative;left:42px;
width: 260px;
height: 40px;
}
.see {
position: relative;top:10px;
position: relative;left:3px;
}
.see1 {
position: relative;top:10px;
position: relative;left:7px;
}
.zlnx {
position: relative;top:-104px;
position: relative;left:334px;
}
.wc {
position: relative;top:-104px;
position: relative;left:326px;
}
.lxwm{
width: 1003px;
position: relative;top:-1476px;
position: relative;left:-2px;
}
.ds {
width: 1003px;
position: relative;top:-1486px;
position: relative;left:-2px;
}
.dz {
width: 1003px;
height: 190px;
position: relative;top:-1492px;
position: relative;left:-2px;
}
.dx {
width: 1003px;
position: relative;top:-1497px;
position: relative;left:-2px;
}
.dbg1,.td1{

border:0.1px solid #b6b6b5;
width: 147px;
height: 35px;


}
.dbg11 {

position: relative;top:-1733px;
position: relative;left:28px;
}
.dtd1 {
border:0.2px solid #b6b6b5;
width: 915px;
}
.tb {
position: relative;left:-4px;
}
.da {
color: blue;
}


</style>
</head>
<body>
<div class="zt">
<table valign="top">
<tr><!-- 头部 -->
<td>
<div class="logol">
<img src="logo.png" class="logo">
<input type="button" value="请输入搜索关键字" class="but">
<button class="butt">搜索</button>
</div>
<div class="zdl">招代理，上环球
<input type=button class="a1" onclick="window.open('#')" value="注册">
<input type=button class="a2" onclick="window.open('#')" value="登录">
<input type=button class="a3" onclick="window.open('#')" value="首页">
<input type=button class="a3" onclick="window.open('#')" value="招商">
<input type=button class="a3" onclick="window.open('#')" value="代理">
<input type=button class="a3" onclick="window.open('#')" value="展会">
<img src="logo.gif" class="logo">
<img src="top.jpg" class="top">
</div>
<div class="bt">
<a href="#" class="aa2">首面</a>
<a href="#" class="aa2">招商产品</a>
<a href="#" class="aa2">企业介绍</a>
<a href="#" class="aa2">企业动态</a>
<a href="#" class="aa2">在线留言</a>
</div>
<img src="gsjj.gif" class="gsjj">
<div class="bbk">
<img src="kuang_shang.gif" class="shang">
<img src="kuang_zhong.gif" class="kuang_zhong">
<img src="kuang_zhong.gif" class="kuang_zhong1">
<img src="kuang_zhong.gif" class="kuang_zhong2">
<img src="kuang_xia.gif" class="kuang_xia">
</div>
<div class="cwz"> 江西长荣实业有限公司是一家以地道的中药材为优势依托，集科研、开发、生产、经营为一体的现代化医药外用品民营企业。公司位于江西省省级工业园--<br>樟树市城北工业园,占地面积50余亩，建筑面积2万平方米，现有员工100余人，其中专业技术人员占员工总人数的50%。拥有30的万级净化的外用消刹剂生<br>产车间。

江西长荣实业有限公司以“绿色，健康，创新，共赢”为企业宗旨，以“长风破浪，荣立强企”的企业精神,致力于人类皮肤健康事业的发展。传<br>承和发扬“樟帮”传统，精选樟树地道的中药材为原料研制生产出以“宜琈宁”为品牌等一系列的抑菌+护理中药乳膏，抑菌喷剂，妇科抑菌洗液，妇科抑<br>菌凝胶等纯中药提取、无激素的健康产品。面向全国诚招各级经销商,医药公司，大型连锁药店，共谋发展，以实现“客户认可、员工满意、公司有利、社会<br>受益” 的长荣远大目标。共同创建一种平等、共赢的战略伙伴关系，为社会大健康事业的发展作出应有的贡献，以回馈社会各界对长荣实业的支持与厚爱。<br>我们期待您的合作！期待与您共赢未来！</div>
</td>
</tr>
<tr>
<td class="tb" valign="top"><!-- 体部 -->
<div class="ts">
<img src="减肥系列.gif" class="jfxl">
<div class="cpbk">
<img src="kuang_shang.gif" class="shang">
<img src="kuang_zhong.gif" class="kuang_zhong">
<img src="kuang_zhong.gif" class="kuang_zhong1">
<img src="kuang_zhong.gif" class="kuang_zhong3">
<img src="kuang_xia.gif" class="kuang_xia1">
</div>

</div>
<table class="cpbg">
<tr>
<td class="cpt" width="293px">
<img src="qgyyzs_201912295544175.jpg" class="zxrj">
</td>
</tr>
<tr>
<td>
<a href="#" class="rs">日圣牌左旋肉碱胶囊</a>
</td>

</table >
<img src="kuang_zhong.gif" class="sz">
<div class="gg">规　　格</div>
<div class="gg1">0.4g/粒</div>

<table class="dbg3" cellspacing="0">
<tr>
<td class="dbg1" cellspacing="0">
<img src="seeinfo.gif" class="ltp1">
</td>
<td class="dbg2">
<img src="dlcp.gif" class="dlcp">
</td>
</t
...全文
2202 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
ywxk2016 2019-03-17
  • 打赏
  • 举报
 回复
最外层的div不要设置高度，最后一个table设置一个padding-bottom:10px;应该就可以了。
mfigods 2019-03-15
  • 打赏
  • 举报
 回复
都是定位，一般做网页不给高，用内容撑高
mfigods 2019-03-15
  • 打赏
  • 举报
 回复
太乱了，你解决了吗

weixin_44522223 2019-03-06
  • 打赏
  • 举报
 回复
这回代码全了
weixin_44522223 2019-03-06
  • 打赏
  • 举报
 回复
</td> </tr> </table> <img src="蓝帽钙片系列.gif" class="lmgpxl"> <img src="kuang_shang.gif" class="s"> <img src="kuang_xia.gif" class="x"> <img src="qgyyzs_2018914113826620.jpg" class="gjjp"> <img src="qgyyzs_2018914113725575.jpg" class="gjjp1"> <img src="qgyyzs_2019115112952656.jpg" class="gjjp2"> <div class="dzg">钙维生素D3咀嚼片（儿童型）</div> <div class="gg2">规格</div> <div class="gg3">60片</div> <div class="tp2g"> <img src="seeinfo.gif" class="see"> <img src="dlcp.gif" class="see1"> </div> <div class="zlnx"> <div class="dzg">钙维生素D3咀嚼片（中老年型）</div> <div class="gg2">规格</div> <div class="gg3">2g*60片</div> <div class="tp2g"> <img src="seeinfo.gif" class="see"> <img src="dlcp.gif" class="see1"> </div> <div class="wc"> <div class="dzg">维生素C咀嚼片</div> <div class="gg2">规格</div> <div class="gg3">2g*60片</div> <div class="tp2g"> <img src="seeinfo.gif" class="see"> <img src="dlcp.gif" class="see1"> </div> </td> </tr> <tr> <td valign="top"><!-- 尾部 --> <img src="lxwm.gif" class="lxwm"> <img src="kuang_shang.gif" class="ds"> <img src="kuang_zhong.gif" class="dz"> <img src="kuang_xia.gif" class="dx"> </div> <table class="dbg11" table width="" border="0.1" BORDER="0" cellspacing="0" > <tr> <td colspan="2" class="dtd1">公司名称：江西长荣实业有限公司</td> </tr> <tr> <td class="td1" id="dtd2" table width="100%" border="0.5" cellspacing="0">联 系 人：黎经理</td> <td class="td1" >手　　机：18007054895</td> </tr> <tr> <td class="td1">电　　话：18007054895</td> <td class="td1"> 传　　真：0</td> </tr> <tr> <td class="td1">网　　址：<a class="da" href="#">http://www.jxcryfn.com</a></td> <td class="td1">电子邮箱：3510937652@qq.com</td> </tr> <tr> <td class="td1">联　系QQ：3510937652</td> <td class="td1">微　　信：18007054895</td> </tr> <tr> <td colspan="2" class="td1">公司地址：江西</td> </tr> </table> </div> </td> </tr> </table> </div> </body> </html>
weixin_44522223 2019-03-06
  • 打赏
  • 举报
 回复
代码有没显式出来的
微信小程序商城-界面设计实战教学(含源代码)
讲解微信小程序商城界面设计所需的基础知识，实战商城界面所要做的多个栏目：首页、产品列表、产品详细页面、购物车、用户中心等几十个页面的布局设计！任务作业：1.制作一个空白的小程序框架2.制作一个1行2列的产品列表3.制作一个产品介绍的底部菜单：首页，收藏，购物车，加入购物车，立即购买（注意： 作业需写在CSDN博客中，请把作业链接贴在评论区，老师会定期逐个批改~~）
实训-利用HTML+CSS制作某米官网首页
目录 项目介绍 需求分析 页面布局及样式实现 1.引入css文件及初始化 2.实现顶部广告 3.黑色导航栏 4.白色导航 5.banner 6.广告 7.手机 8.家电 9.视频 10.页脚 11.icon 网页总体效果图 总结 源码 项目介绍 学习HTML和CSS有一段时间了，笔者做了一个相对练习而言较为复杂的网页，某米的官网首页，上一下最终效果图： 这个网页相对来说还是比较有练习意义的，包含导航栏，大量的浮动和弹性布局以及一些细小却重要的知识点...
第4版 网页设计与制作 HTML5+CSS3+JavaScript(赵丰年 编著）学习笔记
第1章 HTML5基础 1.万维网（World Wide Web,WWW)由大量的Web服务器构成。我们通过浏览器访问这些服务器上的网页。不同的网页通过超链接联系在一起，构成了WWW的网状结构。 2.HTML是表示网页的一种规范，它通过标记符定义了网页内容的显示，并使用属性进一步控制内容的显示。 3.Web标准包括结构.表现和行为3部分。 4.最基本的HTML标记符包括：HTML标记符<html>和<html>,首部标记<...
CSS定位DIV绝对底部
CSS定位DIV绝对底部 网页制作Webjx文章简介：CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。 CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人...
css Sticky footer的实现
有时候制作网页的时候当内容太少的时候，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白）。 一：第一种方法：国外大神提供 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章