老师，作业请检查
来源：2-18 自由编程
张艺兴的宝贝
2022-08-01 15:03:18
<!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> </head> <body> <!-- Header区域 --> <header> <div class="logo"> <img src="images/logo.png"> </div> <!-- 导航区域 --> <nav> <ul> <li>HOME</li> <li>ABOUT</li> <li>GALLERY</li> <li>FACULTY</li> <li>EVENTS</li> <li>CONTACT</li> </ul> </nav> </header> <!-- Banner区域 --> <section class="banner"> <img src="images/banner3.jpg"> <div class="mask">banner遮罩层</div> <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="Write Your Content Here"></textarea> <p> <input type="submit" value="SEND MESSAGE"> </p> </form> </section> <!-- About区域 --> <section class="about"> <h3>ABOUT</h3> <div class="up"> <p>分割线</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting<br> industry. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s. </p> <h4>A WORD<br> ABOUT US</h4> <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> </section> <!-- 图文混排区域 除了可以使用ul>li 标签外，还可以使用div标签 --> <section class="img-and-txt"> <!-- <ul type="none"> <li>图片1</li> <li>文字2</li> <li>图片3</li> <li>文字4</li> <li>图片5</li> <li>文字6</li> <li>图片7</li> <li>文字8</li> </ul> --> <div class="pic1"> <span>EXPLORE</span><br> <img src="images/bb3.jpg"> </div> <div class="word2"> <p>70000</p> <p>分割线<br>Students</p> <p>600</p> <span>分割线<br>Faculty</span> </div> <div class="pic3"> <img src="images/b1.jpg"> </div> <div class="word4"> <h4>Library</h4> <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> <div class="pic5"> <span>EXPLORE</span><br> <img src="images/b2.jpg"> </div> <div class="word6"> <h4>Library</h4> <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> <h4>Library</h4> <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> <div class="pic7"> <span>EXPLORE</span><br> <img src="images/b3.jpg"> </div> <div class="word8"> <h4>Library</h4> <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> <div class="pic9"> <span>EXPLORE</span><br> <img src="images/b4.jpg"> </div> </section> <!-- Gallery区域 --> <section class="gallery"> <h3>GALLERY</h3> <div class="up"> <p>分割线</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting<br> industry. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s.</p> </div> <div class="down"> <dl> <dt> <img src="images/03-01.jpg"> </dt> <dd>Science Lab</dd> </dl> <dl> <dt> <img src="images/03-02.jpg"> </dt> <dd>Indoor Stadium</dd> </dl> <dl> <dt> <img src="images/03-03.jpg"> </dt> <dd>Transpotation</dd> </dl> <dl> <dt> <img src="images/03-04.jpg"> </dt> <dd>Kids Room</dd> </dl> <dl> <dt> <img src="images/03-05.jpg"> </dt> <dd>Meditation Classes</dd> </dl> <dl> <dt> <img src="images/03-06.jpg"> </dt> <dd>Kids Play Ground</dd> </dl> </div> </section> <!-- footer页脚区域 --> <footer> <p>©2016 imooc.com 京ICP备13046642号</p> </footer> </body> </html>
写回答
1回答
-
好帮手慕慕子
2022-08-01
同学你好，针对本编程题的答案书写是正确的，不过，about区域和图文混排区域的代码结构划分比较混乱，建议同学参考前面的小节，重新划分一下，先搭建整体的结构，然后再填充内容。 祝学习愉快~
0
相似问题