3-27作业
来源：3-27 自由编程
皮皮鲁l
2021-05-05 17:36:38
<!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">
<meta name="keywords" content="测试大学、环境优美、优质教师">
<meta name="description" content="一所百年大学">
<title>测试大学</title>
</head>
<body>
<!-- 头部 -->
<div class="header">
<!-- logo -->
<div class="logo">
<h1>Career Builder</h1>
</div>
<!-- 导航栏 -->
<div class="nav"></div>
</div>
<!-- 轮播图 -->
<div class="banner"></div>
<!-- 主体内容 -->
<div class="content">
<!-- 学校介绍 -->
<div class="about">
<!-- 文字描述 -->
<div class="about-des">
<h2>about</h2>
</div>
<!-- 图文介绍 -->
<div class="about-images">
<h2>A WORD</h2>
<h2>ABOUT US</h2>
</div>
</div>
<!-- 环境图片 -->
<div class="ad-images"></div>
<!-- gallery区域 -->
<div class="gallery">
<!-- 文字描述 -->
<div class="gall-des"></div>
<!-- 图片区域 -->
<div class="gall-images"></div>
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<h3>© 2016 imooc.com 京ICP备13046642号</h3>
</div>
</body>
</html>
1回答
-
同学你好，大体是对的，但是与效果图不太一致，可做如下优化：
1、banner区是由遮罩层、图片、表单三部分组成的，所以建议将结构对应写出来，如下：
2、about区分为上下两部分，结构调整如下：
3、图文混排（环境图片）可以按照效果图细化一下：
祝学习愉快！
0
相似问题