麻烦老师帮我检查一下，谢谢
来源：4-6 自由编程
芜湖呼
2021-07-30 23:25:47
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="CSS/CSS.CSS" /> </head> <body> <!-- Header --> <header> <div class="header-top"> <!-- logo --> <div class="logo"> <img src="images/logo.png" alt="" /> </div> <!-- 导航 --> <nav> <ul> <li>HOME</li> <li>ABOUT</li> <li>GALLERY</li> <li>FACULTY</li> <li>EVENTS</li> <li>CONTACT</li> </ul> </nav> </div> </header> <!-- Banner --> <section class="banner"> <!-- 图片 --> <div class="pic"><img src="images/banner3.jpg" alt="" /></div> <!-- 遮罩层 --> <div class="mask"></div> <!-- 表单 --> <div class="form"> <form action=""> <input type="text" name="" id="" placeholder="your Name" /> <input type="text" name="" id="" placeholder="your Phone" /> <input type="email" name="" id="" placeholder="your Email" /> <textarea name="" id="" cols="30" rows="10" placeholder="Write Your Comment Here" ></textarea> <br /> <input type="submit" value="SEND MESSAGE" /> </form> </div> </section> <!-- About --> <section class="about"> <!-- 上半部分 --> <div class="upper"> <h3>ABOUT</h3> <p>分割线</p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </div> <!-- 下半部分 --> <div class="lower"> <h3>A WORD ABOUT US</h3> <p> Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet. </p> <span>EXPLORE</span> <div class="pic1"><img src="images/bb3.jpg" alt="" /></div> <div class="text1"> <p>70000</p> <span>分割线</span><br /> <span>Students</span> <p>600</p> <span>分割线</span><br /> <span>Faculty</span> </div> </div> </section> <!-- 图文混排 --> <section class="picAndText"> <div class="pic1"><img src="images/b1.jpg" alt="" /></div> <div class="text1"> <h3>Library</h3> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry </p> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <span>EXPLORE</span> </div> <div class="pic2"><img src="images/b2.jpg" alt="" /></div> <div class="text2"> <h3>Library</h3> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry </p> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <span>EXPLORE</span> </div> <div class="text3"> <h3>Library</h3> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry </p> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <span>EXPLORE</span> </div> <div class="pic3"><img src="images/b3.jpg" alt="" /></div> <div class="text4"> <h3>Library</h3> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry </p> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <span>EXPLORE</span> </div> <div class="pic4"><img src="images/b4.jpg" alt="" /></div> </section> <!-- Gallery区域 --> <div class="gallery"> <div class="upper"> <h3>GALLERY</h3> <p>分割线</p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </div> <div class="lower"> <dl> <dt><img src="images/03-01.jpg" alt="" /></dt> <dd>Science Lab</dd> </dl> <dl> <dt><img src="images/03-02.jpg" alt="" /></dt> <dd>Indoor Stadium</dd> </dl> <dl> <dt><img src="images/03-03.jpg" alt="" /></dt> <dd>Transportation</dd> </dl> <dl> <dt><img src="images/03-04.jpg" alt="" /></dt> <dd>Kids Room</dd> </dl> <dl> <dt><img src="images/03-05.jpg" alt="" /></dt> <dd>Meditation Classes</dd> </dl> <dl> <dt><img src="images/03-06.jpg" alt="" /></dt> <dd>Kids Play Ground</dd> </dl> </div> </div> <!-- Footer区域 --> <div class="footer"><p>©2016 imooc.com 京ICP备13046642号</p></div> </body> </html>
*{
margin: 0;
padding: 0;
}
ul, ol{
list-style: none;
}
header{
background:#07cbc9;
height: 80px;
}
header .header-top{
width: 1200px;
height: 80px;
margin:0px auto;
}
header .header-top .logo{
float:left;
height: 48px;
padding:16px 0px;
}
header .header-top nav{
float: right;
}
header .header-top nav ul{
/* width: 503px; */
height: 80px;
}
header .header-top nav ul li{
float: left;
padding-left: 20px;
color: white;
font-size: 16px;
line-height: 80px;
text-align: center;
}
.banner{
width: 100%;
height: 600px;
position:relative;
}
.banner .pic img{
width: 100%;
height: 600px;
}
.banner .mask{
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 600px;
}
.banner .form{
position: absolute;
/* background: white; */
width: 504px;
height: 390px;
top: 100px;
left: 50%;
margin-left: -252px;
}
.banner .form input,textarea{
background: none;
color: #808080;
border: 1px solid #808080;
}
.banner .form input{
width: 504px;
height: 40px;
margin-bottom: 20px;
}
.banner .form textarea{
width: 504px;
height: 110px;
margin-bottom: 20px;
}
.banner .form input[type="submit"]{
width: 200px;
height: 40px;
position: absolute;
left: 50%;
margin-bottom: 0px;
margin-left: -100px;
cursor: pointer;
}写回答
1回答
-
好帮手慕星星
2021-07-31
同学你好，代码优化如下：
1、form表单宽度有点不够
需要考虑到input边框问题，加2px即可，参考：
2、多文本框已经设置了下边距，与和按钮之间的br换行可以去掉。按钮设置定位样式复杂了，可以转化为块元素，用margin: 0 auto;实现居中
祝学习愉快！
1
相似问题