麻烦老师帮忙检测一下，谢谢
来源：4-8 自由编程
芜湖呼
2021-08-06 17:06:06
<!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>
<input type="submit" value="SEND MESSAGE" />
</form>
</div>
</section>
<!-- About -->
<section class="about">
<!-- 上半部分 -->
<div class="upper">
<h3>ABOUT</h3>
<p class="border"></p>
<p class="text">
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">
<div class="left">
<h3>A WORD ABOUT US</h3>
<p>
<span
>Praesent dignissim viverra est, sed bibendum ligula congue non.
Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper
ipsum. Suspendisse diam amet.</span
>
<input type="submit" value="EXPLORE" />
</p>
</div>
<div class="pic1"><img src="images/bb3.jpg" alt="" /></div>
<div class="text">
<div class="text1">
<p class="textNum">70000</p>
<!-- <span>分割线</span><br /> -->
<p class="border"></p>
<span>Students</span>
</div>
<div class="text2">
<p class="textNum">600</p>
<!-- <span>分割线</span><br /> -->
<p class="border"></p>
<span>Faculty</span>
</div>
</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: 506px;
height: 390px;
top: 100px;
left: 50%;
margin-left: -253px;
}
.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;
display: block;
margin: 0 auto;
cursor: pointer;
}
.about .upper{
width: 100%;
margin-top: 30px;
}
.about .upper h3{
text-align: center;
font-size: 32px;
}
.about .upper .border{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.about .upper .text{
text-align: center;
color: gray;
font-size: 14px;
width: 450px;
margin: 0 auto;
}
.about .lower{
width: 1201px;
height: 464px;
padding-top: 30px;
margin: 0 auto;
position: relative;
}
.about .lower .left{
float: left;
width: 271px;
}
.about .lower .left h3{
font-size: 35px;
margin-bottom: 20px;
}
.about .lower .left p{
position: absolute;
top: 150px;
width: 300px;
padding: 20px;
border: 1px solid gray;
background: rgba(255, 255, 255, 0.5);
}
.about .lower .left p span{
font-size: 18px;
}
.about .lower .left p input{
margin-top: 20px;
width: 140px;
height: 40px;
background: #000;
color: white;
}
.about .lower .pic1{
float: left;
width: 650px;
height: 435px;
}
.about .lower .text{
float: right;
}
.about .lower .text .text1{
border: 1px solid #07cbc9;
width: 260px;
height: 70px;
margin-bottom: 30px;
padding: 40px 0;
}
.about .lower .text .text1 .textNum{
font-size: 28px;
font-weight: bold;
text-align: center;
}
.about .lower .text .text1 span{
display: block;
text-align: center;
}
.about .lower .text .text1 .border{
width: 60px;
height: 3px;
background: #07cbc9;
margin: 10px auto;
}
.about .lower .text .text2{
border: 1px solid #07cbc9;
width: 260px;
height: 70px;
padding: 40px 0;
}
.about .lower .text .text2 .textNum{
font-size: 28px;
font-weight: bold;
text-align: center;
}
.about .lower .text .text2 span{
display: block;
text-align: center;
}
.about .lower .text .text2 .border{
width: 60px;
height: 3px;
background: #07cbc9;
margin: 10px auto;
}
写回答
1回答
-
好帮手慕久久
2021-08-06
同学你好，效果正确，可做如下优化：
1、左侧按钮，有默认的边框，样式不好看：
建议去除：
2、左侧文字介绍，在html结构上，是处于div.left中：
那么让其相对于自己的父元素div.left定位，会更恰当：
.about .lower .left p的top值，同学自己调整一下。
3、右侧数字区，内容超出了设置的高度：
建议不设置固定高度，让高度由内容撑开：
4、数字区，.text1和text2样式是一样的，统一设置即可：
同理，里面的具体内容，样式也是一样的，同学自己复用、简化一下代码。
祝学习愉快！
0
相似问题
麻烦老师检查一下代码，谢谢
回答 2
麻烦老师帮忙看下代码是否有问题 谢谢
回答 1
麻烦老师检测一下，谢谢
回答 1
麻烦老师帮我检查一下，谢谢
回答 1
老师麻烦您帮忙看一下代码正确性和规范性
回答 1