图1是我做的图2是我想达到的效果，可是出了点问题，
<!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>illustrator</title>
<style type="text/css">
body h2{ margin: 0 auto;
margin-top: 10px;
width: 56.25rem;
height: auto;
border-radius: 12px;
text-align: center;
color: black;
}
span{display: inline-block;
margin: 1px 15px 5px 15px;
font-size: 20px;
}
p{
color:#5e2d00;
}
strong:hover {
color: red;
}
a{
text-decoration: none;
}
img{
border-radius: 11px;
box-shadow: 1px 5px 5px 5px 1px #cccccc;
}
dl{
margin: 0 auto;
width: 775px;
font-size: 23px;
text-decoration: none;
text-align: center;
}
dt{
margin-top: 2px;
float: left;
}
</style>
</head>
<body>
<a href="pagel.html"><h2>网页设计软件列表（点击查看）</h2></a>
<hr width="800px" size="5px" color="#5e2d00">
<span>
<span><a href="page2.html"><p><strong>Photoshop软件</strong></p></a>
</span>
<span>
<a href="page3.html"><p><strong>illustrator软件</strong></p></a>
</span>
<span>>
<a href="page4.html"><p><strong>Dreamweaver软件</strong></p></a>
</span>
<span>
<a href="page5.html"><p><strong>firework软件</strong></p></a>
</span>
<hr width="800px" size="5px" color="#5e2d00">
<img src="C:\Users\asus\Desktop\a9c6383ba37286481e43e08ac4ff215.jpg">
<dl>
<dt><img src="C:\Users\asus\Desktop\de828a9e8dacf57b2963038fe3287ae.jpg">Illustrator是一种用于出版,多媒体和在线图像的<font size="" color="#FF0000">标准矢量插画</font>的软件。</dt>
<dt><img src="C:\Users\asus\Desktop\de828a9e8dacf57b2963038fe3287ae.jpg"><font size="" color="#e0ba93"><b>Illustrator广泛应用于</b></font><font size="" color="#5E2D00"><b>印刷出版，海报书籍，</b></font><font size="" color="#e0ba93">专业插画，多媒体图像处理。</font></dt>
<dt><img src="C:\Users\asus\Desktop\de828a9e8dacf57b2963038fe3287ae.jpg">Illustrator可以为线稿提供较高的精度和控制，简单到复杂的项目都能产生。</dt>
<dt><img src="C:\Users\asus\Desktop\de828a9e8dacf57b2963038fe3287ae.jpg">根据不完全统计全球大约有37%的界面设计师在使用Illustrator进行设计。</font></dt>
</dl>
</body>
</html>
