麻烦老师看看效果
来源：2-5 编程练习
qq_慕先生0342934
2020-04-24 00:19:57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style type="text/css">
*{
margin: 0;
padding-top: 0;
font-size: 16px;
font-weight: lighter;
}
section{
width: 1400px;
margin: 0 auto;
padding: 10px;
}
section h2{
font-size: 30px;
line-height: 30px;
font-weight: 7;
}
section h2 smap{
font-size: 30px;
color: #7c7c7c;
}
section aside{
float: left;
}
section aside dl{
position: relative;
width: 450px;
height: 90px;
margin-top: 5px;
}
section aside dl dt{
position: absolute;
width: 250px;
top: 1px;
left: 60px;
text-decoration: underline;
font-weight: bold;
}
section aside dl dd:first-of-type{
position: absolute;
left: 0;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 24px;
color: #fff;
background-image: url(http://climg.mukewang.com/582e61290001787900500051.png);
}
section aside dl dd:last-of-type{
position: absolute;
top: 24px;
left: 60px;
}
article{
width: 930px;
float: right;
}
article p,
article img{
margin-bottom: 30px;
line-height: 30px;
}
article img{
width: 100%;
height: 130px;
}
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<section>
<aside>
<h2>Recent <smap>Course</smap></h2>
<dl>
<dt>Hyper Text Markup L anguage</dt>
<dd>1</dd>
<dd>
HTML is the standard markup language used to createweb pages and its elements forrm 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 documents.
</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 application framework mainly maintained by Google and by a community of individuals and
</dd>
</dl>
</aside>
<article>
<h2>Welcome to <smap>Massive Open Online Course!</smap></h2>
<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回答
-
同学你好，代码实现是正确的，继续加油，祝学习愉快~
0h020-04-25
