麻烦检查一下
来源:2-5 编程练习
慕工程0025061
2019-08-07 03:28:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style>
*{
padding:0;
margin:0;
}
section{width:1200px;height:500px;margin:0 auto;}
aside{width:480px;height:400px;float:left;}
aside h1{
margin-bottom:5px;
}
aside h1,article h1{
font-size:30px;
font-weight:bold;
}
aside samp,article samp{
color:#7c7c7c;
}
aside > dl{
height:80px;
position:relative;
display: block;
}
aside > dl > dt{
position:absolute;
left:96px;
text-decoration: underline;
font-weight:bold;
}
aside > dl > dd:first-of-type{
position:absolute;
left:20px;
top:-1px;
}
aside > dl > dd:last-of-type{
position:absolute;
left:96px;
top:20px;
}
aside > dl > span{
position:absolute;
font-size:20px;
top:12px;
left:40px;
color:white;
z-index:2;
font-weight:bold;
}
article{
float: right;
width:620px;
}
article > p, article > img{
margin-bottom:25px;
}
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<section>
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper TextMarkup Language</dt>
<span>1</span>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt=""></dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
</dl>
<dl>
<dt>Hyper TextMarkup Language</dt>
<span>2</span>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt=""></dd>
<dd>html is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
</dl>
<dl>
<dt>Hyper TextMarkup Language</dt>
<span>3</span>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt=""></dd>
<dd>javascript is a high-level,dynamic,untyped,and interpreted programing </dd>
</dl>
<dl>
<dt>Hyper TextMarkup Language</dt>
<span>4</span>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt=""></dd>
<dd>html is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
</dl>
</dl>
</aside>
<article>
<h1>welcome to <samp>massive open online course</samp></h1>
<p>we provide the lastest knowledge to help you cope the changing the world.</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg"/>
<p>we hope that all students who love the internet can be more convenient access ti
learning resources,using the internet thinking to change our learing.</p>
<p>focus on it skill education mooc,that all students who love the internet can be more convenient access ti
learning resources.</p>
</article>
</section>
</body>
</html>
1回答
好帮手慕嘟嘟
2019-08-07
同学你好,
① 老师运行了你的代码,效果是可以的。
② 为使页面更加美观,建议每一个dl之间要有一定的距离。
修改之后的代码以及效果:
效果:
如果还有疑惑,可以在问答区再次提问,我们会继续为你解答的.
如果我的回答帮助了你欢迎采纳,祝学习愉快~