表单标签2-18自由练习
来源：2-18 自由编程
请老师大大检查作业
2021-11-11 16:35:19
<!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>Career Bulder</title>
</head>
<body>
<!-- 页面的头部 -->
<header class="header">
<!-- loge -->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- 导航 -->
<nav class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<!-- 页面的横幅 -->
<div class="banner">
<!-- 图片 -->
<div class="banner-images">
<img src="images/banner3.jpg" alt="">
</div>
<!-- 遮盖层 -->
<div class="banner-CL">
<p>banner遮盖层</p>
</div>
<!-- 表单 -->
<div class="form">
<form action="">
<input type="text" placeholder="your Name">
<input type="text" placeholder="your Phone">
<input type="email" placeholder="your Email">
<textarea cols="30" rows="10" placeholder="Wtite Your Comment Here"></textarea>
<p><button>SEND MESSAGE</button></p>
</form>
</div>
</div>
<!-- 页面的About区域 -->
<div class="About">
<!-- About的上部分 -->
<h2>ABOUT</h2>
<div class="About-up">
<p>分割线</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<!-- About的下部分 -->
<div class="About-lp">
<h3>A WORD</h3>
<h3>ABOUTUS</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>
<div>
<p>EXPLORE</p>
<img src="images/bb3.jpg" alt="">
</div>
<div>7000</div>
<p>分割线</p>
<p>Students</p>
<div>600</div>
<p>分割线</p>
<div>
<p>Faculty</p>
<img src="images/b1.jpg" alt="">
</div>
</div>
</div>
<!-- 图文混排区域 -->
<div class="Library">
<!-- 图片1 -->
<div class="images-a">
<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>
<img src="images/b2.jpg" alt="">
</div>
<!-- 文字2 -->
<div class="words-b">
<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><!-- 图片3 -->
<div class="images-c">
<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>
<img src="images/b3.jpg" alt="">
</div><!-- 文字4 -->
<div class="words-d">
<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>
<img src="images/b4.jpg" alt="">
</div>
</div>
<!-- 展览区域 -->
<div class="gallery">
<!-- 展览区域上部分 -->
<div class="gallery-up">
<h2>GALLERY</h2>
<P>分割线</P>
</div>
<!-- 展览区域下部分 -->
<div class="gallery-lp">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the </p>
<p>industry's standard dummy</p>
<p> text ever since the 1500s.</p>
<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 Paly Ground</dd>
</dl>
</div>
</div>
<!-- 页面的页脚 -->
<div class="footer">
<p>©2016imooc.com京ICP备13046642号</p>
</div>
</body>
</html>
1回答
-
好帮手慕然然
2021-11-11
同学你好，表单部分的代码实现基本没问题，有一点建议优化一下：建议给button按钮设置一下type="submit"属性，即表示该按钮类型为提交按钮，如下
另外，About区域的下半部分的布局不清晰，建议整体分为左中右结构，代码如下
左中右每个div盒子中的内容如下：
图文混排区域：建议图片和文字分别使用div包裹，不要混在一起写，不利于后期布局，代码如下
展览区域：建议将标题下面的文字放到展览区域上部分，这样划分比较合理，如图
祝学习愉快！
0
相似问题