老师帮忙检查下，对吗？
来源：4-4 自由编程
梦小小
2021-02-22 12:16:08
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Career Builder</title>
<link rel="stylesheet" href="css/css.css"
</head>
<body>
<header>
<!--header-->
<!--logo-->
<div class="header-top">
<div class="logo">
<h1><img src="images/logo.png"alt=""></h1>
</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>
<aside>
<!--banner-->
<!--图片插入-->
<div>
<a href="">
<img src="images/banner3.jpg"alt="">
</a>
<div>
<div>banner遮盖层</div>
<!--表单-->
<div>
<form action=""method="">
<p>
<input type="text"placeholder="your Name">
<input type="number" placeholder="your Phone">
<input type="email" placeholder="your Email">
<textarea name="" id="" placeholder="write your comments here"
cols="30" rows="10"></textarea>
</p>
<p>
<input type="submit" value="SEND MESSAGE">
</p>
</form>
</div>
</aside>
<main>
<!--about-->
<section class="about">
<h2>ABOUT</h2>
<div>分割线<div>
<articl>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.</articl>
</section>
<section class="about us">
<h3>A WORD<h3>
<h3>ABOUT US</h3>
<articl class="wordbb3">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.
</articl>
<div>
<span>EXPLORE</span>
</div>
<div class="picbb3">
<a href="">
<img src="images/bb3.jpg"alt="">
</a>
</div>
<div class="wordb1">
<p>700000</p>
<p>分割线</p>
<p>students</p>
<p>600</p>
<p>分割线</p>
<p>Faculty</p>
</div>
<div class="picb1">
<a href="">
<img src="images/b1.jpg"alt="">
</a>
</div>
<div class="wordb2">
<h4>library</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>EXPLORE</p>
</div>
<div class="picb2">
<a href="">
<img src="images/b2.jpg"alt="">
</a>
</div>
<div class="wordb3">
<h4>library</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>EXPLORE</p>
<h4>library</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
<p>EXPLORE</p>
</div>
<div class="picb3">
<a href="">
<img src="images/b3.jpg"alt="">
</a>
</div>
<div class="wordb4">
<h3>library</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
<p>EXPLORE</p>
</div>
<div class="picb4">
<a href="">
<img src="images/b4.jpg"alt="">
</a>
</div>
</section>
<!--gallery-->
<section class="gallery"
<h4>GALLERY</h4>
<div class="wordb5">
<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 class="picb03-01">
<a href="">
<img src="images/03-01.jpg"alt="">
</a>
<p>Science Lab</p>
</div>
<div class="picb03-02">
<a href="">
<img src="images/03-02.jpg"alt="">
</a>
<p>Indoor Stadium</p>
</div>
<div class="picb03-03">
<a href="">
<img src="images/03-03.jpg"alt="">
</a>
<p>Transportation</p>
</div>
<div class="picb03-04">
<a href="">
<img src="images/03-04.jpg"alt="">
</a>
<p>Kids Room</p>
</div>
<div class="picb03-05">
<a href="">
<img src="images/03-05.jpg"alt="">
</a>
<p>Meditation Classes</p>
</div>
<div class="picb03-06">
<a href="">
<img src="images/03-06.jpg"alt="">
</a>
<p>Kids play Ground</p>
</div>
</section>
</main>
<!--页脚-->
<footer>
©2016 immooc.com 京ICP备13046642号
</footer>
</body>
</html>
css
*{
margin:0;
padding:0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
body{
font:normal 14px/27px '微软雅黑';
}
header {
background-color: #07cbc9;
}
header .header-top{
width:1200px;
height:80px;
margin:0 auto;
overflow:hidden;
}
header .header-top .logo{
width:260px;
height:48px;
float:left;
padding-top:16px;
padding-bottom: 16px;
}
header .header-top .logo h1{
color:white;
width:260px;
height:48px;
}
header .header-top .main-nav ul{
float:right;
width:600px;
height:80px;
margin:0 auto;
position:relative;
margin-left:0px;
margin-top:0px;
}
header .header-top .main-nav ul li{
float:left;
width:80px;
height:80px;
margin-left:20px;
line-height:80px;
}
header .header-top .main-nav ul li a{
display: inline-block;
width:80px;
height:80px;
font-size:16px;
color:white;
cursor:pointer;
}
header .header-top .main-nav ul li a:hover{
background-color:#00978E;
}
1回答
-
同学你好，由于给每个导航项li设置了固定的宽度，里面的文字内容是不同的，导致导航项之间的间距不同，如下图所示：
建议：去掉给ul和导航设置的固定宽度，让其由内容撑开宽度，然后给a链接设置左右内边距，调整文字间距。示例：
另外，link标签缺少结束的括号>，建议添加上，让代码更加规范。
祝学习愉快~
0
相似问题