请老师帮忙检查一下代码还有什么需要改进的
来源：2-17 自由编程
慕无忌6263944
2021-05-29 00:09: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="navbox">
<!-- 网站logo -->
<img class="logoimg" src="images/logo.png" alt="">
<!-- 网页的导航 -->
<nav>
<ul>
<li class="cur"><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 -->
<div class="banner">
<img class="banner-img" src="images/banner3.jpg" alt="">
<div class="banner-black">
<form action="" method="POST">
<input class="banner-input" type="text" placeholder="your Name"><br>
<input class="banner-input" type="text" placeholder="your Phone"><br>
<input class="banner-input" type="email" placeholder="your email"><br>
<textarea class="banner-textarea" name="" id="" cols="30" rows="10" placeholder="Write Your Comment Here"></textarea><br>
<button>SEND MESSAGE</button>
</form>
</div>
</div>
<!-- content区域 -->
<div class="content">
<div class="about">
<div class="about1 content-toppart">
<h2>ABOUT</h2>
<div class="separator"></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting <br> industry. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s.
</p>
</div>
<div class="about2">
<div class="about2-left">
<div class="about2-left-word">
<h2>A WORD ABOUT US</h2>
<div class="left-content">
<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>
<a href="#" class="contentbutton">EXPLORE</a>
</div>
</div>
<img class="about2-img" src="images/bb3.jpg" alt="">
</div>
<div class="about2-right">
<div class="rightbox">
<p class="rightnumber">70000</p>
<div class="separator"></div>
<p class="rightword">Students</p>
</div>
<div class="rightbox">
<p class="rightnumber">600</p>
<div class="separator"></div>
<p class="rightword">Faculty</p>
</div>
</div>
</div>
</div>
<!-- 图文部分 -->
<div class="img-word">
<img src="images/b1.jpg" alt="">
<div class="wordbox before-triangle">
<h3>Library</h3>
<p class="p-word1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p-word2">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>
<a href="#" class="contentbutton">EXPLORE</a>
</div>
<img src="images/b2.jpg" alt="">
<div class="wordbox before-triangle">
<h3>Library</h3>
<p class="p-word2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p-word2">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>
<a href="#" class="contentbutton">EXPLORE</a>
</div>
<div class="wordbox after-triangle">
<h3>Library</h3>
<p class="p-word1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p-word2">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>
<a href="#" class="contentbutton">EXPLORE</a>
</div>
<img src="images/b3.jpg" alt="">
<div class="wordbox after-triangle">
<h3>Library</h3>
<p class="p-word1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p-word2">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>
<a href="#" class="contentbutton">EXPLORE</a>
</div>
<img src="images/b4.jpg" alt="">
</div>
<!-- Gallery部分 -->
<div class="gallery">
<div class="gallery1 content-toppart">
<h2>GALLERY</h2>
<div class="separator"></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting <br>industry. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s.
</p>
</div>
<div class="gallery2">
<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>Kdis Play Ground</dd>
</dl>
</div>
</div>
</div>
<!-- footer部分 -->
<div class="footer">
© 2016 imooc.com 京ICP备13046642号
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
/* 去掉ul和ol的小圆点 */
ul {
list-style: none;
}
/* 去掉所有超级链接的下划线 */
a {
text-decoration: none;
}
body {
font: normal 14px/25px '微软雅黑' 'Times New Roman';
}
header {
height: 80px;
background: #07cbc9;
}
header .navbox {
width: 1200px;
height: 80px;
margin: 0 auto;
}
header .navbox img {
height: 48px;
margin: 16px 0;
}
header .navbox .logoimg {
float: left;
}
header .navbox nav {
float: right;
}
header .navbox nav ul {
width: 600px;
}
header .navbox nav li {
float: left;
text-align: center;
line-height: 80px;
margin-left: 20px;
}
header .navbox nav li.cur {
background-color: #9fd4ec;
}
header .navbox nav li a {
display: block;
height: 80px;
font-size: 16px;
color: white;
}
header .navbox nav li a:hover {
background-color: rgb(123, 218, 224);
}
/* banner区域样式 */
.banner {
width: 100%;
height: 600px;
position: relative;
}
.banner .banner-img {
width: 100%;
height: 600px;
}
.banner .banner-black {
width: 504px;
height: 330px;
position: absolute;
top: 100px;
left: 50%;
margin-left: -252px;
background: none;
}
.banner .banner-black .banner-input {
width: 500px;
height: 40px;
color: #808080;
margin-bottom: 10px;
background: rgba(0, 0, 0, 0.5);
border: 2px solid #808080;
}
.banner .banner-black .banner-textarea {
width: 500px;
height: 110px;
color: #808080;
margin-bottom: 10px;
background: rgba(0, 0, 0, 0.5);
border: 2px solid #808080;
}
.banner .banner-black button {
width: 200px;
height: 40px;
font-size: 16px;
font-family: '微软雅黑';
color: #808080;
background: rgba(0, 0, 0, 0.5);
border: 2px solid #808080;
position: absolute;
left: 50%;
margin-left: -100px;
}
/* content部分样式 */
.content {}
/* content分割线 */
.content .separator {
width: 60px;
height: 3px;
background: #07cbc9;
margin: 10px auto;
}
/* content按钮共同部分 */
.content .contentbutton {
display: block;
width: 140px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 20px;
color: white;
background-color: black;
margin-top: 30px;
}
/* content中about中上部分about1 和 Gallery部分中上部分gallery1 */
.content .content-toppart {
width: 100%;
padding-top: 30px;
}
.content .content-toppart h2 {
font-size: 32px;
text-align: center;
}
.content .content-toppart p {
text-align: center;
color: gray;
font-size: 14px;
}
/* about部分样式 */
.content .about {
width: 100%;
overflow: hidden;
}
/* about中about2部分样式 */
.content .about .about2 {
width: 1202px;
height: 435px;
position: relative;
left: 50%;
margin-left: -601px;
padding-top: 20px;
}
.content .about .about2 .about2-left {
float: left;
}
.content .about .about2 .about2-left .about2-left-word {
float: left;
}
.content .about .about2 .about2-left .about2-left-word h2 {
font-size: 32px;
width: 268px;
}
.content .about .about2 .about2-left .about2-left-word .left-content {
position: absolute;
margin-top: 20px;
padding: 20px;
width: 300px;
font-size: 18px;
border: 1px solid gray;
background: rgb(255, 255, 255, 0.5);
}
.content .about .about2 .about2-left .about2-img {
float: left;
width: 650px;
height: 435px;
}
.content .about .about2 .about2-right {
float: right;
}
.content .about .about2 .about2-right .rightbox {
width: 260px;
border: 1px solid #07cbc9;
text-align: center;
margin-bottom: 30px;
}
.content .about .about2 .about2-right .rightbox .rightnumber {
font-size: 28px;
font-weight: bold;
padding-top: 40px;
}
.content .about .about2 .about2-right .rightbox .rightword {
padding-bottom: 40px;
}
/* 图文部分 */
.content .img-word {
width: 100%;
height: 760px;
margin-top: 20px;
}
.content .img-word img {
width: 25%;
height: 380px;
float: left;
}
.content .img-word .wordbox {
width: 25%;
height: 380px;
background: #07cbc9;
float: left;
position: relative;
}
.content .img-word .before-triangle::before {
/* 左边框三角形部分 */
content: "";
width: 0;
height: 0;
border: 20px solid transparent;
border-right-color: #07cbc9;
position: absolute;
top: 170px;
left: -40px;
}
.content .img-word .after-triangle::after {
/* 右边框三角形部分 */
content: "";
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: #07cbc9;
position: absolute;
top: 170px;
right: -40px;
}
.content .img-word .wordbox h3 {
font-size: 24px;
color: white;
padding-top: 20px;
padding-left: 20px;
margin-bottom: 30px;
}
.content .img-word .wordbox .p-word1 {
font-size: 16px;
color: white;
padding-left: 20px;
margin-bottom: 20px;
}
.content .img-word .wordbox .p-word2 {
font-size: 14px;
color: gray;
padding-left: 20px;
margin-bottom: 30px;
}
.content .img-word .wordbox .contentbutton {
margin: 0 auto;
}
.content .gallery .gallery2 {
width: 1200px;
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
}
.content .gallery .gallery2 dl {
width: 400px;
height: 260px;
overflow: hidden;
position: relative;
float: left;
}
.content .gallery .gallery2 dl dt {
width: 360px;
height: 240px;
margin: 10px 20px;
}
.content .gallery .gallery2 dd {
display: block;
width: 360px;
height: 50px;
font-size: 16px;
line-height: 50px;
text-indent: 1em;
color: white;
background: rgb(0, 0, 0, 0.8);
position: absolute;
left: 20px;
bottom: 10px;
}
/* footer部分样式 */
.footer {
width: 100%;
height: 80px;
background: #07cbc9;
font-size: 18px;
text-align: center;
line-height: 80px;
margin-top: 30px;
}
写回答
1回答
-
同学你好，与习题2-17相关的代码可做如下改进：
1、content区域，上下两排的三角形很多样式是一样的，建议复用相同样式，从而简化代码：
2、content区域上的文字描述，建议设置左右对称的边距，否则文字会紧挨父元素右侧：
以标题h3为例，调整如下：
p-word1、p-word2的样式，同学自己调整一下。
其他区域需要优化的位置如下：
1、gallery区域，图片的文字描述并不是压在图片上的，而是在图片底下显示：
建议去掉文字描述的定位属性，如下：
此时图片与文字描述之间会有间隙：
原因是图片是行内元素，底部默认有间隙，可以将其转成块级元素去除间隙：
2、banner区的表单，背景色应该是透明的：
建议将其背景色设置成transparent，例如：
另外，表单区缺少黑色遮罩，即banner-img上面要有一个黑色半透明的遮罩，建议同学参考对应习题将其补全一下：https://class.imooc.com/lesson/1614#mid=40717。
提示：可以使用div制作遮罩，让其宽高与图片相同，定位到图片上，并设置黑色透明背景色。
祝学习愉快！
0
相似问题