为什么我的aside里的dl全部挤在一起了？和老师的不一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<section class="main">
<aside>
<h1>Recent <samp>Course</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 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>
<h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="http://img1.sycdn.imooc.com/climg//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>
.main{
width: 1000px;
height: 600px;
margin: 10px auto;
position: relative;
}
.main h1 { font-size: 30px; font-weight: lighter; margin-bottom: 23px; }
.main h1 > samp { font-size: 30px; color: #7c7c7c; }
.main aside{
width: 45%;
float: left;
}
.main aside dl{
width: 100%;
height: 25%;
display: block;
position: relative;
margin-bottom: 17px;
}
.main aside dl dd:first-of-type{
position: absolute;
left: 0px;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: url(http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png) no-repeat;
}
.main aside dl dd:last-of-type{
position: absolute;
top: 30px;
left: 50px;
}
.main aside dl dt{
position: absolute;
left: 100px;
font-size: 16px;
font-weight: bold;
line-height: 16px;
text-decoration: underline;
}
.main article{
width: 45%;
float: right;
overflow: hidden;
}
.main > article > p,
.main > article > img { margin-bottom: 20px;width: 100%; }
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星