未解决问题之前:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/1.css" >
<link rel="stylesheet" href="./icon/font_3216801_1jd55lusmmu/iconfont.css">
</head>
<body>
<!-- 头部 -->
<header>
<div class="left">
<img src="./images/images/未标题-1_01.gif">
</div>
<div class="right">
<ul>
<li class="iconfont icon-home2 "><p>Home</p></li>
<li class="iconfont icon-service"></li>
<li class="iconfont icon-line-computer"></li>
<li class="iconfont icon-computer"></li>
<li class="iconfont icon-good"></li>
<li class="iconfont icon-book"></li>
<li class="iconfont icon-wangluo"></li>
<li class="iconfont icon-wangluo"></li>
<li class="iconfont icon-icon-test"></li>
</ul>
</div>
</header>
</body>
</html>
css代码:
*{
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
}
ul,ol{list-style: none;}
/* 头部 */
header{
height: 80px;
position: relative;
/* background-color: aqua; */
}
/* 头部的左边 */
header>.left{
position: absolute;
left: 0px;
}
/* 头部的右边 */
header>.right{
min-width: 915px;
width: 915px;
/* height: 80px; */
position: absolute;
right: 0;
}
header>.right li{
width: 99px;
height: 80px;
float: left;
border-left: 1px solid #d7e4ed;
font-size: 32px;
color: #75a7c2;
text-align: center;
line-height: 80px;
}
用这种方法写成后,当页面放大后,会出现下面这种结果:
解决方法:
在css页面中加入:
body{
min-width: 1200px;
}