关于html5，用div+css做页面怎么能铺满全屏
我的代码如下<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title><style>*{mar...
我的代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; font-size:12px;}
li{ list-style:none; float:left;}
</style>
</head>
<body>
<div style=" width:100%; height:100%;">
<div style=" background-color:#9fc967;"> </div>
<div style=" overflow:hidden;">
<ul>
<li style=" height:604px; background-image:url(images/login_02.gif); background-repeat:repeat-x;"> </li>
<li style=" width:989px;">
<div style=" height:345px;background-image:url(images/login_1.jpg); background-repeat:no-repeat;"> </div>
<div style=" overflow:hidden;">
<ul>
<li style=" width:539px; height:47px; background-image:url(images/login_05.gif); background-repeat:no-repeat;"></li>
<li style=" width:206px; height:47px; background-image:url(images/login_06.gif); background-repeat:no-repeat;"></li>
<li style=" width:244px; height:47px; background-image:url(images/login_07.gif); background-repeat:no-repeat;"></li>
</ul>
</div>
<div style=" height:212px; background-image:url(images/login_08.gif); background-repeat:no-repeat;"> </div>
</li>
<li style=" height:604px; background-image:url(images/login_04.gif); background-repeat:repeat-x;"> </li>
</ul>
</div>
<div style=" background-color:#70ad21;"> </div>
</div>
上面的图片是源文件生成的页面，下面的是我做的…… 展开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; font-size:12px;}
li{ list-style:none; float:left;}
</style>
</head>
<body>
<div style=" width:100%; height:100%;">
<div style=" background-color:#9fc967;"> </div>
<div style=" overflow:hidden;">
<ul>
<li style=" height:604px; background-image:url(images/login_02.gif); background-repeat:repeat-x;"> </li>
<li style=" width:989px;">
<div style=" height:345px;background-image:url(images/login_1.jpg); background-repeat:no-repeat;"> </div>
<div style=" overflow:hidden;">
<ul>
<li style=" width:539px; height:47px; background-image:url(images/login_05.gif); background-repeat:no-repeat;"></li>
<li style=" width:206px; height:47px; background-image:url(images/login_06.gif); background-repeat:no-repeat;"></li>
<li style=" width:244px; height:47px; background-image:url(images/login_07.gif); background-repeat:no-repeat;"></li>
</ul>
</div>
<div style=" height:212px; background-image:url(images/login_08.gif); background-repeat:no-repeat;"> </div>
</li>
<li style=" height:604px; background-image:url(images/login_04.gif); background-repeat:repeat-x;"> </li>
</ul>
</div>
<div style=" background-color:#70ad21;"> </div>
</div>
上面的图片是源文件生成的页面，下面的是我做的…… 展开
2个回答
展开全部
把图片的最左边或者竖着切一两个像素 在浏览器里面横铺 在把图片放在中间居中 那样看上去就是平铺效果 这种方法只限于有规律的图片
追问
我这有两个条，我也设置的是按X轴平铺，但是不能适应浏览器
追答
你得把写背景平铺的哪个div写成宽高都是100%的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐于2017-10-12 · 知道合伙人软件行家
PS一点学
知道合伙人软件行家
采纳数：1408
获赞数：11167
毕业于广东机电职业技术学院软件技术专业.IT行业2年从业经验,主要负责建站,SEO,营销.现任凯龙网络技术主管.
向TA提问 私信TA
关注
![]()
展开全部
1、CSS方式
在使用CSS方式的时候必须有前提的，就拿高度的100%来说，咱们必须定义它的父级元素的高度，而且高度为铺满全屏的高度。同时注意不要有其他的CSS冲突，比如我们使用position:absolute(绝对定位)的时候我们使用高度100%就会失效了。
2、javascript方式
如果因为我们的这个模块的需求，导致我们不能满足使用CSS完成这一需求的时候，我们就要动用JS，来做了。当然我们不管 是用原生的JS还是jquery等框架。我们必须选对相应的对象及其方法。比如很多人说应该选择Screen对象，其实我觉得不是这样的，因为不管是我们的pc也好还是我们的移动端也好，浏览器本身往往已经占用了一定的位置，因此我建议使用window对象来获取尺寸的数值，然后通过DOM对HTML元素的CSS属性值进行改变。
在使用CSS方式的时候必须有前提的，就拿高度的100%来说，咱们必须定义它的父级元素的高度，而且高度为铺满全屏的高度。同时注意不要有其他的CSS冲突，比如我们使用position:absolute(绝对定位)的时候我们使用高度100%就会失效了。
2、javascript方式
如果因为我们的这个模块的需求，导致我们不能满足使用CSS完成这一需求的时候，我们就要动用JS，来做了。当然我们不管 是用原生的JS还是jquery等框架。我们必须选对相应的对象及其方法。比如很多人说应该选择Screen对象，其实我觉得不是这样的，因为不管是我们的pc也好还是我们的移动端也好，浏览器本身往往已经占用了一定的位置，因此我建议使用window对象来获取尺寸的数值，然后通过DOM对HTML元素的CSS属性值进行改变。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
