老师麻烦检查一下
来源：2-5 编程练习
等吃糖葫芦的阿狸
2019-09-11 11:15:06
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.main{
width: 1200px;
height: 800px;
margin: 0 auto;
}
aside{
width: 500px;
height: 800px;
float: left;
}
article{
width: 700px;
height: 800px;
float: right;
}
h1{
font-size: 30px;
margin-bottom: 24px;
}
h1 samp{
color: gray;
font-size: 30px;
}
dl{
height: 80px;
position: relative;
display: block;
margin-bottom: 24px;
}
dl dt{
text-decoration: underline;
position: absolute;
left: 92px;
top: -1px;
line-height: 16px;
font-size: 16px;
font-weight: bold;
}
dl dd:fitst-of-type{
position: absolute;
left: 0;
}
dl dd:last-of-type{
position: absolute;
left: 92px;
top: 20px;
}
.num{
position: absolute;
left: 16px;
top: 10px;
color: #fff;
font-size: 24px;
}
article img{
width: 700px;
}
article p,
article img{
margin-bottom: 20px;
}
</style>
</head>
<body>
<section class="main">
<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 class="num">1</dd>
<dd>hyper text markup language book book book book hyper text markup language book book book book hyper text markup language book book book book</dd>
</dl>
<dl>
<dt>hyper text markup language</dt>
<dd><img src="
http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd class="num">2</dd>
<dd>hyper text markup language book book book book hyper text markup language book book book book hyper text markup language book book book book</dd>
</dl>
<dl>
<dt>hyper text markup language</dt>
<dd><img src="
http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd class="num">3</dd>
<dd>hyper text markup language book book book book hyper text markup language book book book book hyper text markup language book book book book</dd>
</dl>
<dl>
<dt>hyper text markup language</dt>
<dd><img src="
http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd class="num">4</dd>
<dd>hyper text markup language book book book book hyper text markup language book book book book hyper text markup language book book book book</dd>
</dl>
</aside>
<article>
<h1> welcome to <samp>massive open online course</samp></h1>
<p>hyper text markup language book book book book hyper text markup language book book book</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg">
<p>hyper text markup language book book book book hyper text markup language book book book book hyper text markup language book book book book</p>
<p>hyper text markup language book book book book hyper text markup language book book book book hyper text markup language book book book book</p>
</article>
</section>
</body>
</html>
1回答
-
好帮手慕嘟嘟
2019-09-11
同学你好，
效果是正确的，数字的位置还可以在调整一下哦，
效果：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题