表单那块儿感觉问题比较大，透明和居中都有问题

来源：4-3 项目作业

慕沐7264149

2020-01-06 22:51:06

<!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/js.js"></script>
</head>
<body>
<div class="header">
  <div class="logo"><img src="images/logo.png"></div>
  <div class="menu">
   <ul class="menulist">
    <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="body">
  <div class="banner">
   <img src="images/banner3.jpg" class="banner-image">
   <div class="registform">
    <input type="text" name="" placeholder="your Name"> <br>
    <input type="text" name="" placeholder="your Phone"> <br>
    <input type="text" name="" placeholder="your Email"> <br>
    <input class="commit" type="text" name="" placeholder="write your comments here"> <br>
    <input class="submit" type="button" name="" value="SEND MESSAGE">
   </div>
  </div>
</div>
<div class="foot"></div>
</body>
</html>

======================

*{
margin: 0px;
padding: 0px;
font-family: Microsoft YaHei UI;
}
.header {
background-color:#07cbc9;
height: 52px;
}

.header .logo {
float: left;
}
.header .menu {
float: right;
}
.header .menu .menulist{
list-style: none;
height: 52px;
line-height: 52px;
}
.header .menu .menulist li{
float: left;
margin-right: 15px;
font-weight: bold;
}
.header .menu .menulist li a{
color: #ffffff;
}
/*消除超链接的下划线*/
a{
text-decoration-line: none;
}
.body .banner {
height: 425px;
}
.body .banner .banner-image{
width: 100%;
height: 425px;
}
/*这个东西设置不了背景图片*/
.body .banner .registform{
position: absolute;
left: 37.5%;
top: 100px;
}

.body .banner .registform .commit{
width: 300px;
height: 140px;
}

.body .banner .registform .submit{
position: absolute;
left: 39%;
width: 100px;
height: 30px;
}
.body .banner .registform input{
border:2px solid white;
opacity: 0.3;
background-color: none;
color: #000;
width: 300px;
height: 28px;
margin-top: 5px;
}

写回答

1回答