为什么显示有问题 挤在一起了 但是ctrl 到80%就正常 是不是分辨率的问题啊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery慕淘网</title>
<link rel="stylesheet" type="text/css" href="css/慕淘网.css">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/慕淘网.js"></script>
</head>
<body>
<!-- 头部内容 -->
<div class="top" id="top">
<!-- 顶部 -->
<div class="front">
<p> <span><a href="">亲，请登录</a></span> <a href="">免费注册</a> <a href="">手机逛幕淘</a>
</p>
<ul>
<li class="front-list"><a href="">我的幕淘</a><img src="img/icon/21.png" alt=""></li>
<li class="front-list"><a href="">收藏夹</a><img src="img/icon/21.png" alt=""></li>
<li><a href="">商品分类</a></li>
<li class="front-list"><a href="">卖家中心</a><img src="img/icon/21.png" alt=""></li>
<li class="front-list"><a href="">联系客服</a><img src="img/icon/21.png" alt=""></li>
</ul>
</div>
<!-- 分割线 -->
<div class="hr"></div>
<!-- logo区 -->
<div class="logo">
<div class="picture"><a href=""><img src="img/logo.png" alt=""></a></div>
<div class="form">
<form>
<div><input type="text" placeholder=" 灵魂美食一元抢" class="input"></div>
<div><input type="button" value="搜索" class="button"></div>
</form>
</div>
<div class="buy">
<div class="car">
<img src="img/icon/26.png" alt="">
购物车
</div>
</div>
</div>
<!-- 导航 -->
<div class="nav-bg">
<div class="nav">
<ul>
<li></li>
<li></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>
<li><a href="">名品汇</a></li>
</ul>
</div>
</div>
</div>
<!-- 主体部分 -->
<div class="main" id="main">
<!-- banner区 -->
<div class="banner">
<div class="none"></div>
<div class="list">
<ul>
<li class="list-title"><img src="img/icon/18.png" alt="">商品分类</li>
<li class="other">家用电器 ></li>
<li class="other">手机、运营商、数码></li>
<li class="other">电脑、办公 ></li>
<li class="other">家居、家具、家装、厨具></li>
<li class="other">男装、女装、童装、内衣></li>
<li class="other">化妆、清洁、宠物 ></li>
<li class="other">
运动户外、钟表 >
</li>
<li class="other">
汽车、汽车用品 >
</li>
<li class="other">
母婴、玩具乐器 >
</li>
<li class="other">食品、酒类、生鲜、特产></li>
<li class="other">医药保健 ></li>
<li class="other">图书、音像、电子书 ></li>
<li class="other">彩票、旅行、充值、票务></li>
<li class="other">理财、众筹、白条、保险></li>
</ul>
</div>
<div class="lunbo">
<ul>
<li class="lunbo-img"><img src="img/focus-carousel/1.png" alt=""></li>
<li class="lunbo-img"><img src="img/focus-carousel/2.jpg" alt=""></li>
<li class="lunbo-img"><img src="img/focus-carousel/3.jpg" alt=""></li>
<li class="lunbo-img"><img src="img/focus-carousel/4.jpg" alt=""></li>
<li class="lunbo-img"><img src="img/focus-carousel/5.jpg" alt=""></li>
</ul>
</div>
<div class="news">
<div class="new">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="new-title"><span>幕快报</span> <a
href="">更多>></a></td>
</tr>
<tr>
<td><a href=""><span>[特惠]</span> 精选图书每满150减50</a></td>
</tr>
<tr>
<td><a href=""><span>[公告]</span> 因广州图书仓搬仓升级配送延迟</a></td>
</tr>
<tr>
<td><a href=""><span>[特惠]</span> 爆款手机12款免息 抽奖赢电视</a></td>
</tr>
<tr>
<td><a href=""><span>[公告]</span> 广东、福建受台风影响配送延迟</a></td>
</tr>
<tr>
<td><a href=""><span>[特惠]</span> 大闸蟹领券满399减180</a></td>
</tr>
<tr>
<td class="img02"><a href=""><img src="img/icon/1.png" alt=""><br>话费</a></td>
<td class="img02"><a href=""><img src="img/icon/2.png" alt=""><br>机票</a></td>
<td class="img02"><a href=""><img src="img/icon/3.png" alt=""><br>电影票</a></td>
<td class="img02"><a href=""><img src="img/icon/4.png" alt=""><br>游戏</a></td>
</tr>
<tr>
<td class="img02"><a href=""><img src="img/icon/5.png" alt=""><br>彩票</a></td>
<td class="img02"><a href=""><img src="img/icon/6.png" alt=""><br>加油卡</a></td>
<td class="img02"><a href=""><img src="img/icon/7.png" alt=""><br>酒店</a></td>
<td class="img02"><a href=""><img src="img/icon/8.png" alt=""><br>火车票</a></td>
</tr>
<tr>
<td class="img02"><a href=""><img src="img/icon/9.png" alt=""><br>众筹</a></td>
<td class="img02"><a href=""><img src="img/icon/10.png" alt=""><br>理财</a></td>
<td class="img02"><a href=""><img src="img/icon/11.png" alt=""><br>礼品卡</a></td>
<td class="img02"><a href=""><img src="img/icon/12.png" alt=""><br>白条</a></td>
</tr>
</table>
</div>
<div class="news-img">
<img src="img/ad.png" alt="">
</div>
</div>
</div>
<!-- 楼层区 -->
<div class="floor">
<div class="cloth">
<div class="cloth1">
<div><img src="img/floor/1.png" alt=""></div>
<div><img src="img/floor/1.png" alt=""></div>
<div><img src="img/floor/1.jpg" alt=""></div>
<div><img src="img/floor/1.jpg" alt=""></div>
<div><img src="img/floor/1.png" alt=""></div>
<div><img src="img/floor/1.png" alt=""></div>
</div>
<div class="cloth1">
<div><img src="img/floor/2.jpg" alt=""></div>
<div><img src="img/floor/2.jpg" alt=""></div>
<div><img src="img/floor/1.png" alt=""></div>
<div><img src="img/floor/1.png" alt=""></div>
<div><img src="img/floor/3.jpg" alt=""></div>
<div><img src="img/floor/3.jpg" alt=""></div>
</div>
</div>
<div class="beauty">
<div class="cloth1">
<div><img src="img/floor/5.jpg" alt=""></div>
<div><img src="img/floor/5.jpg" alt=""></div>
<div><img src="img/floor/5.jpg" alt=""></div>
<div><img src="img/floor/5.jpg" alt=""></div>
<div><img src="img/floor/5.jpg" alt=""></div>
<div><img src="img/floor/5.jpg" alt=""></div>
</div>
<div class="cloth1">
<div><img src="img/floor/1.png" alt=""></div>
<div><img src="img/floor/1.png" alt=""></div>
<div><img src="img/floor/1.png" alt=""></div>
<div><img src="img/floor/1.png" alt=""></div>
<div><img src="img/floor/1.png" alt=""></div>
<div><img src="img/floor/1.png" alt=""></div>
</div>
</div>
</div>
<!-- 分割线 -->
<div class="hr"></div>
<!-- 友情链接区 -->
<div class="com">
<div class="block">
<div class="title">消费者保障</div>
<div class="text"><a href="">保障范围</a> <a href="">退货退款流程</a> <a href="">服务中心</a></div>
<div class="text"><a href="">更多特色服务</a></div>
</div>
<div class="block">
<div class="title">新手上路</div>
<div class="text"><a href="">新手专区</a> <a href="">消费提示</a> <a href="">交易安全</a></div>
<div class="text"><a href="">24小时在线帮助</a> <a href="">免费开店</a></div>
</div>
<div class="block">
<div class="title">付款方式</div>
<div class="text"><a href="">快捷支付</a> <a href="">信用卡</a> <a href="">余额包</a> <a
href="">蜜蜂花啊</a></div>
<div class="text"><a href="">货到付款</a></div>
</div>
<div class="block">
<div class="title">幕淘特色</div>
<div class="text"><a href="">手机幕淘</a> <a href="">幕淘信</a> <a href="">大众评审</a> <a
href="">B格指南</a></div>
<div class="text"></div>
</div>
</div>
</div>
<!-- 页脚部分 -->
<div class="footer" id="footer">
<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>
<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>
<p>© 2016 imooc.com All Rights Reserved</p>
</div>
<!-- 右侧导航 -->
<div class="right" id="right">
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
font-family: "Microsoft YaHei UI";
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
body {
background-repeat: no-repeat;
}
/*顶部*/
.top {
background-color: #f3f5f7;
}
.front {
margin: 0 auto;
width: 1200px;
height: 50px;
overflow: hidden;
}
.front p {
height: 50px;
width: 400px;
float: left;
line-height: 50px;
}
.front p span a{
color: red;
}
.front a:hover {
color: red;
}
.front .front-list:hover {
background-color: white;
color: red;
}
.front ul {
width: 500px;
height: 50px;
float: right;
overflow: hidden;
}
.front ul li {
width: 100px;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
}
.hr {
width: 1200px;
margin: 0 auto;
height: 2px;
background-color: gray;
opacity: 0.3;
}
/*logo*/
.logo {
width: 1200px;
margin: 0 auto;
height: 100px;
overflow: hidden;
}
.logo .picture {
width: 250px;
height: 100px;
float: left;
}
.logo .picture img {
padding-left: 20px;
padding-top: 20px;
}
.logo .form {
width: 50%;
height: 100px;
float: left;
margin-top: 30px;
overflow: hidden;
}
.logo .form .input {
width: 550px;
height: 40px;
border: 2px solid gray;
opacity: 0.3;
color: black;
float: left;
}
.logo .form .button {
width: 80px;
height: 44px;
border: none;
background-color: #000;
color: #fff;
float: left;
cursor: pointer;
}
.logo .buy {
width: 25%;
height: 100px;
float: left;
margin-top: 30px;
}
.logo .buy .car {
width: 140px;
height: 40px;
background-color: red;
border: 2px solid red;
float: left;
margin-left: 20%;
}
.logo .buy .car:hover {
background-color: white;
color: red;
border-color: transparent;
}
/*导航*/
.nav-bg {
width: 100%;
height: 50px;
line-height: 50px;
background-color: #07111b;
}
.nav {
width: 70%;
margin: 0 auto;
height: 50px;
line-height: 50px;
}
.nav ul {
width: 60%;
overflow: hidden;
}
.nav ul li {
float: left;
width: 12.5%;
height: 50px;
text-align: center;
}
.nav ul li a:link {
color: white;
}
.nav ul li a:visited {
color: white;
}
.nav ul li a:hover {
color: red;
}
/*banner区*/
.banner {
width: 70%;
margin: 0 auto;
height: 500px;
overflow: hidden;
}
.banner .none {
width: 13.75%;
height: 500px;
float: left;
}
.banner .list {
width: 11%;
height: 555px;
position: absolute;
top: 147px;
left: 15%;
background-color: red;
z-index: 2;
opacity: 0.9;
}
.banner .list .list-title {
width: 100%;
height: 65px;
line-height: 65px;
}
.banner .list li {
color: white;
width: 100%;
height: 35px;
padding-left: 10px;
}
.banner .list .other:hover {
background-color: white;
color: red;
}
.banner .lunbo {
width: 60%;
height: 500px;
float: left;
overflow: hidden;
}
.banner .lunbo li {
float: left;
margin: 10px;
}
.banner .lunbo .lunbo-img {
width: 100%;
height: 100%;
text-align: center;
background-size: 100%;
}
.banner .news {
width: 26.25%;
height: 500px;
float: left;
padding-top: 10px;
}
.banner .news .new {
width: 100%;
height: 400px;
}
.banner .news .new table {
width: 100%;
height: 400px;
}
.banner .news .new table td {
width: 100%;
height: 30px;
}
.banner .news .new .new-title {
width: 100%;
height: 50px;
}
.banner .news .new .new-title span {
font-weight: bold;
font-size: 20px;
color: red;
}
.banner .news .new span {
font-weight: bold;
}
.banner .news .new a:link {
color: black;
}
.banner .news .new a:visited {
color: black;
}
.banner .news .new a:hover {
color: red;
}
.banner .news .new .img02 {
width: 25%;
height: 66px;
text-align: center;
border: 1px solid gray;
}
.banner .news .new .img02 img {
width: 32px;
height: 32px;
}
.banner .news .new .img02 a:link {
color: black;
}
.banner .news .new .img02 a:visited {
color: black;
}
.banner .news .new .img02 a:hover {
color: black;
}
.banner .news .news-img {
width: 100%;
height: 100px;
}
.banner .news .news-img img {
width: 100%;
height: 90px;
}
/*楼层区*/
.floor {
width: 70%;
margin: 0 auto;
height: 1200px;
}
.floor .cloth {
width: 100%;
margin: 0 auto;
height: 600px;
}
.floor .cloth1 {
width: 100%;
height: 250px;
overflow: hidden;
}
.floor div {
width: 16.66%;
height: 250px;
text-align: center;
float: left;
}
.floor .beauty {
width: 100%;
margin: 0 auto;
height: 600px;
}
/*友情链接区*/
.com {
width: 70%;
margin: 0 auto;
height: 200px;
line-height: 100px;
overflow: hidden;
}
.com .block {
width: 25%;
height: 200px;
float: left;
}
.com .block .title {
font-size: 20px;
font-weight: bold;
width: 100%;
height: 60px;
line-height: 60px;
padding-left: 20px;
padding-right: 15px;
padding-top: 20px;
}
.com .block .text {
width: 100%;
height: 40px;
line-height: 40px;
padding-left: 20px;
padding-right: 15px;
}
.com .block .text a:link {
color: black;
}
.com .block .text a:visited {
color: black;
}
.com .block .text a:hover {
color: red;
}
/*页脚*/
.footer {
width: 100%;
height: 150px;
line-height: 150px;
text-align: center;
background-color: #f3f5f7;
}
.footer ul {
width: 50%;
height: 50px;
margin: 0 auto;
overflow: hidden;
padding-top: 30px;
}
.footer ul li {
width: 9.09%;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
}
.footer ul li a:link {
color: black;
}
.footer ul li a:visited {
color: black;
}
.footer ul li a:hover {
color: #07111b;
}
.footer p {
width: 100%;
height: 70px;
line-height: 30px;
}
正在回答 回答被采纳积分+1
你好同学 , 在banner区域其他的盒子都是设置浮动 ,但是侧栏用定位 ,设置left的偏移 ,由于这个偏移值是百分比 , 分辨率比较大的时候 ,left百分比也会变大 , 就会和banner图片挤在一起了.如下可以测试 ,当百分比值越小 , 就不会和banenr挤在一起 ;
从上也能看出来 , 百分比会应该浏览器屏幕的宽度变化而变化 ,所以这里建议元素的宽度也要改成固定宽度.
调整思路如下:
大盒子设置固定宽度1200px ,并设置相对定位 ,这样侧栏可以参考其父元素定位
里面的三个小盒子都要设置固定宽度 ,(以下宽度只是示例 , 具体的值可以根据自己的作业适当调整)
banner区域设置一个左边距 , 应该设置左浮动它会紧贴在父元素左侧浮动 . 设置间距这被侧栏挡住 .
祝学习愉快 ,望采纳 .
你好同学 ,你描述的挤在一起指的是文字吗 ?老师测试缩小到80%的时候 ,页面中只有文字会排在一起 ,100%的时候文字会换行 .这个和分辨率有关系 ,在缩小的时候 ,文字的大小也变小了 , 所以你可以给页面中的文字设置一个比较小的字体 , 例如12px或者14px .另外, 老师先根据你提供的代码给出以下几点修改建议
1.搜索按钮挤到下边去了
代码中是给两个input设置了浮动 .但是input嵌套在div中 ,由于块级元素自占一行 ,所以它们并不会在一行显示 . 如下调整:
改为给div设置浮动:
还有大盒子设置宽度50%放不下 ,所以按钮还是会被挤下来
宽度可以去掉:
2.因为这里是使用表格布局 , 由于一个表格中一列td宽度是一样的 ,所以如下结构中 , 所以如下效果不是很合理 .
这里不建议使用表格布局 , 参考如下思路调整:
整体放在一个大盒子里面 ,然后里面放4个div ,分别放标题 , 列表 , 图标以及图片4部分
如下列表可以使用ul布局
如下图标盒子里面 ,每一组图标可以放在一个小盒子里面 ,小盒子设置浮动 .边框的实现可以先给整体的大盒子设置上边框和左边框 . 然后再给里面的小盒子设置下边框和右边框 .
希望能够帮到你 , 祝学习愉快 ,望采纳 .
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星