老师,麻烦检查一下作业
来源:3-8 自由编程
留神呐
2022-03-27 12:08:55
<!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> <!-- logo区域 --> <div class="logo"> <h1><img src="./images/logo.png" alt=""></h1> </div> <!-- 导航区域 --> <nav class="mian-nav"> <ul> <li>HOME</li> <li>ABOUT</li> <li>GALLERY</li> <li>FACULTY</li> <li>EVENTS</li> <li>CONTACT</li> </ul> </nav> </header> <!-- 主要内容 --> <main class="Content"> <!-- Banner区域 --> <section class="Banner"> <!-- Banner图片 --> <div class="banner-image"><img src="./images/banner3.jpg" alt=""></div> <!-- Banner遮罩层 --> <div class="banner-mask">banner遮罩层</div> <!-- Banner表单 --> <div class="banner-form">banner表单</div> </section> <!-- About区域 --> <div class="About"> <!-- About上半部分 --> <div class="about-up"> <h3>ABOUT</h3> <div>分割线</div> <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-down"> <div> <h4>A WORD ABOUT US</h4> </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> <div>explore</div> </div> <div> <img src="./images/bb3.jpg" alt=""> </div> <div> <h4>70000</h4> <div>分割线</div> <div>Students</div> </div> <div> <h4>600</h4> <div>分割线</div> <div>Faculty</div> </div> </div> </div> <!-- 图文混合排版区域 --> <div class="Image-And-Text"> <div class="img1"><img src="./images/b1.jpg" alt=""></div> <div class="text2"> <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>explore</div> </div> <div class="img3"><img src="./images/b2.jpg" alt=""></div> <div class="text4"> <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>explore</div> </div> <div class="text5"> <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>explore</div> </div> <div class="img6"><img src="./images/b3.jpg" alt=""></div> <div class="text7"> <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>explore</div> </div> <div class="img8"><img src="./images/b4.jpg" alt=""></div> </div> <!-- Gallery区域 --> <div class="Gallery"> <!-- Gallery上半部分 --> <div class="gallery-up"> <h3>Gallery</h3> <div>分割线</div> <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> <!-- Gallery下半部分 --> <div class="gallery-down"> <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> </main> <!-- 页脚 --> <footer> <p>© 2016 imooc.com 京ICP备13046642号</p> </footer> </body> </html>
1回答
同学你好,代码效果实现的很好,继续加油,祝学习愉快!
相似问题