这是自主编程的完成品，麻烦老师看一下代码规范性和正确性，谢谢！
来源：4-11 自由编程
ZcKing
2020-12-16 11:15:54
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
* {
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;
/* margin-right: 20px; */ /* 老师建议多余去掉 */
/* 把margin改为padding，让元素与内容有一些内间距更好 */
/* 假如后续要给导航设置鼠标移入样式，例如鼠标移入导航项时，背景色改变，那么文字与元素两侧没有间距是不太美观的 */
}
/* Banner区域 */
.banner {
position: relative;
}
.banner .banner-pictures {
}
.banner .banner-pictures img {
width: 100%;
height: 600px;
display: block; /* .banner .banner-pictures img{}设置为block, 就能自动撑开.banner{}和.banner .banner-pictures{}*/
}
.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;
}
/* 图片和文字 */
.images-and-characters {
margin-top: 20px;
width: 100%;
overflow: hidden;
}
/* 所有图片和文字盒子统一设置属性 */
.images-and-characters>div {
width: 25%;
height: 380px;
float: left;
background-color: #07cbc9;
}
/* 图片盒子中的图片进行设置 */
.images-and-characters>div img {
width: 100%;
height: 380px;
}
.images-and-characters>div.text .padding20 {
padding: 20px;
}
.images-and-characters>div.text .padding20 h5 {
font-size: 24px;
color: white;
margin-bottom: 30px;
}
.images-and-characters>div.text .padding20 p {
font-size: 14px;
color: gray;
margin-bottom: 10px;
}
.images-and-characters>div.text .padding20 p.title {
font-size: 16px;
color: white;
margin-bottom: 20px;
}
.images-and-characters>div.text input {
width: 138px;
height: 40px;
background-color: black;
color: white;
border: none;
font-size: 16px;
display: block;
margin: 0 auto;
}
/* Gallery区域 */
.gallery {
width: 1200px;
margin: 0 auto;
margin-top: 20px;
}
.gallery .gallery-top-half-part h5 {
text-align: center;
font-size: 32px;
}
.gallery .gallery-top-half-part .division {
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.gallery .gallery-top-half-part p {
display: block;
margin: 0 auto;
width: 700px;
font-size: 14px;
color: gray;
text-align: center;
}
.gallery .gallery-bottom-half-part {
padding: 20px;
overflow: hidden;
}
.gallery .gallery-bottom-half-part>dl {
width: 360px;
height: 290px;
float: left;
margin-right: 40px;
position: relative;
}
.gallery .gallery-bottom-half-part>dl:nth-child(3n + 3) {
margin-right: 0;
}
.gallery .gallery-bottom-half-part>dl dt img {
width: 360px;
height: 290px;
display: block;
}
.gallery .gallery-bottom-half-part>dl dd {
width: 340px;
height: 50px;
position: absolute;
bottom: 0;
line-height: 50px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding-left: 20px;
}
/* Footer区域（文字内容） */
.footer {
width: 100%;
height: 80px;
background-color: #07cbc9;
line-height: 80px;
text-align: center;
}
<!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 text">
<div class="padding20">
<h5>Library</h5>
<p class="title"> 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>
</div>
<input type="button" value="EXPLORE" />
</div>
<!-- 图片3 -->
<div class="picture3">
<img src="./images/b2.jpg" />
</div>
<!-- 文字4 -->
<div class="character4 text">
<div class="padding20">
<h5>Computer Lab</h5>
<p class="title">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been theindustry'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>
<input type="button" value="EXPLORE" />
</div>
<!-- 文字5 -->
<div class="character5 text">
<div class="padding20">
<h5>Conference Hall</h5>
<p class="title">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>
</div>
<input type="button" value="EXPLORE" />
</div>
<!-- 图片6 -->
<div class="picture6">
<img src="./images/b3.jpg" />
</div>
<!-- 文字7 -->
<div class="character7 text">
<div class="padding20">
<h5>Play Ground</h5>
<p class="title">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>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>
<input type="button" value="EXPLORE" />
</div>
<!-- 图片8 -->
<div class="picture8">
<img src="./images/b4.jpg" />
</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 oftype 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">©2016 imooc.com 京ICP备13046642</div>
</body>
</html>
1回答
-
好帮手慕张
2020-12-16
同学你好，代码正确没有问题，也很规范，非常棒，继续加油。祝学习愉快！
0
相似问题