相同的代码在不同浏览器中显示效果差别很大，实际开发中该怎么解决？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5-2</title>
<link rel="stylesheet" type="text/css" href="css/5-2zuoye.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="js/5-2zuoye.js"></script>
</head>
<body>
<!-- 大容器 -->
<div class="wrap">
<!-- 设置container是为了设置背景颜色 -->
<div class="container">
<!-- 顶部区 -->
<div class="header">
<ul class="headerleft">
<li class="dropdown-menu" id="one"><a href="#">亲，请登录</a></li>
<li class="dropdown-menu"><a href="#">免费注册</a></li>
<li class="dropdown-menu"><a href="#">手机逛慕淘</a></li>
</ul>
<ul class="headerright">
<li class="dropdown-menu1 menu1">
<a href="#">我的慕淘</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>已买到的宝贝</li>
<li>我的慕淘</li>
</ul>
</li>
<li class="dropdown-menu1">
<a href="#">收藏夹</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</li>
<li class="dropdown-menu5"><a href="#">商品分类</a></li>
<li class="dropdown-menu1">
<a href="#">卖家中心</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
<li>体验中心</li>
</ul>
</li>
<li class="dropdown-menu1">
<a href="#">联系客服</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</li>
</ul>
</div>
<!-- logo区 -->
<div class="logo clearfix">
<div class="logoleft"><a href="#"><img src="sucai/logo.png"></a></div>
<div class="logocenter">
<input type="text" placeholder="灵魂美食一元抢" class="sousuo">
<input type="button" value="搜索" class="btn">
</div>
<div class="logoright">
<div class="cart">
<div class="cart1"><img src="sucai/icon/26.png"> <span>购物车</span></div>
<div class="num"><span>0</span><img src="sucai/icon/23.png"></div>
</div>
<!-- 下拉菜单 -->
<div class="cartmenu">
<ul class="cartul">
<li class="cartli">
<img src="sucai/cart/1.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">玉兰油多效修护三部曲套装 ×</span><br />
<span class="price">￥199×2</span>
</li>
<li class="cartli">
<img src="sucai/cart/3.png">
<span class="brand">Apple iPhone 7 (A1660) ×</span><br />
<span class="price">￥6188×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/4.png">
<span class="brand">飞利浦面条机 HR2356/31 ×</span><br />
<span class="price">￥659×4</span>
</li>
<li class="cartli">
<img src="sucai/cart/5.png">
<span class="brand">罗技G29 力反馈游戏方向 ×</span><br />
<span class="price">￥2999×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/1.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">玉兰油多效修护三部曲套装 ×</span><br />
<span class="price">￥199×2</span>
</li>
<li class="cartli">
<img src="sucai/cart/3.png">
<span class="brand">Apple iPhone 7 (A1660) ×</span><br />
<span class="price">￥6188×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/4.png">
<span class="brand">飞利浦面条机 HR2356/31 ×</span><br />
<span class="price">￥659×4</span>
</li>
<li class="cartli">
<img src="sucai/cart/5.png">
<span class="brand">罗技G29 力反馈游戏方向 ×</span><br />
<span class="price">￥2999×1</span>
</li>
</ul>
</div>
<div class="shop">最新加入的商品</div>
<div class="shop1">共27件商品 <span>共计￥0.00</span> <button>去购物车</button></div>
</div>
</div>
</div>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">数码城</a></li>
<li><a href="#">天黑黑</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">发现</a></li>
<li><a href="#">二手特价</a></li>
<li><a href="#">名品汇</a></li>
</ul>
</div>
<!-- banner区 -->
<div class="banner">
<!-- 商品分类 -->
<!-- 子菜单 -->
<!-- 主菜单 -->
<div class="menu-content">
<br>
<div class="i1">
<img src="sucai/icon/18.png">
商品分类
</div>
<div class="menu-item">
<a href="#">
<span>家用电器 ></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>手机、运营商、数码 ></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>电脑、办公 ></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家居、家具、家装、厨具></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>男装、女装、童装、内衣></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>化妆、清洁、宠物 ></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>运动户外、钟表 ></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>汽车、汽车用品 ></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>母婴、玩具电器 ></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>食品、酒类、生鲜、特产></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>医药保健 ></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>图书、影响、电子书 ></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>彩票、旅行、重置、票务></span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>理财、众筹、白条、保险></span>
</a>
</div>
</div>
<!-- 轮播图 -->
<div class="banner1">
<a href="#">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="#">
<div class="banner-slide slide2"></div>
</a>
<a href="#">
<div class="banner-slide slide3"></div>
</a>
<a href="#">
<div class="banner-slide slide4"></div>
</a>
<a href="#">
<div class="banner-slide slide5"></div>
</a>
</div>
<!-- 上一张、下一张按钮 -->
<a href="javascript:void(0)" class="button prev"></a>
<a href="javascript:void(0)" class="button next"></a>
<!-- 圆点导航 -->
<div class="dots">
<span class="active" id="0"></span>
<span id="1"></span>
<span id="2"></span>
<span id="3"></span>
<span id="4"></span>
</div>
<!-- 生活服务 -->
<div class="life">
<div class="kuaibao">
<span class="l1">慕快报</span> <span class="l2">更多></span><br>
<a href="#">[特惠]精选图书每满150减50</a><br>
<a href="#">[公告]因广州图书馆搬仓升级配送延迟</a><br>
<a href="#">[特惠]爆款手机12期免息 抽奖赢电视</a><br>
<a href="#">[公告]广东、福建受台风影响配送延迟</a><br>
<a href="#">[特惠]大闸蟹领券满399减180</a></td>
</div>
<div class="tupian">
<div class="tu"><img src="sucai/icon/1.png"><br>话费</div>
<div class="tu"><img src="sucai/icon/2.png"><br>机票</div>
<div class="tu"><img src="sucai/icon/3.png"><br>电影票</div>
<div class="tu tu1"><img src="sucai/icon/4.png"><br>游戏</div>
<div class="tu"><img src="sucai/icon/5.png"><br>彩票</div>
<div class="tu"><img src="sucai/icon/6.png"><br>加油卡</div>
<div class="tu"><img src="sucai/icon/7.png"><br>酒店</div>
<div class="tu tu1"><img src="sucai/icon/8.png"><br>火车票</div>
<div class="tu"><img src="sucai/icon/9.png"><br>众筹</div>
<div class="tu"><img src="sucai/icon/10.png"><br>理财</div>
<div class="tu"><img src="sucai/icon/11.png"><br>礼品卡</div>
<div class="tu tu1"><img src="sucai/icon/12.png"><br>白条</div>
</div>
<div class="nanzhuang">
<img src="sucai/ad.png">
</div>
</div>
<!-- 右导航 -->
<div class="rightsidebar"></div>
<!-- 楼层区 -->
<div class="louceng"></div>
<!-- 友情链接 -->
<div class="lianjie"></div>
<!-- 页脚 -->
<div class="footer"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/* 大容器 */
.wrap{
width: 100%;
}
/* container */
.container{
width: 100%;
background: #f3f5f7;
/* overflow: hidden; */
/* zoom: 1; */
}
/* header区 */
.header{
width: 70%;
margin: 0 auto;
border-bottom: 1px solid #C0C0C0;
height: 44px;
}
.headerleft,.headerright{
/* overflow: hidden; */
/* zoom: 1; */
height: 44px;
line-height: 44px;
}
.headerleft{
float: left;
}
.headerright{
float: right;
}
.dropdown-menu{
float: left;
font-size: 10px;
padding-left: 15px;
}
.dropdown-menu a,.dropdown-menu1 a,.dropdown-menu5 a{
color: gray;
}
#one a{
color: red;
}
.dropdown-menu a:hover,.dropdown-menu1 a:hover,.dropdown-menu5 a:hover{
color: red;
}
.dropdown-menu1,.dropdown-menu5{
box-sizing: border-box;
float: left;
font-size: 10px;
padding-left: 15px;
width: 120px;
/* text-align: center; */
}
.dropdown-menu5{
width: 120px;
display: block;
}
.dropdown-menu1{
position: relative;
height: 44px;
}
.dropdown-menu3{
position: absolute;
top: 43px;
display: none;
cursor: pointer;
}
.dropdown-menu1:hover{
display: block;
border: 1px solid #C0C0C0;
background: white;
border-bottom: none;
/* margin-bottom: -2px; */
}
.dropdown-menu1:hover .dropdown-menu3{
display: block;
position: absolute;
z-index: 2;
background: white;
width: 120px;
border: 1px solid #C0C0C0;
box-sizing: border-box;
/* padding-left: 10px; */
left: -1px;
border-top: none;
}
.dropdown-menu3 li{
padding-left: 10px;
}
.dropdown-menu3 li:hover{
background: #cdd0d4;
}
/* logo区 */
.logo{
width: 70%;
margin: 0 auto;
/* overflow: hidden;
zoom: 1; */
margin-top: 50px;
}
.clearfix:after {
content:".";
display:block;
height: 0;
visibility: hidden;
clear:both;
}
.clearfix {zoom:1;}
.logoleft,.logocenter,.logoright{
float: left;
}
.logoleft{
padding-left: 160px;
box-sizing: border-box;
}
.logocenter{
position: relative;
box-sizing: border-box;
margin-left: 120px;
margin-right: 150px;
/* margin: 0 auto; */
}
.sousuo{
width: 530px;
height: 40px;
/* position: absolute; */
/* left: 0px; */
}
.btn{
width: 80px;
height: 43px;
background: black;
color: white;
border: none;
position: absolute;
left: 534px;
top: 0px;
}
/* 购物车 */
.cart{
width: 200px;
/* border: 1px solid red; */
overflow: hidden;
zoom: 1;
height: 50px;
line-height: 50px;
background: red;
box-shadow: 0 0 10px 0 rgba(8, 1, 3,0.3)
}
.cart1{
width: 120px;
border-right: 1px solid white;
padding-left: 15px;
box-sizing: border-box;
height: 30px;
margin-top: 10px;
line-height: 30px;
}
.cart:hover .cart1{
border-right: 1px solid #cdd0d4;
}
.cart1,.num{
float: left;
color: white;
}
.num{
box-sizing: border-box;
padding-left: 20px;
}
.cart span{
font-size: 10px;
}
.cart:hover{
background: white;
}
.cart:hover span{
color: red;
}
/* 购物车下拉菜单 */
.logo{
/* height: 500px; */
width: 95%;
}
.logoright{
position: relative;
height: 100px;
}
.cartmenu{
width: 250px;
position: absolute;
z-index: 1;
height: 265px;
overflow-y: scroll;
background: white;
top: 100px;
}
.cartul{
padding-left: 10px;
padding-right: 10px;
}
.cartli{
position: relative;
border-top: 1px solid gray;
/* padding-left: 10px;
padding-right: 10px; */
}
.cartmenu .brand{
font-size: 10px;
color: gray;
position: absolute;
top: 0;
}
.cartmenu .brand:hover{
color: red;
}
.price{
font-size: 10px;
position: absolute;
top: 25px;
left: 55px;
}
.shop{
position: absolute;
z-index: 3;
font-size: 10px;
background: white;
height: 50px;
line-height: 50px;
box-sizing: border-box;
padding-left: 20px;
width: 250px;
}
.shop1{
position: absolute;
z-index: 3;
top: 365px;
font-size: 10px;
background: white;
height: 70px;
line-height: 70px;
width: 250px;
}
.shop1 button{
background: red;
height: 40px;
width: 100px;
color: white;
border: none;
border-radius: 2px;
cursor: pointer;
}
.shop1 span{
font-size: 8px;
}
.cartmenu,.shop,.shop1{
display: none;
}
.logoright:hover .cartmenu{
display: block;
}
.logoright:hover .shop1{
display: block;
}
.logoright:hover .shop{
display: block;
}
.cartli:hover{
background: #f3f5f7;
}
/* 导航 */
.nav{
width: 100%;
background: #07111b;
height: 50px;
line-height: 50px;
box-sizing: border-box;
padding-left: 400px;
}
.nav a{
text-decoration: none;
font-size: 15px;
color: white;
}
.nav a:hover{
color: red;
}
.nav li{
float: left;
box-sizing: border-box;
padding-right: 60px;
}
/* banner区 */
/* 轮播图 */
.banner{
width: 100%;
/* height: 700px; */
/* overflow: hidden; */
position: relative;
}
.banner1{
width: 730px;
height: 454px;
position: relative;
/* overflow: hidden; */
left: 400px;
}
.banner-slide{
width: 730px;
height: 454px;
background-repeat: no-repeat;
position: absolute;
display: none;
}
.slide-active{
display: block;
}
.slide1{
background-image: url('../sucai/focus-carousel/1.png');
}
.slide2{
background-image: url('../sucai/focus-carousel/2.jpg');
}
.slide3{
background-image: url('../sucai/focus-carousel/3.jpg');
}
.slide4{
background-image: url('../sucai/focus-carousel/4.jpg');
}
.slide5{
background-image: url('../sucai/focus-carousel/5.jpg');
}
/* 上一张下一张按钮 */
.button{
position: absolute;
display: block;
width: 50px;
height: 100px;
}
.button:hover{
background-color: #333;
opacity: 0.8;
filter: alpha(opacity=80);
}
.prev{
background-image: url('../sucai/focus-carousel/pre2.png');
background-repeat: no-repeat;
background-position: center center;
left: 400px;
top: 50%;
margin-top: -50px;
}
.next{
background-image: url('../sucai/focus-carousel/pre.png');
background-repeat: no-repeat;
background-position: center center;
left: 1078px;
top: 50%;
margin-top: -50px;
}
/* 圆点导航 */
.dots{
position: absolute;
bottom: 14px;
right: 50%;
margin-right: -35px;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
background: rgba(7,17,27,0.4);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
margin-left: 8px;
cursor: pointer;
}
.dots span.active{
box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset ;
background: white;
}
/* 商品分类 */
.menu-content{
position: absolute;
width: 150px;
height: 527px;
background: red;
top: -63px;
left: 250px;
line-height: 31px;
box-sizing: border-box;
padding-bottom: 10px;
color: white;
opacity: 0.8;
}
.menu-item{
padding-left: 10px;
}
.menu-item:hover{
background: white;
}
.menu-item:hover span{
color: red;
}
.menu-item span{
font-size: 12px;
color: white;
}
.i1{
width: 100%;
height: 31px;
box-sizing: border-box;
margin-top: -10px;
margin-bottom: 10px;
}
.sub-menu{
width: 730px;
height: 500px;
border: 1px solid #d9dde1;
background: #fff;
position: absolute;
left: 400px;
top: 0;
z-index: 999;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
box-sizing: border-box;
padding-top: 40px;
padding-left: 40px;
}
.hide{
display: none;
}
/* 子菜单 */
.sub-menu span{
font-weight: bold;
color: black;
}
.inner-box{
color: gray;
font-size: 12px;
box-sizing: border-box;
display: none;
}
.inner-box a:hover{
color: red;
}
.inner-box a{
color: gray;
}
/* 生活服务 */
.life{
position: absolute;
top: 0;
right: 153px;
height: 454px;
font-size: 10px;
width: 242px;
border: 1px solid gray;
box-sizing: border-box;
}
.life .kuaibao{
padding-left: 20px;
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid gray;
line-height: 25px;
}
.kuaibao .l1{
font-weight: bold;
color: red;
font-size: 15px;
}
.l2{
cursor: pointer;
}
.kuaibao a{
color: gray;
}
.kuaibao a:hover{
color: red;
}
.life .tupian{
height: 40%;
box-sizing: border-box;
}
.tupian .tu{
float: left;
width: 25%;
border-bottom: 1px solid gray;
border-right: 1px solid gray;
box-sizing: border-box;
text-align: center;
height: 33.3%;
padding-top: 10px;
color: gray;
cursor: pointer;
}
.tu img{
width: 40%;
}
.life .tupian .tu1{
border-right: none;
}
.nanzhuang img{
width: 100%;
height: 100%;
cursor: pointer;
}
$(document).ready(function(){
// 顶部右侧下箭头图片切换
$('.dropdown-menu1').hover(function(){
$(this).children('img').attr('src','sucai/icon/24.png')
},function(){
$(this).children('img').attr('src','sucai/icon/21.png')
})
// logo区购物车图片切换
$('.cart').hover(function(){
$(this).find('.cart1 img').attr('src','sucai/icon/25.png');
$(this).find('.num img').attr('src','sucai/icon/24.png');
},function(){
$(this).find('.cart1 img').attr('src','sucai/icon/26.png');
$(this).find('.num img').attr('src','sucai/icon/23.png');
})
// 轮播图
var index=0,
timer=null,
pics=$('.banner1').find('div'),
dots=$('.dots').find('span'),
prev=$('.prev'),
next=$('.next'),
menu=$('.menu-content'),
menuItems=$('.menu-item'),
subMenu=$('.sub-menu'),
innerBox=$('.inner-box'),
len=pics.length;
console.log(len);
function slideImg(){
// 鼠标放上去停止轮播，移开自动轮播
var main=$('.banner1');
main.hover(function(){
if (timer) clearInterval(timer);
},function(){
timer=setInterval(function(){
index++;
if (index>=len) {
index=0;
}
changeImg();
},2000)
})
main.mouseleave();
// 点击圆点切换图片
for(d=0;d<len;d++){
dots.eq(d).click(function(){
index=$(this).attr('id');
changeImg();
})
}
// 下一张按钮，上一张按钮点击切换图片
next.click(function(){
index++;
if (index>=len) {
index=0;
}
changeImg();
})
prev.click(function(){
index--;
if (index<0) {
index=len-1;
}
changeImg();
})
// 导航菜单，遍历主菜单且绑定事件
for(m=0;m<menuItems.length;m++)
{
menuItems.eq(m).attr('data-index',m);
menuItems.eq(m).mouseenter(function(){
var idx=$(this).attr('data-index');
subMenu.removeClass('hide');
for(j=0;j<innerBox.length;j++)
{
innerBox.eq(j).css('display','none');
// menuItems.eq(j).css('background','none');
}
innerBox.eq(idx).css('display','block');
})
}
menu.mouseleave(function(){
subMenu.addClass('hide');
})
subMenu.mouseenter(function(){
$(this).removeClass('hide');
})
subMenu.mouseleave(function(){
$(this).addClass('hide');
})
}
// 切换图片
function changeImg(){
for(i=0;i<len;i++)
{
pics.eq(i).css({
'display':'none'
});
dots.eq(i).removeClass('active');
}
pics.eq(index).css({
'display':'block'
})
dots.eq(index).addClass('active');
}
slideImg();
})0
收起
正在回答
1回答
同学你好，经过测试，页面中的效果如下：
1、因为电脑分辨率的不同，可能效果在你的电脑上展示的时候是没有问题的，可是我的电脑分辨率比较大，所以效果中会出现空白。
例如：banner区域，当页面在分辨率比较大的电脑中打开的时候，里面内容宽度的总和没有铺满100%的宽度，所以导致效果中会出现留白的情况。
布局建议，例如banner区域：
先把banner区域看成一个整体，设置一个固定的宽度（例如：1200px），在通过margin：0 auto；让它整体居中显示。
banner区域分成三个内容快（左侧菜单、中间轮播图、右侧信息），通过浮动float来让它们在同一行去显示。
一般整体设置了固定的值，页面在不同浏览器显示的时候，基本上是没有太大的区别的。
建议同学可以参考一下老师的建议，所有主体的内容给固定的宽度，中间的内容的总和=主体的宽度。
例子代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#banner {
width: 1200px;
height: 700px;
border: 1px solid red;
margin: 50px auto;
}
#menu {
width: 300px;
height: 700px;
background: pink;
float: left;
position: relative;
margin-top: -50px;
}
#coursel {
width: 600px;
background: skyblue;
height: 700px;
float: left;
}
#info {
width: 300px;
background: orange;
height: 700px;
float: left;
}
</style>
</head>
<body>
<!-- banner整体 -->
<div id="banner">
<!-- 菜单 -->
<div id="menu"></div>
<!-- 轮播图 -->
<div id="coursel"></div>
<!-- 信息 -->
<div id="info"></div>
</div>
</body>
</html>其他区域也可以参照banner区域的建议来进行修改哦。
希望帮助到了你，祝学习愉快！
欢迎采纳！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星