我的header区代码是哪里出现了问题？实现不了效果，是不是浮动用错了？浮动该怎么用

来源：4-3 项目作业

M灬spirit

2020-02-28 16:14:25

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>项目网站</title>
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
	<div class="header">
		<div class="logo">
			<a href="logo-img"><img src="images\logo.png"></a>
		</div>
		<div class="daohang">
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">GALLERY</a></li>
				<li><a href="#">FACULTY</a></li>
				<li><a href="#">EVENTS</a></li>
				<li><a href="#">CONTACT</a></li>
			</ul>
		</div>
	</div>
	<div class="content"></div>
	<div class="footer"></div>
</body>
</html>

*{
	margin: 0px;
	padding: 0px;
}

.header {
	width: 1700px;
	background-color: #07cbc9;
	margin:25px auto;
	
}

.header .logo{
	float: left;
	position: relative;
	
}

.header .daohang{
	float: right;
	
}

.header .daohang ul li{
	color: white;
	float: left;
	margin-right: 70px;
	margin-top: 12px;
	list-style: none;
}

写回答

2回答

好帮手慕小班

2020-02-28

同学你好，1、position: fixed; 是相对于浏览器窗口进行定位偏移，也就是说当设置了fixed后，当前元素是相对于浏览器窗口进行的定位。

2、z-index可以设置元素的重叠顺序，z-index的值越高，就越不会被覆盖。

3、a标签是行内元素，不能设置宽、高等样式，设置为display: block; -->变为块元素后，就可以用设置边距等样式了，设置了a标签的字体颜色、内边距padding等值，能够让a标签更美观一些。

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

guly

2020-02-28

你好，建议参考代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>项目网站</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/common.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }

    .header {
        /*width: 1700px;*/
        /*background-color: #07cbc9;*/
        /*margin:25px auto;*/
        width: 100%;
        height: 80px;
        background-color: #07cbc9;
        position: fixed;
        z-index: 100;
        top:0px;
        line-height: 80px;

    }

    .header .logo{
        float: left;
        position: relative;
        margin-top: 15px;

    }

    .header .daohang{
        /*float: right;*/
        height: 80px;
        float: right;

    }
    .header .daohang li{
        color: white;
        float: left;
        margin-right: 30px;
        list-style: none;
        text-align: center;
    }
    .header .daohang li a{
        color: #FFFEFE;
        display: block;
        padding: 0 8px;
    }
    .header .daohang li a:hover{
        background: #000;
    }


</style>
</head>
<body>
<div class="header">
    <div class="logo">
        <a href="logo-img"><img src="images\logo.png"></a>
    </div>
    <div class="daohang">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">GALLERY</a></li>
            <li><a href="#">FACULTY</a></li>
            <li><a href="#">EVENTS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>

如果解决您的问题请采纳，祝学习愉快！

h灬spirit

h 想问一下.header的css设置为什么要为position: fixed;是在往下拉一直显示header区？还有为啥要设置这个z-index: 100;？还有这个代码设置什么的，不太清楚 .header .daohang li a{ color: #FFFEFE; display: block; padding: 0 8px; } 谢谢了

h020-02-28

共1条回复

0 学习 · 9666 问题

查看课程

相似问题

已经设置了两个左浮动了，还设置position是不是多余？

回答 1

老师使用float浮动后那么他的外间距是和哪个元素的？还是和浮动前一样吗？

回答 2

为什么我能够在about-middle里用overflow清除浮动，但是在banner里不行？

回答 2

我在about的下部分的文字用浮动会把图片往右挤开，这是为什么

回答 2

回答 3

打开慕课网App查看更多内容