banner区怎么把菜单设置居中？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4-3项目</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div class="head">
<div class="logo">
<img src="images/logo.png">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABAOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="banner">
<img src="images/banner3.jpg" class="banner-img">
<div class="message">
<ul>
<li><input type="text" name="" value="your Name"></li>
<li><input type="text" name="" value="your Phone"></li>
<li><input type="text" name="" value="your Email"></li>
<li><textarea value="Write You Comment Here"></textarea>
</li>
<li><input type="submit" value="SEND MESSAGE" name=""></li>
</ul>
</div>
</div>
<div class="about"></div>
<div class="GALLERY"></div>
</div>
<div class="foot">
</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图片的下方，不知道怎么调整到图片上
正在回答 回答被采纳积分+1
同学你好，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;*/
}如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星