老师，您好，check pls， thanks a lot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
section{
width: 1200px;
height: 473px;
margin: 43px auto;
border: 1px solid red;
}
h1{
font-size: 30px;
margin-top: 18px;
margin-bottom: 18px;
}
section h1 samp{
font-size: 30px;
color: #7c7c7c;
}
aside{
float: left;
width: 450px;
}
article{
float: right;
width: 700px;
}
dl{
position: relative;
height: 74px;
display: block;
margin-bottom: 17px;
margin-left: 20px;
}
dt{
position: absolute;
left: 82px;
top: 0;
font-size: 20px;
line-height: 20px;
}
dd:first-of-type{
position: absolute;
left: 0;
top: 0;
}
dd:last-of-type{
position: absolute;
top: 30px;
left: 82px;
font-size: 16px;
}
p{
margin-bottom: 20px;
}
p img{
width: 100%;
height: 150px;
}
</style>
</head>
<body>
<section>
<aside>
<h1>
Recent <samp>curse</samp>
</h1>
<dl>
<dt> 网页中的主体部分，分为左右两部分。</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>网页中的主体部分，分为左右两部分。提示：使用section、aside、article结构标签</dd>
</dl>
<dl>
<dt> 网页中的主体部分，分为左右两部分。</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>网页中的主体部分，分为左右两部分。
提示：使用section、aside、article结构标签</dd>
</dl>
<dl>
<dt> 网页中的主体部分，分为左右两部分。</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>网页中的主体部分，分为左右两部分。
提示：使用section、aside、article结构标签</dd>
</dl>
<dl>
<dt> 网页中的主体部分，分为左右两部分。</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>网页中的主体部分，分为左右两部分。
提示：使用section、aside、article结构标签</dd>
</dl>
</aside>
<article>
<h1>welconme to <samp>open the browser</samp></h1>
<p>网页中的主体部提示：使用sectielconme to open the broon、aside、article结构标分，分为左右两部分。</p>
<p><img src="http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg" ></p>
<p>提示：使用se提示提示：使用sectielconme to open the broon、aside、article结构标：使用sectielconme to open the broon、aside、article结构标ctielconme to open the broon、aside、article结构标签</p>
<p>网页中的elconme 提示：使用sectielconme to open the broon、aside、article结构标提示：使用sectielconme to open the broon、aside、article结构标to open the bro主体部分elconme to open the bro，分为左右两部分。</p>
</article>
</section>
</body>
</html>
正在回答
同学你好，左边icon上面那是有数字的，没有实现，建议如下：
效果（效果同学可以再调试）：
而且，下面的标题文字是加粗的：
可以使用font-weight: bold;属性，同学可以再优化一下。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星