请老师检查代码
来源：2-18 自由编程
wowawawoa
2021-01-24 14:09:49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Career Builder - Build Your Career</title>
<meta name="Keywords" content="career, builder">
<meta name="Description" content="With Career Builder, your career can be built.">
</head>
<body>
<!-- Header 区域 -->
<header>
<!-- logo -->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- 导航 -->
<nav class="main-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<!-- Banner区域 -->
<div class="banner">
<!-- 图片 -->
<div class="pic">
<img src="images/banner3.jpg" alt="">
</div>
<!-- 遮罩层 -->
<div class="masklayer">banner遮罩层</div>
<!-- 表单 -->
<div class="form">
<form action="" method="POST">
<input type="text" name="name" placeholder="your Name">
<input type="text" name="phone" placeholder="your Phone">
<input type="email" name="email" placeholder="your Email">
<textarea cols="30" rows="10" placeholder="Write Your Comment Here"></textarea><br/>
<input type="submit" value="SEND MESSAGE">
</form>
</div>
</div>
<!-- about区域 -->
<div class="about">
<!-- about区域上部分 -->
<div class="part1">
<!-- 标题 -->
<h2>ABOUT</h2>
<!-- 简短描述区域 -->
<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>
<!-- about区域下部分 -->
<div class="part2">
<!-- 详细描述区 -->
<h3>A WORD ABOUT US</h3>
<P>Praesent dignissim viverra est, sed bibendumligula congue non. Sed ac nisl et felis gravidacommodo? Suspendisse eget ullamcorper ipsum.Suspendisse diam amet.</P>
<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>
</div>
<!-- 图文混排区域 -->
<div class="pic-and-text">
<!-- 图片1 -->
<div class="img1">
<img src="images/b1.jpg" alt="">
</div>
<!-- 文字2 -->
<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>
<!-- 图片3 -->
<div class="img3">
<img src="images/b2.jpg" alt="">
</div>
<!-- 文字4 -->
<div class="text4">
<h3>Computer Lab</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>
<!-- 图片5 -->
<div class="img5">
<img src="images/b3.jpg" alt="">
</div>
<!-- 文字6 -->
<div class="text6">
<h3>Conference Hall</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>
<!-- 图片7 -->
<div class="img7">
<img src="images/b4.jpg" alt="">
</div>
<!-- 文字8 -->
<div class="text8">
<h3>Playground</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>
<!-- Gallery区域 -->
<div class="gallary">
<!-- Gallery上半部分 -->
<div class="part1">
<!-- 标题 -->
<h2>GALLERY</h2>
<!-- 简短描述区域 -->
<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>
<!-- Gallery下半部分 -->
<div class="part2">
<!-- 详细信息区 -->
<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>
<!-- 文字内容 -->
<p>©2016 imooc.com 京ICP备13046642号</p>
</footer>
</body>
</html>
写回答
1回答
-
好帮手慕慕子
2021-01-24
同学你好，代码实现是正确的，继续加油，祝学习愉快~
0
相似问题