请老师看一下代码是否正确
来源：4-4 自由编程
慕先生9380059
2021-05-31 18:18:19
问题描述：
请老师看一下代码是否正确
相关代码：
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">
<logo>
<img src="images/logo.png" alt="">
</logo>
<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="zhezhao"></div>
<div class="table">
<form action="">
<input type="text" placeholder="Yourname">
<input type="text" placeholder="Yourphone">
<input type="email" placeholder="Youremail">
<textarea cols="30" rows="10" placeholder="Write your comment"></textarea>
<input type="submit" value="SEND MESSAGE">
</form>
</div>
</section>
<!-- about区域 -->
<section class="about">
<div class="about-_header">
<h2>ABOUT</h2>
<p>分割线</p>
<!-- ABOUT描述部分 -->
<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>
<h2>A WORD ABOUT US</h2>
<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>
</div>
<p><a href="">explore</a></p>
<img src="images/bb3.jpg" alt="">
<p>70000</p>
<p>分割线</p>
<p>students</p>
<p>600</p>
<p>分割线</p>
<p>Faculty</p>
<!-- 图文混排区域 -->
<div class="about_main">
<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>
<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>
相关代码：
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 ul li {
float:right;
margin-right: 20px;
}
header .header-banner nav ul li a {
display: block;
font-size: 16px;
height: 8px;
line-height: 80px;
color:white
}
写回答
1回答
-
好帮手慕言
2021-05-31
同学你好，如下：
1、没有logo标签，建议：可以使用div标签实现，代码参考：
2、导航项的顺序与效果图不一致，HOME这项应该在最左侧，同学的代码效果如下：
建议：nav右浮动，li左浮动，代码参考：
３、a标签的高度设置的太小了，建议：高度可以调整大一些，代码参考：
4、没有lo标签，有ol标签，修改如下：
5、标签建议使用小写字母，代码参考：
6、footer的结束标签少了一个/，修改如下：
祝学习愉快~
0
相似问题