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

<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>

复制代码