頁面使用輪播圖后，輪播區域與主體內容區域對齊不了，請教大神！
問題描述
<!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;}
網公網安備