页面使用轮播图后，轮播区域与主体内容区域对齐不了，请教大神！
问题描述
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { padding: 0; margin: 0; } /*头部样式*/ .header { background-color: lightblue; } /*头部内容区*/ .header .content { width: 90%; background-color: lightblue; margin: 0 auto; height: 60px; } /*头部中的导航*/ .header .content .nav { /*清空ul默认样式*/ margin: 0; padding: 0; } /*去掉头部中的导航子项样式*/ .header .content .nav .item { list-style: none; } /*设置头部中的导航自相中包含的超链接*/ .header .content .nav .item a { float: left;/*设置为向左浮动*/ min-width: 80px; min-height: 60px; /*水平居中*/ text-align: center; /*垂直居中*/ line-height: 60px; /*导航前景色*/ color: white; padding: 0 15px;/*上下为0，左右为15*/ /*去掉a标签的默认下划线*/ text-decoration: none; } .header .content .nav .item a:hover { background-color: red; font-size: 1.1rem; } /*设置轮播图*/ .slider { width: 90%; margin: 0 auto; } /*轮播css设置*/ #flash { width:100%; height: 535px; margin: 0 auto; text-align: center; } #flash #play { /*width:100%;*/ height: 535px; list-style: none; position:relative; /*top:0;*/ /*left:0;*/ margin: 0 auto; padding: 0 auto; } #flash #play li { display: none; position:absolute; /*top:0;*/ /*left:0;*/ margin: 0 auto; padding: 0 auto; } #flash #play li img { float: left; } #button { position: relative; bottom:20px; left:40%; list-style: none; padding: 0 0; } #button li { margin-left: 10px; float: left; } #button li div { width:12px; height: 12px; background:#DDDDDD; border-radius: 6px; cursor: pointer; } #prev { width:40px; height:63px; background:url(images/beijing.png) 0 0; position: absolute; top:50%; left:10px; z-index: 1000; } #next { width:40px; height:63px; background:url(images/beijing.png) -40px 0; position: absolute; top:50%; right:10px; z-index: 1000; } #prev:hover { background:url(images/beijing.png) 0 -62px; } #next:hover { background:url(images/beijing.png) -40px -62px; } /*设置商品列表样式*/ .left { box-sizing: border-box; padding: 10px; border: 1px solid #555555; } .left h1 { color: #555; font-size: 1.3rem; border-bottom: 1px solid #555555; } .left ul { margin-top: 20px; padding: 0; } .left ul li { list-style: none; padding: 10px 20px; } .left ul li a { text-decoration: none; color: #555555; } .left ul li a:hover { color: coral; text-decoration: underline; cursor: pointer; } /*主体使用圣杯来实现*/ /*第一步: 设置主体的宽度*/ .container { width: 90%; background-color: lightgray; margin: 5px auto; /*border: 5px dashed black;*/ } /*第二步: 将中间内容区, 左侧和右侧的宽高进行设置*/ .left { width: 200px; min-height: 500px; background-color: lightgreen; } .right { width: 200px; min-height: 500px; background-color: lightcoral; } .main { width: 100%; background-color: lightblue; min-height: 500px; } /*第三步: 将主体,左, 右全部浮动*/ .main, .left, .right { float: left; } .container { overflow: hidden; } /*第四步: 将左右区块移动到正确的位置上*/ .main { /*设置一个盒模型的大小的计算方式, 默认大小由内容决定*/ box-sizing: border-box; padding-left: 200px; padding-right: 200px; } .left { margin-left: -100%; } .right { margin-left: -200px; } /*页面的底部样式开始*/ .footer { background-color: #777777; } .footer .content { width: 90%; background-color: #777777; height: 60px; margin: 0 auto; } .footer .content p { /*水平居中*/ text-align: center; /*垂直居中*/ line-height: 60px; } .footer .content p a { color: #999999; text-decoration: none; } .footer .content p a:hover { color: white; } </style> <link rel="stylesheet" href="myStyle0905.css"> <script type="text/javascript"> window.onload=function() { var oPlay=document.getElementById('play'); var aLi=oPlay.getElementsByTagName('li'); var oButton=document.getElementById('button'); var aDiv=oButton.getElementsByTagName('div'); var oPrev=document.getElementById('prev'); var oNext=document.getElementById('next'); var oFlash=document.getElementById('flash'); var now=0; var timer2=null; for(var i=0; i<aDiv.length; i++) { aDiv[i].index=i; aDiv[i].onmouseover=function(){ if(now==this.index) return; now=this.index; tab(); } } oPrev.onclick=function(){ now--; if(now==-1){ now=aDiv.length-1; } tab(); } oNext.onclick=function(){ now++; if(now==aDiv.length){ now=0; } tab(); } oFlash.onmouseover=function() { clearInterval(timer2); } oFlash.onmouseout=function() { timer2=setInterval(oNext.onclick,4000); } timer2=setInterval(oNext.onclick,5000); function tab(){ for(var i=0; i<aLi.length; i++){ aLi[i].style.display='none'; } for(var i=0; i<aDiv.length; i++) { aDiv[i].style.background="#DDDDDD"; } aDiv[now].style.background='#A10000'; aLi[now].style.display='block'; aLi[now].style.opacity=0; aLi[now].style.filter="alpha(opacity=0)"; jianbian(aLi[now]); } function jianbian(obj){ var alpha=0; clearInterval(timer); var timer=setInterval(function(){ alpha++; obj.style.opacity=alpha/100; obj.style.filter="alpha(opacity="+alpha+")"; if(alpha==100) { clearInterval(timer); } },10); } } </script> <title>网站首页布局</title> </head> <body> <!--头部--> <div class="header"> <!-- 头部--> <div class="content"> <ul class="nav"> <li class="item"><a href="">首页</a></li> <li class="item"><a href="">产品动态</a></li> <li class="item"><a href="">发布产品</a></li> <li class="item"><a href="">售后服务</a></li> <li class="item"><a href="">成功案例</a></li> <li class="item"><a href="">联系我们</a></li> </ul> </div> </div> <div class="slider"> <div id="flash"> <div id="prev"></div> <div id="next"></div> <ul id="play"> <li style="display: block;"><img src="images/1.jpg" alt="" /></li> <li><img src="images/2.jpg" alt="" /></li> <li><img src="images/3.jpg" alt="" /></li> <li><img src="images/4.jpg" alt="" /></li> <li><img src="images/5.jpg" alt="" /></li> <li><img src="images/6.jpg" alt="" /></li> <li><img src="images/7.jpg" alt="" /></li> <li><img src="images/8.jpg" alt="" /></li> </ul> <ul id="button"> <li><div style="background: #A10000;"></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> </ul> </div> </div> <!--主体--> <div class="container"> <!-- 圣杯DOM结构--> <!-- 主体--> <div class="main"><h1>主体内容区</h1></div> <!-- 左侧边栏--> <div class="left"> <!--<h1>商品列表</h1>--> <ul> <li><a href="">我的商品1</a></li> <li><a href="">我的商品2</a></li> <li><a href="">我的商品3</a></li> <li><a href="">我的商品4</a></li> <li><a href="">我的商品5</a></li> <li><a href="">我的商品6</a></li> <li><a href="">我的商品7</a></li> <li><a href="">我的商品8</a></li> <li><a href="">我的商品9</a></li> <li><a href="">我的商品10</a></li> </ul> </div> <!-- 右侧边栏--> <div class="right"><h1>右侧</h1></div> </div> <!--底部--> <div class="footer"> <!-- 底部内容区--> <div class="content"> <p> <a href="">© php中文网版本所有</a> | <a href="">0551-666***999</a> | <a href="">皖ICP备19***666</a> </p> </div> </div> </body> </html>
问题解答
回答1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="myCss2.css"> <script type="text/javascript" src="banner.js"></script> <title>网站首页布局</title></head><body><!--头部--><div class="header"> <!-- 头部--> <div class="content"><ul class="nav"> <li class="item"><a href="">首页</a></li> <li class="item"><a href="">产品动态</a></li> <li class="item"><a href="">发布产品</a></li> <li class="item"><a href="">售后服务</a></li> <li class="item"><a href="">成功案例</a></li> <li class="item"><a href="">联系我们</a></li></ul> </div></div><div class="slider"> <div id="flash"><div id="prev"></div><div id="next"></div><ul id="play"> <li style="display: block;"><img src="images/1.jpg" alt="" /></li> <li><img src="images/2.jpg" alt="" /></li> <li><img src="images/3.jpg" alt="" /></li> <li><img src="images/4.jpg" alt="" /></li> <li><img src="images/5.jpg" alt="" /></li> <li><img src="images/6.jpg" alt="" /></li> <li><img src="images/7.jpg" alt="" /></li> <li><img src="images/8.jpg" alt="" /></li></ul><ul id="button"> <li><div style="background: #A10000;"></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li></ul> </div></div><!--主体--><div class="container"> <!-- 圣杯DOM结构--> <!-- 主体--> <div class="main"><h1>主体内容区</h1></div> <!-- 左侧边栏--> <div class="left"><h1>产品列表</h1><ul> <li><a href="">我的商品1</a></li> <li><a href="">我的商品2</a></li> <li><a href="">我的商品3</a></li> <li><a href="">我的商品4</a></li> <li><a href="">我的商品5</a></li> <li><a href="">我的商品6</a></li> <li><a href="">我的商品7</a></li> <li><a href="">我的商品8</a></li> <li><a href="">我的商品9</a></li> <li><a href="">我的商品10</a></li></ul> </div> <!-- 右侧边栏--> <div class="right"><h1>热销产品</h1><ul> <li><a href="">热销商品1</a></li> <li><a href="">热销商品2</a></li> <li><a href="">热销商品3</a></li> <li><a href="">热销商品4</a></li> <li><a href="">热销商品5</a></li> <li><a href="">热销商品6</a></li> <li><a href="">热销商品7</a></li> <li><a href="">热销商品8</a></li> <li><a href="">热销商品9</a></li> <li><a href="">热销商品10</a></li></ul> </div></div><!--底部--><div class="footer"> <!-- 底部内容区--> <div class="content"><p> <a href="">© php中文网版本所有</a> | <a href="">0551-666***999</a> | <a href="">皖ICP备19***666</a></p> </div></div></body></html>
这是页面代码，css文件在后面，哪位大神可以帮忙看看哪里有问题。感谢！
回答2：body { padding: 0; margin: 0;}/*头部样式*/.header { background-color: lightblue;}/*头部内容区*/.header .content { width: 90%; background-color: lightblue; margin: 0 auto; height: 60px;}/*头部中的导航*/.header .content .nav { /*清空ul默认样式*/ margin: 0; padding: 0;}/*去掉头部中的导航子项样式*/.header .content .nav .item { list-style: none;}/*设置头部中的导航自相中包含的超链接*/.header .content .nav .item a { float: left;/*设置为向左浮动*/ min-width: 80px; min-height: 60px; /*水平居中*/ text-align: center; /*垂直居中*/ line-height: 60px; /*导航前景色*/ color: white; padding: 0 15px;/*上下为0，左右为15*/ /*去掉a标签的默认下划线*/ text-decoration: none;}.header .content .nav .item a:hover { background-color: red; font-size: 1.1rem;}/*设置轮播图*/.slider { width: 90%; margin: 0 auto;}/*轮播css设置*/#flash { width:900%; height: 535px; margin: 0 auto;}#flash #play { width:100%; height: 535px; list-style: none; position:relative; top:0; left:0;}#flash #play li { display: none; position:absolute; top:0; left:0;}#flash #play li img { float: left;}#button { position: relative; bottom:20px; left:40%; list-style: none; padding: 0 0;}#button li { margin-left: 10px; float: left;}#button li div { width:12px; height: 12px; background:#DDDDDD; border-radius: 6px; cursor: pointer;}#prev { width:40px; height:63px; background:url(images/beijing.png) 0 0; position: absolute; top:50%; left:10px; z-index: 1000;}#next { width:40px; height:63px; background:url(images/beijing.png) -40px 0; position: absolute; top:50%; right:10px; z-index: 1000;}#prev:hover { background:url(images/beijing.png) 0 -62px;}#next:hover { background:url(images/beijing.png) -40px -62px;}/*设置商品列表样式*/.left { box-sizing: border-box; padding: 10px; border: 1px solid #555555;}.left h1 { color: #555; font-size: 1.3rem; border-bottom: 1px solid #555555;}.left ul { margin-top: 20px; padding: 0;}.left ul li { list-style: none; padding: 10px 20px;}.left ul li a { text-decoration: none; color: #555555;}.left ul li a:hover { color: coral; text-decoration: underline; cursor: pointer;}/*主体使用圣杯来实现*//*第一步: 设置主体的宽度*/.container { width: 90%; background-color: lightgray; margin: 5px auto; /*border: 5px dashed black;*/}/*第二步: 将中间内容区, 左侧和右侧的宽高进行设置*/.left { width: 200px; min-height: 500px; /*background-color: lightgreen;*/}.right { width: 200px; min-height: 500px; /*background-color: lightcoral;*/}.main { width: 100%; /*background-color: lightblue;*/ min-height: 500px;}/*第三步: 将主体,左, 右全部浮动*/.main, .left, .right { float: left;}.container { overflow: hidden;}/*第四步: 将左右区块移动到正确的位置上*/.main { /*设置一个盒模型的大小的计算方式, 默认大小由内容决定*/ box-sizing: border-box; padding-left: 200px; padding-right: 200px;}.left { margin-left: -100%;}.right { box-sizing: border-box; padding: 10px; border: 1px solid #555555; margin-left: -200px;}.right h1 { color: #555; font-size: 1.3rem; border-bottom: 1px solid #555555;}.right ul { margin-top: 20px; padding: 0;}.right ul li { list-style: none; padding: 10px 20px;}.right ul li a { text-decoration: none; color: #555555;}.right ul li a:hover { color: coral; text-decoration: underline; cursor: pointer;}/*页面的底部样式开始*/.footer { background-color: #777777;}.footer .content { width: 90%; background-color: #777777; height: 60px; margin: 0 auto;}.footer .content p { /*水平居中*/ text-align: center; /*垂直居中*/ line-height: 60px;}.footer .content p a { color: #999999; text-decoration: none;}.footer .content p a:hover { color: white;}
网公网安备