请老师检查一下代码是否正确
来源：4-8 自由编程
慕先生9380059
2021-06-01 12:05:20
相关代码：CSS部分
*{
margin: 0;
padding: 0;
}
ul ,lo li{
list-style: none;
}
a {
text-decoration: none;
}
body {
font:normal 16px "微软雅黑";
}
header {
height: 80px;
background-color: #07cbc9;
}
header .header-banner {
width: 1200px;
margin: 0 auto;
}
header .header-banner .logo{
margin-top: 16px;
float: left;
margin-right: 300px;
}
header .header-banner nav {
float:right;
}header .header-banner nav ul li{
float: left;
margin-right: 20px;
}
header .header-banner nav ul li a {
display: block;
font-size: 16px;
height: 80px;
line-height: 80px;
color:white
}
.banner {
position: relative;
}
.banner .pic{
width: 100%;
height: 600px;
}
.banner .pic img {
width: 100%;
height: 600px;
}
.banner .shade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
background: rgba(0, 0, 0, .5);
z-index: 99;
}
.banner .table {
position: absolute;
width: 504px;
height: 600px;
left: 50%;
margin-left: -255px;
top: 0;
z-index:999;
}
.banner .table .public {
width: 500px;
height: 40px;
background: none;
margin-bottom: 15px;
border: 2px solid #808080;
color:#808080 ;
}
.banner .table .name {
margin-top: 100px;
}
.banner .table .send {
position: absolute;
left: 50%;
margin-left: -100px;
bottom:200px;
width: 200px;
height: 40px;
text-align: center;
font-size: 20px;
}
.about .about_header {
width: 500px;
margin: 0 auto;
}
.about .about_header h2{
text-align: center;
font-size: 32px;
margin-top: 30px;
}
.cut{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin:10px auto;
}
.about .about_header .des {
text-align: center;
font-size: 15px;
color: gray;
}
.about .about-body {
position: relative;
width: 1201px;
height: 464px;
margin: 0 auto;
margin-top: 30px;
overflow: hidden;
}
.about .about-body h2 {
width: 200px;
font-size: 30px;
}
.about .about-body .left {
float: left;
width: 260px;
position: relative;
}
.about .about-body .left .main {
position: absolute;
left: 0;
top:100px ;
width: 300px;
padding: 20px;
font-size: 18px;
background: rgba(255, 255, 255, .5);
border: 1px solid gray;
z-index: 999;
}
.about .about-body .left .main a {
display: block;
border: 1px solid black;
width: 138px;
height: 38px;
line-height: 38px;
margin-top: 30px;
text-align: center;
background-color: black;
color: white;
font-size: 25px;
}
.about .about-body .pic {
float: left;
width: 650px;
height: 435px;
z-index: 99;
}
.about .about-body .right {
float: right;
width: 260px;
height: 400px;
}
.about .about-body .right .top {
padding: 40px 0;
width: 260px;
height: 100px;
border: 1px solid skyblue;
margin-bottom: 30px;
text-align: center;
}
.about .about-body .right .number {
font-size: 28px;
font-weight: 700;
}
.about .about-body .right .bottom {
padding: 40px 0;
width: 260px;
height: 100px;
border: 1px solid skyblue;
text-align: center;
}
相关代码：HTML部分
<!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>小木医生</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<!-- Header区域 -->
<header>
<div class="header-banner">
<div class="logo">
<img src="images/logo.png" alt="">
</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">
<div class="pic">
<img src="images/banner3.jpg" alt="">
</div>
<div class="shade"></div>
<div class="table">
<form action="">
<input type="text" placeholder="Yourname" class="name public">
<input type="tel" placeholder="Yourphone" class="phone public">
<input type="email" placeholder="Youremail" class="mail public">
<textarea cols="30" rows="10" placeholder="Write your comment" class="comment public"></textarea>
<input type="submit" value="SEND MESSAGE" class="public send">
</form>
</div>
</section>
<!-- about区域 -->
<section class="about">
<div class="about_header">
<h2>ABOUT</h2>
<div class="cut"></div>
<!-- ABOUT描述部分 -->
<p class="des">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="about-body">
<div class="left">
<h2>A WORD ABOUT US</h2>
<div class="main">
<p class="des2">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis
gravida commodo?
Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
<p><a href="">explore</a></p>
</div>
</div>
<img src="images/bb3.jpg" alt="" class="pic">
<div class="right">
<div class="top">
<p class="number">70000</p>
<p class="cut"></p>
<p>students</p>
</div>
<div class="bottom">
<p class="number">600</p>
<p class="cut"></p>
<p>Faculty</p>
</div>
</div>
</div>
<!-- 图文混排区域 -->
<div class="about_main">
<div class="pic1">
<img src="images/b1.jpg" alt="">
</div>
<div class="text1">
<h3>Library</h3>
<p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry<br>
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>
<P><a href="">EXPLORE</a></P>
</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>
<P><a href="">EXPLORE</a></P>
</div>
<div class="pic3">
<img src="images/b3.jpg" alt="">
</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>
<P><a href="">EXPLORE</a></P>
</div>
<div class="pic4">
<img src="images/b4.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>
<P><a href="">EXPLORE</a></P>
</div>
</div>
</section>
<!-- gallery区域 -->
<section class="gallery">
<div class="gallery-header">
<h2>GALLERY</h2>
<div>
<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>
<div class="gallery-main">
<div>
<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 Clsases</dd>
</dl>
<dl>
<dt><img src="images/03-06.jpg" alt=""></dt>
<dd>Kids Play Ground</dd>
</dl>
</div>
</div>
</section>
<!-- footer区域 -->
<footer>
<div></div>
<footer>
</body>
</html>
写回答
1回答
-
好帮手慕然然
2021-06-01
同学你好，代码整体实现还是不错的，不过以下几点建议优化一下：
1、footer结束标签，缺少“/”，如图
2、右侧内容的右边框线被隐藏，如图：
原因：内层子盒子的宽度超出外层父盒子right的宽度，从而导致超出about-body盒子而被overflow:hidden隐藏，如图所示：
建议参考如下修改：
此段代码可优化：将相同样式代码合并书写，减少冗余，如图
祝学习愉快！
0
相似问题