2-17自由编程，麻烦看下下面dl dt dd 能否这样写
来源：2-17 自由编程
easyschen
2021-11-16 13:35:31
问题描述：
下面的gallery可以用dl dt dd来写吗？后面用css去调整位置？
相关代码：
<!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"> <ul> <li>HOME</li> <li>ABOUT</li> <li>GALLERY</li> <li>FACULTY</li> <li>EVENTS</li> <li>CONTACT</li> </ul> </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> <div> <dl> <dt>Science Lab</dt> <dd> <img src="" alt="">图片 </dd> </dl> <dl> <dt>Indoor Stadium</dt> <dd> <img src="" alt="">图片 </dd> </dl> <dl> <dt>Transportation</dt> <dd> <img src="" alt="">图片 </dd> </dl> <dl> <dt>Kids Room</dt> <dd> <img src="" alt="">图片 </dd> </dl> <dl> <dt>Meditation Classes</dt> <dd> <img src="" alt="">图片 </dd> </dl> <dl> <dt>Kids Play Ground</dt> <dd> <img src="" alt="">图片 </dd> </dl> </div> </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">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</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>
<div>
<dl>
<dt>Science Lab</dt>
<dd>
<img src="" alt="">图片
</dd>
</dl>
<dl>
<dt>Indoor Stadium</dt>
<dd>
<img src="" alt="">图片
</dd>
</dl>
<dl>
<dt>Transportation</dt>
<dd>
<img src="" alt="">图片
</dd>
</dl>
<dl>
<dt>Kids Room</dt>
<dd>
<img src="" alt="">图片
</dd>
</dl>
<dl>
<dt>Meditation Classes</dt>
<dd>
<img src="" alt="">图片
</dd>
</dl>
<dl>
<dt>Kids Play Ground</dt>
<dd>
<img src="" alt="">图片
</dd>
</dl>
</div>
</div>
<div class="footer">
<p>©2020imooc.....</p>
</div>
</body>
</html>
1回答
-
同学你好，头部整体结构分成两部分，左部分是logo，右部分是列表：
所以结构需要做如下调整：
问题解答如下：
gallery区域可以使用dl、dd、dt布局，后期我们会学css，可以用css将样式调整好。
祝学习愉快！
0
相似问题