3-8作业
来源：3-8 自由编程
慕工程1167523
2021-04-15 21:24:05
<!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>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
</head>
<body>
<!-- 头部 -->
<div class="header">
<!-- logo -->
<div class="logo">
<img src="images/logo.png" alt="Career Builder Logo">
</div>
<!-- nav -->
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLER</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!-- banner -->
<div class="banner">
<!-- banner 图片 -->
<div class="banner-images">
<img src="images/banner3.jpg" alt="banner">
</div>
<!-- banner 遮罩层 -->
<div class="banner-mask"></div>
<!-- banner 表单 -->
<div class="banner-form"></div>
</div>
<!-- about -->
<div class="about">
<!-- about 上半部分 -->
<div class="about-top">
<h2>ABOUT</h2>
<p>分割线</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry. Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
<!-- about 下半部分 -->
<div class="about-bottom">
<!-- 左边文案 -->
<div class="about-bottom-left">
<h3>A WORD</h3>
<h3>ABOUT US</h3>
<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><a href="">EXPLORE</a></p>
</div>
<!-- 中间图片 -->
<div class="about-bottom-pic">
<img src="images/bb3.jpg" alt="">
</div>
<!-- 右边文案 -->
<div class="about-bottom-right">
<div>
<p><b>700000</b></p>
<p>分割线</p>
<p>Students</p>
</div>
<div>
<p><b>600</b></p>
<p>分割线</p>
<p>Faculty</p>
</div>
</div>
</div>
</div>
<!-- 图文混合区 -->
<div class="image-text">
<!-- 图片1 -->
<div class="image-1">
<img src="images/b1.jpg" alt="Library">
</div>
<!-- 文字2 -->
<div class="text-2">
<h4>Library</h4>
<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="image-3">
<img src="images/b2.jpg" alt="Computer Lab">
</div>
<!-- 文字4 -->
<div class="text-4">
<h4>Library</h4>
<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="text-5">
<h4>Library</h4>
<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>
<!-- 图片6 -->
<div class="image-6">
<img src="images/b3.jpg" alt="Conference Hall">
</div>
<!-- 文字7 -->
<div class="text-7">
<h4>Library</h4>
<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>
<!-- 图片8 -->
<div class="image-8">
<img src="images/b4.jpg" alt="Play Ground">
</div>
</div>
<!-- Gallery -->
<div class="gallery">
<!-- Gallery 上半部分 -->
<div class="gallery-top">
<h2>GALLERY</h2>
<p>分割线</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry. Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
<!-- Gallery 下半部分 -->
<div class="gallery-bottom">
<dl>
<dt><img src="images/03-01.jpg" alt="Science Lab"></dt>
<dd>Science Lab</dd>
</dl>
<dl>
<dt><img src="images/03-02.jpg" alt="Indoor Stadium"></dt>
<dd>Indoor Stadium</dd>
</dl>
<dl>
<dt><img src="images/03-03.jpg" alt="Transportation"></dt>
<dd>Transportation</dd>
</dl>
<dl>
<dt><img src="images/03-04.jpg" alt="Kids Room"></dt>
<dd>Kids Room</dd>
</dl>
<dl>
<dt><img src="images/03-05.jpg" alt="Meditation Classes"></dt>
<dd>Meditation Classes</dd>
</dl>
<dl>
<dt><img src="images/03-06.jpg" alt="Kids Play Ground"></dt>
<dd>Kids Play Ground</dd>
</dl>
</div>
</div>
<!-- footer -->
<div class="footer">
<p>© 2016 imooc.com 京ICP备13046642号</p>
</div>
</body>
</html>
写回答
1回答
-
同学你好，代码实现基本没问题，结构很清晰，有处小细节建议优化一下，如图
祝学习愉快！
0
相似问题