banner区怎么把菜单设置居中？

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

<li>ABAOUT</li>

<li>GALLERY</li>

<li>FACULTY</li>

<li>EVENTS</li>

<li>CONTACT</li>

</ul>

</div>

<ul>

</li>

</ul>

</div>

</div>

</div>

</body>

</html>

margin: 0px;

padding: 0px;

/*消除浏览器的默认距离*/

}

.head{

width: 100%;/*设置与浏览器宽度一致*/

background: #07cbc9;

height: 50px;

}

/*设置logo区域*/

.head .logo{

margin-left: 50px;

height: 50px;

line-height: 50px;

}

/*设置菜单区域*/

.head .logo .menu{

float: right;

margin-right: 50px;

}

/*设置菜单中的选项*/

.head .logo .menu ul li{

float: left;

margin-right: 30px;

list-style: none;

height: 50px;

line-height: 50px;

color: white;

}

/*设置content区域*/

.content{

width: 100%;

}

/*设置banner区域*/

.content .banner{

width: 100%;

}

/*/*设置banner区域图片*/

.content .banner .banner-img{

float: left;

width: 100%;

height: 800px;

opacity: 0.4;

}

.content .banner .message{

/*float:left;*/

height: 100px;

width: 200px;

background: yellow;

/*margin-top: 50px;*/

}

.content .banner .message ul li{

/*float: left;*/

/*margin-top: 50px;*/

/*list-style: none;*/

/*overflow: hidden;*/

}

这样设置输入框在banner图片的下方，不知道怎么调整到图片上

视线模糊 2020-04-25

源自：前端油画商城案例 4-3 项目作业

收起

2回答

好帮手慕小尤 2020-04-27 09:47:59

同学你好，如果只为content设置了margin-top，则会导致上方留白，则需要为head设置top值避免留白。修改后代码如下所示：

具体代码，同学可复制粘贴上次回复的的代码。

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

收起回答

好帮手慕小尤 2020-04-26 10:47:20

同学你好，1. 导航未固定到顶部，建议同学设置为固定定位。修改后代码如下所示：

2. 鼠标滑过导航项时为改变背景色，建议同学使用:hover改变li标签的背景颜色。修改后代码如下所示：

3. 建议同学为message设置定位，使其子元素到图片只上。修改后代码如下所示：

*{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    /*消除浏览器的默认距离*/
}
 
.head{
    width: 100%;/*设置与浏览器宽度一致*/
    background: #07cbc9;
    height: 50px;
    position: fixed;
    z-index: 100;
    top:0px;
}
 
/*设置logo区域*/
.head .logo{
    margin-left: 50px;
    height: 50px;
    line-height: 50px;
}
 
/*设置菜单区域*/
.head .logo .menu{
    float: right;
    margin-right: 50px;
}
 
/*设置菜单中的选项*/
.head .logo .menu ul li{
    float: left;
    margin-right: 30px;
    list-style: none;
    height: 50px;
    line-height: 50px;
    color: white;
}
.head .logo .menu ul li:hover{
    background: #000;
}
/*设置content区域*/
.content{
    margin-top: 50px;
    width: 100%;
}
 
/*设置banner区域*/
.content .banner{
    width: 100%;
}
 
/*设置banner区域图片*/
.content .banner .banner-img{
    float: left;
    width: 100%;
    height: 800px;
    opacity: 0.4;
}
.content .banner .message{
    z-index: 2;
    width: 500px;
    position: absolute;
    top: 350px;
    margin-top:-150px;
    right: 50%;
    margin-right: -250px;
    text-align: center;
}
.content .banner .message ul li{
    /*float: left;*/
    /*margin-top: 50px;*/
    /*list-style: none;*/
    /*overflow: hidden;*/
 
}