网页制作中width：100% 在缩小窗口时候内容被截断或显示不全

登录

本帖最后由 yuhuofei15 于 2018-6-6 10:13 编辑

网页制作，使用div制作通栏的导航条，当宽度设置为100%，即width:100%时，当我们缩小浏览器窗口，这时候，导航条的右班部分会出现一片空白，这个问题怎么解决呢？浏览器全屏时，如下图1所示：

当缩小浏览器窗口时，如下图2所示：

lori棒棒糖 · 发表于 2018-6-6 17:57:21

你把所有代码全部复制粘贴上来看下

yuhuofei15 · 发表于 2018-6-10 10:38:29

lori棒棒糖发表于 2018-6-6 17:57
你把所有代码全部复制粘贴上来看下

<style>
*{ padding:0; margin:0;}
body{ font-family:"微软雅黑", "黑体", "宋体", Arial}
ul{ list-style:none;}
a{ text-decoration:none;}
.header{ height:56px; background:#ffd100; width:100%; }
.header .hd_con{ height:56px; width:1720px; margin:0 auto; text-align:center;}
.header .logo img{ width:113px; float:left; margin-top:18px;}
.header .nav{ display:inline-block; height:55px; float:left; margin-left:444px;}
.header .nav li{ float:left; position:relative;}
.header .nav li > a{ display:block; font-size:14px; line-height:56px; padding:0 25px; color:#000; font-weight:100;}
.header .nav li > a.active{ font-weight:900;}
.header .nav li:hover > a{ color:#ffd100; background:#000;}
.header .hd_con i{ width:65px; height:55px; display:block; float:left;}
.header .hd_con i.search{ margin-left:220px; background:url(images/search.png)}
.header .hd_con i.search:hover{ background-position:left 55px;}
.header .hd_con i.download{ background-image:url(images/download.png)}
.header .hd_con i.download:hover{ background-position:left 55px;}
.header .right{ width:145px; height:56px; float:right;}
.header .right a{ display:block; font-size:14px; float:left; width:70px; height:14px; line-height:14px; border-left:1px solid #000; margin-top:21px; color:#000;}
.header .nav li .down{ width:150px; background:#fff; position:absolute; top:56px; left:0; display:none; border-radius:0 0 5px 5px; box-shadow:0px 0px 10px rgba(0,0,0,0.5)}
.header .nav li .down a{ display:block; width:150px; height:45px; line-height:56px; color:#333; text-align:left; padding-left:20px; font-size:14px;}
.header .nav li:hover .down{ display:block;}
.header .nav li .down a:hover{ background:#ffd100;}
</style>
</head>
<body>
<div class="header">
<div class="hd_con">
<a href="#" class="logo"><img src="images/logo.png" /></a>
<ul class="nav">
<li><a href="#" class="active">首页</a></li>
<li><a href="#">发现</a>
<div class="down down_find">
<a href="#">职位</a>
<a href="#">公司</a>
<a href="#">+发布职位</a>
</div>
</li>
<li><a href="#">同城</a></li>
<li><a href="#">职位</a>
<div class="down down_position">
<a href="#">职位</a>
<a href="#">公司</a>
<a href="#">+发布职位</a>
</div>
</li>
<li><a href="#">活动</a>
<div class="down down_activity">
<a href="#">设计大赛</a>
<a href="#">专题策划</a>
<a href="#">线上活动</a>
<a href="#">线下活动</a>
</div>
</li>
<li><a href="#">正版素材</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">更多</a></li>
</ul>
<i class="search"></i>
<i class="download"></i>
<div class="right">
<a href="#" style="border:none">登录</a>
<a href="#">注册</a>
</div>
</div>
</div>
</body>

复制代码

yuhuofei15 · 发表于 2018-8-4 16:51:19

没有老师指导吗？

yuhuofei15 · 发表于 2018-10-22 16:47:03

已解决。

[提问] 网页制作中width：100% 在缩小窗口时候内容被截断或显示不全

本帖子中包含更多资源

共4个回复最后回复于 2018-10-22 16:47

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[提问] 网页制作中width：100% 在缩小窗口时候内容被截断或显示不全

本帖子中包含更多资源

共4个回复 最后回复于 2018-10-22 16:47

共4个回复最后回复于 2018-10-22 16:47