麻烦帮忙检查一下
来源：2-5 编程练习
老二次
2020-02-07 17:44:57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style type="text/css">
* {margin: 0;padding: 0;font-family: Arial;}
section {
margin:20px 250px;
height: 327px;
padding: 20px 30px;
}
section h1 {
font-size: 24px;
margin-bottom: 20px;
}
section h1 samp {
color: #7C7C7C;
}
aside {
width: 40%;
float: left;
top: 50%;
left: 0;
}
dl {
position: relative;
margin: 10px 15px;
display: block;
padding-bottom: 20px;
height: 40px;
}
dl dt {
position: absolute;
text-decoration: underline;
font-weight: bold;
font-size: 12px;
left: 50px;
}
dl dd:first-of-type {
position: absolute;
left: 0;
top: 0;
background-image: url(http://climg.mukewang.com/582e61290001787900500051.png);
display: inline-block;
width: 40px;
height: 40px;
background-size: cover;
line-height: 40px;
color: #fff;
text-align: center;
}
dl dd:last-of-type {
position: absolute;
left: 50px;
top: 15px;
font-size: 11px;
margin-right: 30px;
}
article {
width: 60%;
float: right;
}
article img {
padding-bottom: 15px;
width: 585px;
height: 150px;
}
article p {
font-size: 11px;
padding-bottom: 15px;
}
</style>
</head>
<body>
<section>
<aside>
<h1>Recent <samp>Cource</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd>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>2</dd>
<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g.,fonts,colors,spacing) to Web docunments.</dd>
</dl>
<dl>
<dt>Javascript</dt>
<dd>3</dd>
<dd>Javascript is a high-level,dynamic,untyped, and interpreted programming Language.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd>4</dd>
<dd>AngularJS is an open-source web appliction framework mainly maintained by Google and bg a community of individuals and...</dd>
</dl>
</aside>
<article>
<h1>Welcome to <samp>Massive Open Online Cource!</samp></h1>
<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 resource,using the Internet thinking to change our learning.</p>
<p>Focus on IT skills education Mooc,consistent with the development trend of the Inernet down to earth's MOOC.We are free,weonly teach userful,we concentrate on education.</p>
</article>
</section>
</body>
</html>
1回答
-
同学你好，整体实现的很不错，有一个小问题如下：
图片超出了父容器，建议使用百分比设置，让图片相对父元素100%显示：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题