3-27自由编程，代码是否需要优化
来源：3-27 自由编程
easyschen
2021-11-16 11:34: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>Document</title> </head> <body> <div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <div class="banner"> <div class="pic"></div> <div class="mask"></div> <div class="input"></div> </div> <div class="about"> <h1>ABOUT</h1> <div class="description">XXXXXXXXXXXXXXX</div> </div> <div class="pics"> <div class="pic">1</div> <div class="words">2</div> <div class="pic">3</div> <div class="words">4</div> <div class="pic">5</div> <div class="words">6</div> <div class="pic">7</div> <div class="words">8</div> </div> <div class="gallery"> <h1>GALLERY</h1> <p>XXXXXXXXXXXXXX</p> </div> <div class="footer"> <p>©2020imooc.....</p> </div> </body> </html>
<!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>
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="banner">
<div class="pic"></div>
<div class="mask"></div>
<div class="input"></div>
</div>
<div class="about">
<h1>ABOUT</h1>
<div class="description">XXXXXXXXXXXXXXX</div>
</div>
<div class="pics">
<div class="pic">1</div>
<div class="words">2</div>
<div class="pic">3</div>
<div class="words">4</div>
<div class="pic">5</div>
<div class="words">6</div>
<div class="pic">7</div>
<div class="words">8</div>
</div>
<div class="gallery">
<h1>GALLERY</h1>
<p>XXXXXXXXXXXXXX</p>
</div>
<div class="footer">
<p>©2020imooc.....</p>
</div>
</body>
</html>
1回答
-
同学你好，代码优化如下：
1、建议在元素中加上文字，与效果图展示一致，例如补充部分
剩余的自己可以添加上。
2、about和gallery区域是分上下两部分的，不要丢掉下半部分，补充如下
3、图文混排区域第二行应该从文字开始，调整下位置
祝学习愉快！
0
相似问题