老师帮我看下 谢谢
来源: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回答
同学你好,虽然效果实现了,但是建议把结构优化一下,参考如下:
结构划分标题不应该与下面的列表放在一个dl中。应该分成标题与列表两部分,标题可以使用h3标签。
代码修改如下:
结构如下调整
样式如下调整
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
相似问题