老师帮忙看一下代码写的对吗 谢谢啦
来源:4-6 自由编程
幕布斯0094879
2020-11-06 16:09:54
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
在这里输入代码,可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
.header-nav {
height: 80px;
background-color: #07cbc9;
}
.header-nav .header-top {
height: 80px;
width: 1200px;
margin: 0 auto;
}
.header-nav .logo {
float: left;
line-height: 80px;
}
.header-nav .logo a {
color: #fff;
}
.header-nav ul {
float: right;
}
.header-nav ul li {
float: left;
line-height: 80px;
}
.header-nav ul li a {
font-size: 16px;
display: block;
color: #fff;
padding: 0 10px;
}
.header-nav ul li a:hover {
background-color: orange;
}
.main-banner {
width: 100%;
height: 600px;
}
.main-banner img {
width: 100%;
height: 600px;
}
.main-banner .transparent {
width: 100%;
height: 500px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 80px;
left: 0;
padding-top: 100px;
}
.main-banner .transparent form {
width: 504px;
height: 370px;
position: absolute;
left: 50%;
margin-left: -252px;
}
.main-banner .transparent form input {
display: block;
width: 504px;
border: 1px solid #808080;
background: none;
color: #808080;
}
.main-banner .transparent form input:first-child,
.main-banner .transparent form input:nth-child(2),
.main-banner .transparent form input:nth-child(3) {
height: 40px;
margin-bottom: 20px;
}
.main-banner .transparent form input:last-child {
width: 200px;
height: 40px;
margin: 20px auto 0;
cursor: pointer;
}
.main-banner .transparent form #bt {
width: 504px;
height: 110px;
background: none;
}
</style>
</head>
<body>
<div class="header-nav">
<div class="header-top">
<h1 class="logo"><a href="#">Career Builder</a></h1>
<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="main-banner">
<img src="C:\Users\zyc\Desktop\素材/banner3.jpg" alt="">
<div class="transparent">
<form action="">
<input type="text" placeholder="your name" name="username">
<input type="text" placeholder="your phone" name="telephone">
<input type="text" name="email" placeholder="your email">
<textarea name="" id="bt" cols="30" rows="10" placeholder="wirte your comment here"></textarea>
<input type="submit" value="SEND MESSAGE">
</form>
</div>
</div>
</body>
</html>
1回答
同学你好,有以下问题:
1、子元素的宽度溢出了父元素,如下:

原因:父元素的宽度为504px,子元素设置的宽度为504px,还有1px的边框,子元素的总宽度为504+2(左右边框)=506px,所以溢出了
建议:可以把父元素的宽度调整大一些,也可以把子元素的宽度调小一些,例如调小子元素的宽度:


2、为了更符合要求,建议:html可以调整一下,将form标签调整为遮罩的兄弟元素。
祝学习愉快~
相似问题
回答 1
回答 1
回答 1
回答 1
回答 2