老师帮忙检查一下
来源：2-5 编程练习
xiao肥瑞
2020-07-07 19:49:48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
section{width: 1200px;height: 500px;margin: 0 auto;}
aside{width: 450px;float: left;height: 500px;}
article{width: 700px;float: right;height: 500px;overflow: hidden;}
h1{
font-size: 30px;
margin: 20px 0 20px 0px;
}
samp{
font-size: 1em;
color: gray;
}
aside > h1{margin-left: -20px;}
aside > dl{height: 85px;position: relative;display:block;margin-bottom: 15px;}
aside > dl > dt{
float: left;
position: absolute;
top: -2px;
left: 80px;
font-weight: bold;
text-decoration: underline;
font-size: 18px;
}
aside > dl >dd:first-of-type{
position: absolute;
left: 0;
}
aside > dl >dd:last-of-type{
position: absolute;
left: 80px;
top: 20px;
padding-top: 5px;
}
article> p{font-size:14px;font-weight:lighter;margin-bottom:20px;}
article> img{width:500px;height:200px;margin-bottom:20px;}
</style>
</head>
<body>
<section>
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>HTML is the standard markup language used to create web pages and
its elements form the bullding blocks of all websites.</dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>HTML is the standard markup language used to create web pages and
its elements form the bullding blocks of all websites.</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>HTML is the standard markup language used to create web pages and
its elements form the bullding blocks of all websites.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>HTML is the standard markup language used to create web pages and
its elements form the bullding blocks of all websites.</dd>
</dl>
</aside>
<article>
<h1>Welcome to<samp> Massive Open Online Course</samp></h1>
<p>
We provide the latest knowiedge to help you cope with the changing
world!
</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg" />
<p>
We hope that all the syudents who love the lntemet can be more
convenient access to learning resources,using the lnternet thinking to
change our leaming.
</p>
<p>
Focus on IT skills education MOOC,consistent with the development
trend of the lnternet down to earth's MOOC.We are free,we only teach
useful, we concentrate on education.
</p>
</article>
</section>
</body>
</html>
1回答
-
同学你好，整体实现的不错。不过有一个效果忘记实现了，即前面的数字序号，如下是效果图：
建议参考如下完善：
添加一个span
设置样式，通过定位移动位置：
其他的几个序号要自己完善一下。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题