老师，帮忙检查一下对不对
来源：4-4 自由编程
瑜瑜瑜
2021-01-01 21:34:10
* {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
a {
text-decoration: none;
}
header {
width: 100%;
height: 80px;
background-color: #07cbc9;
}
header .header {
width: 1200px;
height: 80px;
margin: 0 auto;
}
header .header .logo {
padding-top: 16px;
padding-bottom: 16px;
width: 260px;
height: 48px;
float: left;
}
header .header nav {
float: right;
}
header .header nav ul {
margin: 0 auto;
}
header .header nav ul li {
float: left;
line-height: 80px;
text-align: center;
margin-left: 20px;
}
header .header nav ul li a {
font-size: 16px;
color: #FFFFFF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外国语小学</title>
<meta name="Keywords" content="外国语小学">
<meta name="Description" content="外国语小学是一家集图书馆、计算机、游乐场、宿舍，教室于一体的封闭式小学">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- 网页的页头 -->
<header>
<div class="header">
<!-- 网页logo -->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- 导航区域 -->
<nav>
<ul>
<li>
<a href="">
<span>HOME</span>
</a>
</li>
<li>
<a href="">
<span>ABOUT</span>
</a>
</li>
<li>
<a href="">
<span>GALLERY</span>
</a>
</li>
<li>
<a href="">
<span>FACULTY</span>
</a>
</li>
<li>
<a href="">
<span>EVENTS</span>
</a>
</li>
<li>
<a href="">
<span>CONTACT</span>
</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- 网页的横幅 -->
<div class="banner">
<!-- banner图片 -->
<div class="banner-image">
<img src="images/banner3.jpg" alt="">
</div>
<!-- banner遮罩层 -->
<div class="banner-mask-layer">banner遮罩层</div>
<!-- banner表单 -->
<div class="banner-forms">
<form action="" method="POST">
<input type="text" placeholder="your Name">
<input type="text" placeholder="your Phone">
<input type="email" placeholder="your Email">
<textarea cols="50" rows="5" placeholder="Write Your Comment Here"></textarea><br>
<input type="submit" value="SEND MESSAGE">
</form>
</div>
</div>
<!-- 网页的about -->
<div class="about">
<!-- about上半部分 -->
<div class="the top">
<!-- 标题 -->
<div class="title">
<h2><b>ABOUT</b></h2>
</div>
<div>分割线</div>
<!-- 简要描述 -->
<div class="brier description">
<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>
</div>
<!-- about下半部分 -->
<div class="the bottom">
<!-- 详细描述 -->
<div class="xiangxi">
<div>
<p>
<h3><b><span>A WORD</span></b></h3>
</p>
<p>
<h3><b><span>ABOUT US</span></b></h3>
</p>
</div>
<div>
<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>
<a href="">
<span>EXPLORE</span>
</a>
</div>
<div>
<img src="images/bb3.jpg" alt="">
</div>
<div>
<p><span>70000</span></p>
<div>分割线</div>
<p>students</p>
</div>
<div>
<p><span>600</span></p>
<div>分割线</div>
<p>faculty</p>
</div>
</div>
</div>
</div>
<!-- 图文混排区 -->
<div class="tuwen">
<!-- 图片1 -->
<div class="pic 1">
<img src="images/b1.jpg" alt="">
</div>
<!-- 文字2 -->
<div class="des 2">
<h3><b><span>Library</span></b></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>
<div>
<a href=""><span>EXPLORE</span></a>
</div>
</div>
<!-- 图片3 -->
<div class="pic 3">
<img src="images/b2.jpg" alt="">
</div>
<!-- 文字4 -->
<div class="des 4">
<h3><b><span>Computer Lab</span></b></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>
<div>
<a href=""><span>EXPLORE</span></a>
</div>
</div>
<!-- 文字5 -->
<div class="des 5">
<h3><b><span>Conference Hall</span></b></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>
<div>
<a href=""><span>EXPLORE</span></a>
</div>
</div>
<!-- 图片6 -->
<div class="pic 6">
<img src="images/b3.jpg" alt="">
</div>
<!-- 文字7 -->
<div class="des 7">
<h3><b><span>Conference Hall</span></b></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>
<div>
<a href=""><span>EXPLORE</span></a>
</div>
</div>
<!-- 图片8 -->
<div class="pic 8">
<img src="images/b4.jpg" alt="">
</div>
</div>
<!-- Gallery区域 -->
<div class="gallery">
<!-- galleryt上半部分 -->
<div class="the top">
<!-- 标题 -->
<div class="title">
<h2><b>GALLERY</b></h2>
</div>
<div>分割线</div>
<!-- 简要描述 -->
<div class="brier description">
<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>
</div>
<!-- gallery下半部分 -->
<div class="the bottom">
<!-- 详细信息 -->
<div class="xiangxi">
<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>
</div>
<!-- 网页的页脚 -->
<footer>
<p>© 2016 imooc.com 京ICP备13046642号</p>
</footer>
</body>
</html>
1回答
-
同学你好，代码实现效果很棒。继续加油，祝学习愉快！
0
相似问题