老师，帮忙检查下。
来源：4-6 自由编程
梦小小
2021-02-22 23:04:52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Career Builder</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<header>
<!--header-->
<!--logo-->
<div class="header-top">
<div class="logo">
<h1><img src="images/logo.png" alt=""></h1>
</div>
<!-- 导航 -->
<nav class="main-nav">
<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>
</nav>
</div>
</header>
<section class="banner">
<!--图片插入-->
<div class="banner-img">
<img src="images/banner3.jpg" alt="">
</div>
<!-- 遮盖层 -->
<div class="mask"></div>
<!--表单-->
<form class="form" action="" method="">
<input class="name" type="text" placeholder="Your Name">
<input class="tel" type="number" placeholder="Your Phone">
<input class="mail" type="email" placeholder="Your Email">
<textarea class="msg" name="" id="" placeholder="Write your comments here" cols="30" rows="10"></textarea>
<input class="btn" type="submit" value="SEND MESSAGE">
</form>
</section>
<main>
<!--about-->
<section class="about">
<h2>ABOUT</h2>
<div>分割线<div>
<articl>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.</articl>
</section>
<section class="about us">
<h3>A WORD<h3>
<h3>ABOUT US</h3>
<articl class="wordbb3">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl
et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.
</articl>
<div>
<span>EXPLORE</span>
</div>
<div class="picbb3">
<a href="">
<img src="images/bb3.jpg" alt="">
</a>
</div>
<div class="wordb1">
<p>700000</p>
<p>分割线</p>
<p>students</p>
<p>600</p>
<p>分割线</p>
<p>Faculty</p>
</div>
<div class="picb1">
<a href="">
<img src="images/b1.jpg" alt="">
</a>
</div>
<div class="wordb2">
<h4>library</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>EXPLORE</p>
</div>
<div class="picb2">
<a href="">
<img src="images/b2.jpg" alt="">
</a>
</div>
<div class="wordb3">
<h4>library</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>EXPLORE</p>
<h4>library</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
<p>EXPLORE</p>
</div>
<div class="picb3">
<a href="">
<img src="images/b3.jpg" alt="">
</a>
</div>
<div class="wordb4">
<h3>library</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
<p>EXPLORE</p>
</div>
<div class="picb4">
<a href="">
<img src="images/b4.jpg" alt="">
</a>
</div>
</section>
<!--gallery-->
<section class="gallery" <h4>GALLERY</h4>
<div class="wordb5">
<p>分割线</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>
</div>
<div class="picb03-01">
<a href="">
<img src="images/03-01.jpg" alt="">
</a>
<p>Science Lab</p>
</div>
<div class="picb03-02">
<a href="">
<img src="images/03-02.jpg" alt="">
</a>
<p>Indoor Stadium</p>
</div>
<div class="picb03-03">
<a href="">
<img src="images/03-03.jpg" alt="">
</a>
<p>Transportation</p>
</div>
<div class="picb03-04">
<a href="">
<img src="images/03-04.jpg" alt="">
</a>
<p>Kids Room</p>
</div>
<div class="picb03-05">
<a href="">
<img src="images/03-05.jpg" alt="">
</a>
<p>Meditation Classes</p>
</div>
<div class="picb03-06">
<a href="">
<img src="images/03-06.jpg" alt="">
</a>
<p>Kids play Ground</p>
</div>
</section>
</main>
<!--页脚-->
<footer>
©2016 immooc.com 京ICP备13046642号
</footer>
</body>
</html>
css
*{
margin:0;
padding:0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
body{
font:normal 14px/27px '微软雅黑';
}
header {
background-color: #07cbc9;
}
header .header-top{
width:1200px;
height:80px;
margin:0 auto;
overflow:hidden;
}
header .header-top .logo{
width:260px;
height:48px;
float:left;
padding-top:16px;
padding-bottom: 16px;
}
header .header-top .logo h1{
color:white;
width:260px;
height:48px;
}
header .header-top .main-nav ul{
float:right;
/* 不建议写宽度会造成间隔不均 */
/* width:600px; */
height:80px;
margin:0 auto;
position:relative;
}
header .header-top .main-nav ul li{
float:left;
/* 不建议写宽度会造成间隔不均 让内容自然撑满 */
/* width:80px; */
height:80px;
margin-left:10px;
line-height:80px;
}
header .header-top .main-nav ul li a{
display: inline-block;
/* width:80px; */
/* 设置a链接左右内边距调整文字间距 */
padding:0 10px;
height:80px;
font-size:16px;
color:white;
cursor:pointer;
}
header .header-top .main-nav ul li a:hover{
background-color:#00978E;
}
.banner{
width:100%;
height:600px;
position:relative;
overflow:hidden;
}
.banner .banner-img{
width:100%;
height:600px;
position:absolute
}
.banner .mask{
width:100%;
height:600px;
background: rgba(0,0,0,0.5);
position:absolute
}
.banner .form{
width:504px;
height:390px;
position:absolute;
left:50%;
margin-top:100px;
margin-left:-252px;
margin-bottom: -110px;
text-align: center;
}
.banner .form .name{
display:block;
width:502px;
height:38px;
border:1px solid #808080;
margin-bottom:30px;
background:none;
}
.banner .form .tel{
display:block;
width:502px;
height:38px;
border:1px solid #808080;
margin-bottom:30px;
background:none;
}
.banner .form .mail{
display:block;
width:502px;
height:38px;
border:1px solid #808080;
margin-bottom:30px;
background:none;
}
.banner .form .msg{
display:block;
width:502px;
height:108px;
border:1px solid #808080;
margin-bottom:30px;
background:none;
}
.banner .form .btn{
display:block;
width:180px;
height:38px;
border:1px solid #808080;
margin-bottom:0px;
left:50%;
margin:0 auto;
background:none;
color:salmon;
}
1回答
-
同学你好，提交按钮的字体颜色可以设置为#808080，更符合任务要求一些，
优化如下：
祝学习愉快！
0
