交作业
来源：3-27 自由编程
慕哥1082855
2021-03-22 11:17:37
交作业
<!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>Document</title>
<meta name="Keywords" content="关键字1，关键字2，关键字3">
<meta name="Description" content="产品内容，吸引用户点击">
<style>
.header-nav>ul>li{
list-style: none;
}
</style>
</head>
<body>
<!-- Header区域 -->
<div class="header">
<!-- 左侧logo -->
<div class="header-left"><h1>logo</h1></div>
<!-- 右侧导航条 -->
<div class="header-nav">
导航区域
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!-- Banner区域 -->
<div class="banner">
<!-- 图片 -->
<div class="banner-img">banner图片</div>
<!-- 遮罩 -->
<div class="banner-mask">banner遮罩</div>
<!-- 表单 -->
<form action="" method="POST">
<input type="text" name="userName" placeholder="your Name"> <br>
<input type="text" name="phone" placeholder="your Phone"> <br>
<input type="email" name="email" placeholder="your Email"> <br>
<textarea name="comment" id="" cols="30" rows="10" placeholder="Write Your Comment Here"></textarea> <br>
<button type="submit">SEND MESSAGE</button>
</form>
</div>
<!-- About区域 -->
<div class="about">
<!--About 上半部分 -->
<div class="about-top">
<h2>ABOUT</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, et explicabo quidem corrupti at sequi ipsa tempore. Tenetur, labore ut maxime ducimus error beatae id inventore exercitationem, quas odit nihil.</p>
</div>
<!-- About 下半部分 -->
<div class="about-bottom">
<div class="about-bottom-left">About 下 左</div>
<div class="about-bottom-center">About 下 中 图片</div>
<div class="about-bottom-right">About 下 右</div>
</div>
</div>
<!-- 图文混排区域 -->
<div class="introduction">
<div>图片1</div>
<div>文字2</div>
<div>图片3</div>
<div>文字4</div>
<div>图片5</div>
<div>文字6</div>
<div>图片7</div>
<div>文字8</div>
</div>
<!-- Gallery区域 -->
<div class="gallery">
<div class="gallery-top">
<h2>GALLERY</h2>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex, corporis. Recusandae sed voluptates sunt sit ut, quas, ullam temporibus ipsum ipsa inventore ducimus ex aspernatur porro labore, maxime ad quaerat!</div>
</div>
<div class="gallery-bottom">
gallery下半部分
</div>
</div>
<!-- footer 页脚 -->
<div class="footer">
<p>
© 2016 imooc.com 京ICP备13046642号
</p>
</div>
</body>
</html>
1回答
-
好帮手慕久久
2021-03-22
同学你好，代码是对的，祝学习愉快！
0
相似问题