老师帮我看下 谢谢

来源:2-7 编程练习

Rain_2020

2019-11-17 15:03:03

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>Document</title>

<style type="text/css">

*{margin: 0; padding: 0;}

dl{

width: 900px; height:360px;background: gainsboro;

margin: 30px auto;

}

dl dt{

font-size: 18px;

font-weight: bold;

font-family: "微软雅黑";

text-align: center;

padding: 10px 0;

color: #333;

}

dl dd{

width: 426px;

height: 360px;

margin-left:16px;

float: left;

}

dl dd img{

width: 426px;

height: 240px;

}

dl dd p{

width: 426px;

color: #666;

}


</style>

</head>

<body>

<dl>

<dt>标题内容</dt>

<dd>

<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg" alt="" />

<p>dsafweergc safopksof sdfksopekosf spoffaekkaopksv opdk fashgsadjaskg\;ksd;lakseksp kgdfkgp fkgdjsjg</p>

</dd>

<dd>

<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg" alt="" />

<p>dsafweergc safopksof sdfksopekosf spoffaekkaopksv opdk fashgsadjaskg\;ksd;lakseksp kgdfkgp fkgdjsjg</p>

</dd>

</dl>


</body>

</html>


写回答

1回答

好帮手慕夭夭

2019-11-17

同学你好,虽然效果实现了,但是建议把结构优化一下,参考如下:

结构划分标题不应该与下面的列表放在一个dl中。应该分成标题与列表两部分,标题可以使用h3标签。

http://img.mukewang.com/climg/5dd1073309c1b31104940246.jpg

代码修改如下:

结构如下调整

http://img.mukewang.com/climg/5dd10914097b68d809560467.jpg

样式如下调整


http://img.mukewang.com/climg/5dd10981093eba7507510869.jpg

http://img.mukewang.com/climg/5dd109a0097c906206340598.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0
hain_2020
h 老师 改好了 你看下 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .content { width: 1000px; margin: 0 auto; background: #eee; overflow: hidden; } dl { width: 460px; padding: 20px; float: left; } dl dt { font-size: 18px; font-weight: bold; font-family: "微软雅黑"; text-align: center; color: #333; } dl dd img { width: 100%; } h3 { text-align: center; background: #eee; width: 1000px; margin: 0 auto; padding: 20px 0 0 0; margin-top: 30px; } </style> </head> <body> <h3>标题内容</h3> <div class="content"> <dl> <dd> <img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg" alt="" /> <p>dsafweergc safopksof sdfksopekosf spoffaekkaopksv opdk fashgsadjaskg\;ksd;lakseksp kgdfkgp fkgdjsjg</p> </dd> </dl> <dl> <dd> <img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg" alt="" /> <p>dsafweergc safopksof sdfksopekosf spoffaekkaopksv opdk fashgsadjaskg\;ksd;lakseksp kgdfkgp fkgdjsjg</p> </dd> </dl> </div> </body> </html>
h019-11-17
共1条回复

0 学习 · 40143 问题

查看课程