太艰难了请老师一点点检查
/*在整体布局设定*/
*{
margin:0px;
padding:0px;
}
body{
font-size:14px;
background-color:#fff;
font-family:Microsoft YaHei UI;
}
a{
text-decoration:none;/*去掉下划线*/
color:#fff;
}
/*header区*/
.header{
/*border:solid 1px;*/
margin:25px auto;
width:100%;
background-color:#07cbc9;
height:80px;
}
.header .logo{
/*border:solid 1px;*/
float:left;
position:absolute;
margin:13px 5%;
}
.header .menu-title{
/*border:solid 1px;*/
position:relative;
float:right;
margin:28px 5%;
}
.header .menu-title ul{
/*border:solid 1px;*/
list-style:none;
position:relative;
}
.header .menu-title ul li{
/*border:solid 1px;*/
float:left;
margin-right:15px;
}<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>作业网站</title> <link rel="stylesheet" type="text/css" href="css/common.css"> </head> <body> <div class="header"> <div class="logo"> <img src="images/logo.png"> </div> <div class="menu-title"> <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 class="banner"> </div> <div class="about"> </div> <div class="gallery"> </div> </div> <div class="footer"> </div> </body> </html>
请老师指正不对的地方
14
收起
正在回答
2回答
同学你好，测试代码发现header距离顶部有一点距离，如：
这里不需要设置margin，建议去掉。另外建议将header固定在浏览器顶部，修改后的代码，如：
关于鼠标放在导航栏上，背景色改变，建议改变文字部分整体背景色，如：
建议给menu-title设置行高80px，使其和header高度一致，这里li的高度就是header的高度，不需要设置margin，如：
另外建议给li设置padding，而不是margin，使其在每个导航项上无缝切换，如：
祝：学习愉快~
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星