麻烦老师检查！
来源：2-5 编程练习
慕神9465694
2019-08-02 18:10:42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
section{
width:1500px;
height: 500px;
margin: 100px auto;
}
aside{
width:600px;
height: 500px;
float: left;
}
article{
width:900px;
height: 500px;
float:right;
}
span{
color:gray;
}
aside > h1{
padding:20px;
}
section aside dl{
height:100px;
position:relative;
padding-left:30px;
}
section aside dl dt,dd{
position:absolute;
}
section aside dl dt{
top:-1px;
left:120px;
text-decoration:underline;
font-weight:bold;
}
section aside dl dd:first-of-type{
width: 50px;
height: 51px;
background:url(http://climg.mukewang.com/582e61290001787900500051.png);
text-align: center;
line-height: 51px;
}
section aside dl dd:last-of-type{
left:120px;
top:23px;
}
article h1{
padding: 20px 0 20px 0;
}
article p,img{
padding-bottom:15px;
}
article img{
display:block;
width: 780px;
height: 230px;
}
</style>
</head>
<body>
<section>
<aside>
<h1>Recent <span>Course</span></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd>1</dd>
<dd>HTML is the standard markup language used to create<br/>
web pages and its elements form the building blocks of<br/>
all websites.</dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd>2</dd>
<dd>Cascading Style Sheets(CSS) is a simple mechanism for<br/>
adding style(e.g,fonts,colors,spacing)to Web<br/>
documents.
</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd>3</dd>
<dd>JavaScript is a high-level,dynamic,untyped,and<br/>
interpreted programming language.
</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd>4</dd>
<dd>Angular JS is an open-source wed application framework<br/>
mainly maintained by google and by a community of<br/>
individuals and.
</dd>
</dl>
</aside>
<article>
<h1>Welcome to <span>Massive Open Online Course!</span></h1>
<p>We provide the latest knosledge to heip you cope wth the changing world!</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg" />
<p>we hope that all the students who love the intemet can be more corvenient access to learning resources,using<br>
the irternet thinking to charge our learning.</p>
<p>Focus on I sdlls edueaion MooC,consister:witn the development trend of the iritermet down to eartis MOOC<br>
We are free,we only eacn useful,we corcentrate on education.</p>
</article>
</section>
</body>
</html>
1回答
-
你好同学，效果实现的很棒，继续加油，祝学习愉快！
0
