老师怎么样才能使页面放大不重叠

老师怎么样才能使页面放大不重叠

《h't'm'l》

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>项目01</title>

<link rel="stylesheet" type="text/css" href="./css/项目01.css"/>

<script type="text/javascript" src="./js/项目01.js"></script>

</head>

<body>

<!-- 页眉 -->

<div class="header">

<img src="./img/logo.png"  class="header-img">

<ul>

<li><a href="#" target="_self">HOME</a></li>

<li><a href="#about" target="_self">ABOUT</a></li>

<li><a href="#" target="_self">GALLERY</a></li>

<li><a href="#" target="_self">FACULTY</a></li>

<li><a href="#" target="_self">EVENTS</a></li>

<li><a href="#" target="_self">CONTACT</a></li>

</ul>

</div>

</body>

</html>

《css》

*{

padding: 0px;

margin: 0px;

}

.header{

width: 100%;

position: fixed;

top: 0px;

background-color: #07CBC9;

}

.header .header-img{

margin-top: 20px;

margin-bottom: 20px;

margin-left: 150px;

}

.header ul{

margin-right: 150px;

float: right;

list-style: none;

}

.header ul li{

float: left;

margin-top: 35px;

margin-left: 5px;

z-index: 10;

}

.header ul li a{

text-decoration: none;

color: white;

font-weight: bolder;

padding-left: 20px;

padding-right: 20px;

}

.header ul li a:hover{

background-color: black;

padding-top: 35px;

padding-bottom: 35px;

}

http://img1.sycdn.imooc.com//climg/5e72193d0994558e19201030.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,使宽度设置成具体具体值,不设置成百分比即可。

如下举例:

http://img1.sycdn.imooc.com//climg/5e72d96a0969245e04950302.jpg

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

  • 慕移动9473914 提问者 #1
    老师,可是如果设置成具体值后那浏览器会显示处有一半空白的效果,要怎么样才能随浏览器或者显示屏的大小的变化而改变呢?
    2020-03-19 10:36:54
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师