2-5 编程练习 麻烦老师检查一下 谢谢
来源：2-5 编程练习
milmilbaby
2020-11-17 14:29:17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style type="text/css">
*{padding:0;margin:0;}
section{width:1240px;height:550px;margin:0 auto;}
section aside{float:left;
width:400px;
height:550px;}
section h3{font-size:30px;margin-top:20px;margin-bottom:20px;}
section h3 span{color:#808080;}
section aside dl{position:relative;margin-bottom:80px;font-size:15px;left:5px;}
section aside dl dd img{position:absolute;left:10px;top:5px;z-index:1;}
section aside dl dd.second{position:relative;left:28px;top:15px;z-index:2;font-size:22px;color:#fff;}
section aside dl dt{position:absolute;left:80px;font-weight:bold;text-decoration:underline;}
section aside dl dd:last-of-type{position:absolute;left:80px;top:22px;}
section article{float:right;
width:805px;
height:550px;
position:relative;
padding-left:30px;}
section article p{font-size:15px;margin-bottom:20px;}
section article img{margin-bottom:20px;width:780px;height:245px;}
</style>
</head>
<body>
<section>
<aside>
<h3>Recent <span>Course</span></h3>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"/></dd>
<dd class="second">1</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>Cascading Style Sheets</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"/></dd>
<dd class="second">2</dd>
<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"/></dd>
<dd class="second">3</dd>
<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"/></dd>
<dd class="second">4</dd>
<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
</dl>
</aside>
<article>
<h3>Welcome to <span>Massive Open Online Course!</span></h3>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg"/>
<p>We hope that all the students who love the internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
<p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
</article>
</section>
</body>
</html>
1回答
-
同学你好，整体效果实现的不错，不过有个地方需要注意一下：从下图可以看出，有一部分内容是在margin区域显示的，如下：
建议：设置高度，调整margin值，代码参考：
祝学习愉快~
0
相似问题