老师，麻烦帮忙看一下代码是否正确、简洁、美观，显示效果达到作业要求。
来源：4-8 自由编程
ZcKing
2020-12-15 11:47:28
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul, ol {
list-style: none;
}
/* Header区域 */
header {
height: 80px;
background-color: #07cbc9;
}
header .header-area {
width: 1200px;
height: 80px;
margin: 0 auto;
}
header .header-area .logo {
float: left;
height: 48px;
margin-top: 16px;
margin-bottom: 16px;
}
header .header-area .main-nav {
float: right;
}
header .header-area .main-nav ul {
overflow: hidden;
}
header .header-area .main-nav ul li {
float: left;
/* margin-right: 20px; */ /* 老师建议多余去掉 */
}
header .header-area .main-nav ul li a {
display: inline-block;
padding: 0 20px;
height: 80px;
line-height: 80px;
font-size: 16px;
color: #ffffff;
}
/* Banner区域 */
.banner {
position: relative;
}
.banner .banner-pictures {
}
.banner .banner-pictures img {
width: 100%;
height: 600px;
display: block;
}
.banner .banner-mask {
width: 100%;
height: 600px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
}
.banner .banner-form {
width: 504px;
height: 400px;
position: absolute;
left: 50%;
margin-left: -252px;
top: 100px;
}
.banner .banner-form form {
}
.banner .banner-form form input {
width: 500px;
height: 40px;
display: block;
background: none;
color: #808080;
border: 2px solid #808080;
margin-bottom: 20px;
}
.banner .banner-form form textarea {
width: 500px;
height: 110px;
display: block;
background: none;
color: #808080;
border: 2px solid #808080;
margin-bottom: 20px;
}
.banner .banner-form form p {
text-align: center;
}
.banner .banner-form form p input {
display: inline-block;
width: 200px;
height: 40px;
background: none;
color: #808080;
border: 2px solid #808080;
}
/* About区域 */
.about {
width: 1200px;
margin: 0 auto;
margin-top: 20px;
}
/* about上半部分 */
.about .about-top-half-part h3 {
font-size: 32px;
text-align: center;
}
.about .about-top-half-part .about-top-half-part-division-line {
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.about .about-top-half-part .about-top-half-part-module-content {
width: 445px;
margin: 0 auto;
}
.about .about-top-half-part .about-top-half-part-module-content p {
text-align: center;
color: gray;
font-size: 14px;
}
/* 下半部分 */
.about .about-bottom-half-part {
margin-top: 30px;
overflow: hidden;
}
/* 小模块1 */
.about .about-bottom-half-part .about-bottom-half-part-module1 {
float: left;
width: 280px;
position: relative;
}
.about .about-bottom-half-part .about-bottom-half-part-module1 h2 {
width: 130px;
margin-bottom: 20px;
}
.about .about-bottom-half-part .about-bottom-half-part-module1 .content-and-explore {
/* 子绝父相对 */
/* 根据作业要求需要对图片进行遮盖且结合课程教学，目前最好的使用方式是绝对路径 */
position: absolute;
border: 1px solid gray;
background-color: rgba(255, 255, 255, 0.5);
}
.about .about-bottom-half-part .about-bottom-half-part-module1 .content-and-explore .content {
width: 300px;
padding: 20px;
font-size: 18px;
}
.about .about-bottom-half-part .about-bottom-half-part-module1 .content-and-explore .explore {
padding: 0 0 20px 20px;
}
.about .about-bottom-half-part .about-bottom-half-part-module1 .content-and-explore .explore input{
background-color: black;
color: white;
width: 140px;
height: 40px;
font-size: 20px;
}
/* 图片模块 */
.about .about-bottom-half-part .about-bottom-half-part-image {
width: 650px;
float: left;
}
/* 小模块2 */
.about .about-bottom-half-part .about-bottom-half-part-module2 {
float: right;
}
/* 小模块2 student */
.about .about-bottom-half-part .about-bottom-half-part-module2 .student {
width: 260px;
border: 1px solid #07cbc9;
margin-bottom: 30px;
padding: 40px 0;
}
.about .about-bottom-half-part .about-bottom-half-part-module2 .student h4 {
font-size: 28px;
font-weight: bold;
text-align: center;
}
.about .about-bottom-half-part .about-bottom-half-part-module2 .student .division-line {
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.about .about-bottom-half-part .about-bottom-half-part-module2 .student span {
display: block;
text-align: center;
font-size: 18px;
}
/* 小模块2 faculty */
.about .about-bottom-half-part .about-bottom-half-part-module2 .faculty {
width: 260px;
border: 1px solid #07cbc9;
padding: 40px 0;
}
.about .about-bottom-half-part .about-bottom-half-part-module2 .faculty h4 {
font-size: 28px;
font-weight: bold;
text-align: center;
}
.about .about-bottom-half-part .about-bottom-half-part-module2 .faculty .division-line {
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.about .about-bottom-half-part .about-bottom-half-part-module2 .faculty span {
display: block;
text-align: center;
font-size: 18px;
}
<!DOCTYPE html>
<html lang="en">
*****************************************************************************************************
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CarBuilder</title>
<meta name="Keywords" content="CarBuilder">
<meta name="Description" content="CarBuilder">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- Header区域 -->
<header>
<div class="header-area">
<!-- logo -->
<div class="logo">
<img src="./images/logo.png" alt="logo" />
</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>
<!-- Banner区域 -->
<section class="banner">
<!-- banner图片 -->
<div class="banner-pictures">
<img src="./images/banner3.jpg" />
</div>
<!-- banner遮罩层 -->
<div class="banner-mask">banner遮罩层</div>
<!-- banner表单 -->
<div class="banner-form">
<form action="" method="post">
<input type="text" placeholder="Your Name" />
<input type="text" placeholder="Your Phone" />
<input type="email" placeholder="your Email" />
<textarea rows="5" cols="50" placeholder="Write Your Comment Here"></textarea>
<p>
<input type="button" value="SEND MESSAGE" />
</p>
</form>
</div>
</section>
<!-- About区域 -->
<section class="about">
<!-- about上半部分 -->
<div class="about-top-half-part">
<h3>ABOUT</h3>
<div class="about-top-half-part-division-line"></div>
<div class="about-top-half-part-module-content">
<p>Lorem Ipsum is simply dummytext of the printing and typesetting industry.Lorem Ipsum has been the
industry's standarddummy text eversince the 1500s.</p>
</div>
</div>
<!-- about下半部分 -->
<div class="about-bottom-half-part">
<!-- 小模块1 -->
<div class="about-bottom-half-part-module1">
<h2>A WORD ABOUT US</h2>
<div class="content-and-explore">
<div class="content">
<p>Praesent dignissim viverra est,sed bibendum ligula congue non. Sed ac nisl et felisgravida
commodo?Suspendisse eget ullamcorper ipsum.Suspendisse diam amet.</p>
</div>
<div class="explore">
<input type="button" value="EXPLORE" />
</div>
</div>
</div>
<!-- 图片模块 -->
<div class="about-bottom-half-part-image">
<img src="./images/bb3.jpg" />
</div>
<!-- 小模块2 -->
<div class="about-bottom-half-part-module2">
<div class="student">
<h4>7000</h4>
<div class="division-line"></div>
<span>Students</span>
</div>
<div class="faculty">
<h4>600</h4>
<div class="division-line"></div>
<span>Faculty</span>
</div>
</div>
</div>
</section>
<!-- 图片和文字 -->
<section class="images-and-characters">
<!-- 图片1 -->
<div class="picture1">
<img src="./images/b1.jpg" />
</div>
<!-- 文字2 -->
<div class="character2">
<h5>Library</h5>
<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, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</p>
</div>
<!-- 图片3 -->
<div class="picture3">
<img src="./images/b2.jpg" />
</div>
<!-- 文字4 -->
<div class="character4">
<h5>Computer Lab</h5>
<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, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.</p>
</div>
<!-- 图片5 -->
<div class="picture5">
<img src="./images/b3.jpg" />
</div>
<!-- 文字6 -->
<div class="character6">
<h5>Conference Hall</h5>
<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, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.</p>
</div>
<!-- 图片7 -->
<div class="picture7">
<img src="./images/b4.jpg" />
</div>
<!-- 文字8 -->
<div class="character8">
<h5>Play Ground</h5>
<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, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.</p>
</div>
</section>
<!-- Gallery区域 -->
<div class="gallery">
<!-- Gallery上半部分(标题和简短描述区域) -->
<div class="gallery-top-half-part">
<h5>Gallery</h5>
<div class="division">分割线</div>
<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, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.</p>
</div>
<!-- Gallery下半部分(详细信息区域) -->
<div class="gallery-bottom-half-part">
<dl>
<dt><img src="./images/03-01.jpg" /></dt>
<dd>Science Lab</dd>
</dl>
<dl>
<dt><img src="./images/03-02.jpg" /></dt>
<dd>Indoor Stadium</dd>
</dl>
<dl>
<dt><img src="./images/03-03.jpg" /></dt>
<dd>Transportation</dd>
</dl>
<dl>
<dt><img src="./images/03-04.jpg" /></dt>
<dd>Kids Room</dd>
</dl>
<dl>
<dt><img src="./images/03-05.jpg" /></dt>
<dd>Meditation Classes</dd>
</dl>
<dl>
<dt><img src="./images/03-06.jpg" /></dt>
<dd>Kids Play Ground</dd>
</dl>
</div>
</div>
<!-- Footer区域（文字内容） -->
<div class="footer">
<p>©2016 imooc.com 京ICP备13046642</p>
</div>
</body>
</html>
1回答
-
好帮手慕张
2020-12-15
同学你好，代码是正确的，有两个优化的建议如下：
1、效果图中EXPLORE按钮没有边框，建议代码中也去掉，效果会美观一些，如下图：
2、另外同学粘贴的代码中多了下图圈中的符号，不知道是不是同学不小心碰到的，要删除掉。
祝学习愉快！
0h020-12-15
相似问题