麻烦老师看一下代码有没有什么问题
来源：3-8 自由编程
Yuujio
2021-04-30 16:20:12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--header区域-->
<header>
<!--logo-->
<div class="logo">
<img src="images/logo.png">
</div>
<!--导航条-->
<nav>
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#gallety">GALLETY</a></li>
<li><a href="#faculty">FACULTY</a></li>
<li><a href="#events">EVENTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
</header>
<!--网页内容区-->
<div class="content">
<!--banner-->
<banner>
<div id="img"><img src="images/banner3.jpg"></div>
<div id="cover">banner遮罩层</div>
<div id="form">banner表单</div>
</banner>
<!--About-->
<div class="about">
<div id="about_top">
<h2>ABOUT</h2>
<p>分隔线</p>
<p>Lorem Ipsum is simply dummy text of theprinting and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div id="about_motton">
<div id="AWAU">
<h3>A WORD 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>EXPLORE</p>
<img src="images/bb3.jpg">
<p>70000</p><br>
<p>分隔线</p>
<p>Students</p><br>
<p>600</p><br>
<p>分隔线</p>
<p>Faculty</p>
</div>
<div id="library">
<img src="images/b1.jpg">
<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 id="computer lab">
<img src="images/b2.jpg">
<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>EXPLORE</p>
</div>
<div id="conference hall">
<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>EXPLORE</p>
<img src="images/b3.jpg">
</div>
<div id="play ground">
<h3>Play Ground</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>
<img src="images/b4.jpg">
</div>
<div id="gallery">
<h3>GALLERY</h3>
<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 id="science lab">
<figure>
<img src="images/03-01.jpg">
<figcaption>Science Lab</figcaption>
</figure>
</div>
<div id="indoor stadium">
<figure>
<img src="images/03-02.jpg">
<figcaption>Indoor Stadium</figcaption>
</figure>
</div>
<div id="transportation">
<figure>
<img src="images/03-03.jpg">
<figcaption>Transportation</figcaption>
</figure>
</div>
<div id="kids room">
<figure>
<img src="images/03-04.jpg">
<figcaption>Kids Room</figcaption>
</figure>
</div>
<div id="meditation classes">
<figure>
<img src="images/03-05.jpg">
<figcaption>Meditation Classes</figcaption>
</figure>
</div>
<div id="kids play ground">
<figure>
<img src="images/03-06.jpg">
<figcaption>Kids Play Ground</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<!--页尾-->
<footer>
<div class="footer">
<p>© 2016 imooc.com 京ICP备13046642号</p>
</div>
</footer>
</body>
</html>
写回答
1回答
-
同学你好，代码效果实现还可以，不过页面中About区域、图文混排区域以及Gallery区域这三部分的布局结构不太清晰，建议参考以下思路重新布局一下，便于后期代码编写，参考如下：
整体布局：
About区域布局：
图文混排区域布局：
Gallery区域布局：
祝学习愉快！
0
相似问题