请老师检查谢谢

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMOOC</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
</head>
<body>
    <section>
        <aside>
            <h1>Recent <span>Course</span></h1>
            <dl>
                <dt>Hyper Text Markup Language</dt>
                <dd class="img"><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
                <dd class="num">1</dd>
                <dd class="content">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 class="img"><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
                <dd class="num">2</dd>
                <dd class="content">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 class="img"><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
                <dd class="num">3</dd>
                <dd class="content">JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
            </dl>
            <dl>
                <dt>AngularJS</dt>
                <dd class="img"><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
                <dd class="num">4</dd>
                <dd class="content">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 <span>Massive Open Online Course!</span></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>
--------------------------------------------------------------------------------------------
*{
    margin:0;
    padding: 0;
    border: none;
}
section{
    width: 1200px;
    margin: 36px auto;
}
section h1{
    font-size: 24px;
    padding-bottom: 12px;
}
section h1 span{
    color:#c7c7c7;
}
section > aside{
    float: left;
    width: 480px;
    margin-right: 32px;
}
section > aside > dl{
    position: relative;
    height: 129px;
}
section > aside > dl > dt{
    position: absolute;
    top: -1px;
    left: 76px;
    font-size: 20px;
    font-weight: bolder;
    text-decoration: underline;
}
section > aside > dl > dd.img{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}
section > aside > dl > dd.num{
    position: absolute;
    top: 10px;
    left: 18px;
    /* 
    请教老师这里使用margin负边距设置不能居中
    dd.img = 50 * 51
    margin-top: -的-的dd.mun一半高度;
    margin-left: -的dd.mun一半长度度;
    */
    font-size: 24px;
    color: white;
}
section > aside > dl > dd.content{
    position: absolute;
    top: 36px;
    left: 76px;
}
section > aside > dl > dd 
section > article{
    float: right;
    width: 720px;
    margin-left: 32px;
}
section > article > p,
section > article > img{
    padding-bottom: 35px;
}
section > article > img{
    /* 这里设置宽度最大怎么计算 */
    width: 680px;
}