如图中的课程练习（2-5）中的1 2 3 4 是如何实现的？
我自己做出的是这样的效果
左侧部分通过dl列表去做，然后通过添加dd背景图片实现那个红圈，但是无法做出1 2 3 4的序列；我的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页主体部分</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<section class="main">
<aside>
<h1>Recent <span>Course</span></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd>TOMSHOO 10x25 Compact binocular is constructed with a rugged rubber armor for a comfortable, non-slip grip and shock resistance</dd>
<dt>Hyper Text Markup Language</dt>
<dd>TOMSHOO 10x25 Compact binocular is constructed with a rugged rubber armor for a comfortable</dd>
<dt>Hyper Text Markup Language</dt>
<dd>TOMSHOO 10x25 Compact binocular is constructed with a rugged rubber armor for a comfortable</dd>
<dt>Hyper Text Markup Language</dt>
<dd>TOMSHOO 10x25 Compact binocular is constructed with a rugged rubber armor for a comfortable, non-slip grip and shock resistance</dd>
</dl>
</aside>
<article>
<h1>Welcome to <span>Massive Open Online Course</span></h1>
<p>TOMSHOO 10x25 Compact binocular</p>
<img src="http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg" alt="">
<p>Easy To Use --- Focus by adjusting the right eye cup and center wheel good for adults bird;watching, sightseeing,climbing traveling, sport Game,concerts etc.</p>
<p>watching, sightseeing,climbing traveling, sport Game,concerts etc.</p>
</article>
</section>
</body>
</html>
CSS部分如下：
aside dt,p{font-family: arial}
span{color:gray;}
h1{font-size:30px;}
aside{float:left;width:485px;height:500px;}
aside h1{margin-left:20px;}
aside dt{text-decoration:underline;font-weight:bold;margin-left:100px;margin-top:20px;}
aside dd{background: url(http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png) no-repeat;
padding-left:60px;}
article{float:right;width:775px;height:500px;}
article img{width:720px;height:200px;}
正在回答
1、2、3、4是自己定义的文字哦
如下布局的时候，就可以在标注的dd中引入背景图片并定义序列数字。
你可以参考该思路实现。
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星