麻烦老师帮忙检查
来源：2-5 编程练习
blanolic
2020-09-03 00:24:50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-family: "Arial";
}
.main{
width: 1200px;
height: 473px;
margin: 40px auto 0;
}
.main > aside {
float: left;
width: 450px;
}
.main h1{
font-size: 30px;
font-weight: lighter;
margin-bottom: 20px;
}
.main h1 samp{
font-size: 30px;
color: gray;
}
.main > aside > dl{
position: relative;
display: block;
height: 74px;
margin-bottom: 20px;
}
.main > aside > dl > dt{
position: absolute;
top: -1px;
left: 75px;
font-size: 16px;
font-weight: bold;
text-decoration: underline;
}
.main > aside > dl > dd:first-of-type{
position: absolute;
left: 0;
}
.main > aside > dl > dd:last-of-type{
position: absolute;
left: 75px;
top: 20px;
font-weight: lighter;
}
.main > aside > dl > dd > span{
position: absolute;
display: block;
top: 14px;
left: 20px;
font-size: 20px;
color: white;
}
.main > article{
float: right;
width: 720px;
overflow: hidden;
}
.main > article > img{
width: 100%;
height: 200px;
}
.main > article > img,
.main > article > p{
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<section class="main">
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><span>1</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>Hyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text </dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd><span>2</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>Hyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd><span>3</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>Hyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd><span>4</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>Hyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text</dd>
</dl>
</aside>
<article>
<h1>Welcome to <samp>massive open online course</samp></h1>
<p>Hyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup Language</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg">
<p>Hyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup Language</p>
<p>Hyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup Language</p>
</article>
</section>
</body>
</html>
1回答
-
同学你好，代码正确，“.main”元素的高度，可以不用设置固定值，使用overflow清除浮动即可：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题