请老师帮忙检查代码的规范性，并解决一个疑惑
来源：2-17 自由编程
hehe纷扬
2020-11-29 20:34:32
HTML部分如下：
<!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>
<div class="content">
<!-- 网页的logo -->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- 导航条 -->
<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">
<!-- 图片 -->
<img src="images/banner3.jpg" alt="">
<!-- 遮罩层 -->
<div class="layer">banner遮罩层</div>
<!-- 表单 -->
<form action="">
<input type="text" placeholder="your Name"><br>
<input type="text" placeholder="your Phone"><br>
<input type="email" placeholder="your Email"><br>
<textarea placeholder="Write Your Comment Here" cols="40" rows="5"></textarea><br>
<input type="submit" value="SEND MESSAGE">
</form>
</section>
<!-- 页面的主要内容 -->
<section class="content">
<!-- About区域 -->
<div class="about">
<!-- 标题 -->
<h2>ABOUT</h2>
<!-- 分割线 -->
<span class="separator"></span>
<!-- 简短描述 -->
<div class="desc-lite">
<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="desc-box">
<!-- 左侧文字 -->
<div class="left">
<h3>A WORD<br>ABOUT US</h3>
<!-- 详细描述 -->
<div class="desc-full">
<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>
<p class="btn">EXPLORE</p>
</div>
</div>
<!-- 中间的图片 -->
<img src="images/bb3.jpg" alt="">
<!-- 右侧数量 -->
<div class="right">
<div class="box">
<p class="num">7000000</p>
<!-- 分割线 -->
<span class="separator"></span>
<p>Students</p>
</div>
<div class="box">
<p class="num">600</p>
<!-- 分割线 -->
<span class="separator"></span>
<p>Faculty</p>
</div>
</div>
</div>
</div>
<!-- 图文混排区域 -->
<div class="pic-word-mix">
<img src="images/b1.jpg" alt="">
<div class="word arrow-left">
<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>EXPLORE</p>
</div>
<img src="images/b2.jpg" alt="">
<div class="word arrow-left">
<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>EXPLORE</p>
</div>
<div class="word arrow-right">
<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>EXPLORE</p>
</div>
<img src="images/b3.jpg" alt="">
<div class="word arrow-right">
<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>EXPLORE</p>
</div>
<img src="images/b4.jpg" alt="">
</div>
<!-- Gallery区域 -->
<div class="gallery">
<!-- 标题 -->
<h2>GALLERY</h2>
<!-- 分割线 -->
<span class="separator"></span>
<!-- 简短描述 -->
<div class="desc-lite">
<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="desc-full">
<ul>
<li>
<dl>
<dt>
<img src="images/03-01.jpg" alt="">
</dt>
<dd>Science Lab</dd>
</dl>
</li>
<li>
<dl>
<dt>
<img src="images/03-02.jpg" alt="">
</dt>
<dd>Indoor Stadium</dd>
</dl>
</li>
<li>
<dl>
<dt>
<img src="images/03-03.jpg" alt="">
</dt>
<dd>Transportation</dd>
</dl>
</li>
<li>
<dl>
<dt>
<img src="images/03-04.jpg" alt="">
</dt>
<dd>Kids Room</dd>
</dl>
</li>
<li>
<dl>
<dt>
<img src="images/03-05.jpg" alt="">
</dt>
<dd>Meditation Classes</dd>
</dl>
</li>
<li>
<dl>
<dt>
<img src="images/03-06.jpg" alt="">
</dt>
<dd>Kids Play Ground</dd>
</dl>
</li>
</ul>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<p>© 2016 imooc.com 京ICP备13046642号</p>
</footer>
</body>
</html>
CSS部分：
/* 清除默认样式 */
* {
padding: 0;
margin: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
/* 分割线 */
.separator {
/* 将span转换为块级元素 */
display: block;
width: 60px;
height: 3px;
background: #07cbc9;
margin: 10px auto;
}
/* 顶部样式 */
header {
height: 80px;
background-color: #07cbc9;
}
header .content {
width: 1200px;
margin: 0 auto;
}
header .content .logo {
float: left;
margin-top: 16px;
}
header .content nav {
float: right;
}
header .content nav ul li {
float: left;
}
header .content nav ul li a {
display: block;
color: #fff;
line-height: 80px;
margin-right: 20px;
}
/* banner区域 */
.banner {
width: 100%;
height: 600px;
position: relative;
}
.banner img {
width: 100%;
height: 600px;
}
.banner .layer {
width: 100%;
height: 600px;
position: absolute;
top: 0;
left: 0;
background:rgba(0, 0, 0, 0.5);
}
.banner form {
position: absolute;
left: 50%;
top: 100px;
width: 504px;
margin-left: -252px;
text-align: center;
}
.banner form input {
width: 504px;
height: 40px;
box-sizing: border-box;
margin-bottom: 20px;
background: none;
color: #808080;
border: 2px solid #808080;
}
.banner form input[type='submit'] {
width: 200px;
height: 40px;
margin-bottom: 0;
}
.banner form textarea {
width: 504px;
height: 110px;
box-sizing: border-box;
margin-bottom: 20px;
background: none;
border: 2px solid #808080;
}
/* 页面主要内容区域 */
.content {
margin: 30px 0;
}
.content .about {
width: 1200px;
margin: 0 auto;
}
.content .about h2 {
font-size: 32px;
text-align: center;
}
.content .about .desc-lite {
text-align: center;
color: gray;
font-size: 14px;
}
.content .about .desc-box {
width: 1201px;
height: 464px;
/* 相对定位 */
position: relative;
margin-top: 30px;
}
.content .about .desc-box .left {
float: left;
/* 绝对定位 */
position: absolute;
z-index: 999;
}
.content .about .desc-box .left h3 {
font-size: 28px;
line-height: 40px;
margin-bottom: 20px;
}
.content .about .desc-box .left .desc-full {
width: 300px;
padding: 20px;
font-size: 18px;
border: 1px solid gray;
background: rgba(255, 255, 255, 0.5);
}
.content .about .desc-box .desc-full .btn {
width: 140px;
height: 40px;
background: #000;
color: #fff;
text-align: center;
line-height: 40px;
margin-top: 25px;
}
.content .about .desc-box img {
width: 650px;
height: 435px;
float: left;
position: absolute;
top: 0;
left: 50%;
margin-left: -325px;
}
.content .about .desc-box .right {
float: right;
text-align: center;
}
.content .about .desc-box .right .box {
padding: 40px 60px;
border: 1px solid #07cbc9;
}
.content .about .desc-box .right .box:first-child {
margin-bottom: 30px;
}
.content .about .desc-box .right .box .num {
font-size: 28px;
font-weight: bold;
}
/* 图文混排区域 */
.content .pic-word-mix {
width: 100%;
height: 760px;
background-color: #07cbc9;
}
/* 向左的箭头 */
.content .pic-word-mix .arrow-left::before {
content: '';
display: block;
width: 0;
height: 0;
border: 20px solid transparent;
border-right-color: #07cbc9;
position: absolute;
left: -40px;
top: 50%;
margin-top: -20px;
}
/* 向右的箭头 */
.content .pic-word-mix .arrow-right::after {
content: '';
display: block;
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: #07cbc9;
position: absolute;
right: -40px;
top: 50%;
margin-top: -20px;
}
.content .pic-word-mix img {
float: left;
height: 380px;
width: 25%;
}
.content .pic-word-mix .word {
float: left;
height: 380px;
width: 25%;
/* 将间距计算在设定的宽度内 */
box-sizing: border-box;
padding: 20px;
/* 相对定位 */
position: relative;
}
.content .pic-word-mix .word h3 {
font-size: 24px;
color: #fff;
margin-bottom: 30px;
}
.content .pic-word-mix .word p:nth-of-type(1) {
font-size: 16px;
color: #fff;
margin-bottom: 20px;
}
.content .pic-word-mix .word p:nth-of-type(2) {
font-size: 14px;
color: gray;
margin-bottom: 30px;
}
.content .pic-word-mix .word p:nth-of-type(3) {
width: 138px;
height: 40px;
color: #fff;
text-align: center;
background-color: #000;
line-height: 40px;
margin: 0 auto;
}
/* gallery区域 */
.content .gallery {
width: 1200px;
margin: 0 auto;
margin-top: 30px;
}
.content .gallery h2 {
font-size: 32px;
text-align: center;
}
.content .gallery .desc-lite {
text-align: center;
color: gray;
font-size: 14px;
}
.content .gallery .desc-full {
width: 1200px;
height: 653px;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
.content .gallery .desc-full ul li dl {
float: left;
margin-right: 40px;
/* 相对定位 */
position: relative;
margin-bottom: 30px;
}
.content .gallery .desc-full ul li dd {
/* 绝对定位 */
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 360px;
line-height: 50px;
color: #fff;
background-color: #000;
padding-left: 20px;
box-sizing: border-box;
}
.content .gallery .desc-full ul li:nth-of-type(3) dl, .content .gallery .desc-full ul li:nth-of-type(6) dl {
margin-right: 0;
}
.content .gallery .desc-full ul li dl dt img {
width: 360px;
height: 290px;
}
/* 页脚 */
footer {
width: 100%;
height: 80px;
background-color: #07cbc9;
line-height: 80px;
text-align: center;
}
另外我还有一个疑惑：为什么浏览器窗口缩放后，页面头部的导航条会被直接截断呢？我看了参考代码好像也存在这个现象
1回答
-
同学你好，代码实现效果很棒，规范没有问题。
针对提问回复：
出现这种情况水平方向上应该出现了滚动条
这是因为顶部设置固定定位，宽度和浏览器视口一致，所以当出现滚动条的时候，滚动条多出的部分并不会延伸，就会有空白显示。
当前可以不考虑视口缩小的情况，能够在100%下显示即可，在后面移动端响应式布局中会有讲解，不要着急哦。
祝学习愉快！
0
相似问题
回答 1
回答 1
回答 1
回答 1
回答 1