*,p{
    padding: 0;
    margin: 0;
    border: none;
    font-size: 14px;
    font-family: Airal;
}
section{
    width:1300px;
    height:500px;
    margin: 0 auto;
}
section h1{
    font-size: 30px;
    margin-bottom: 20px;
}
section h1>samp{
    font-size: 30px;
    color:#7c7c7c;
}
section>aside{
    position: relative;
    float: left;
    width:450px;
    margin:42px 30px;
}
section>aside>dl{
    position: relative;
    display: block;
    height:95px;
}
section>aside>dl>dt{
    position: absolute;
    font-size: 16px;
    line-height: 16px;
    top:2px;
    left:95px;
    font-weight: bold;
    text-decoration: underline;
}
section>aside>dl>dd:first-of-type{
    position: absolute;
    left:20px;
    width:60px;
    height:60px;
    background: url(http://climg.mukewang.com/582e61290001787900500051.png) no-repeat;
    
}
section>aside>dl>dd>.number{
    font-size: 22px;
    color:#fff;
    position: absolute;
    top:10px;
    left:18px;
}
section>aside>dl>dd:last-of-type{
    position: absolute;
    top:20px;
    left:95px;
}
section>article{
    float: right;
    width:720px;
    margin:42px 30px;
}
section>article>p,
section>article>img{
    margin-bottom: 20px;
}
section>article>img{
    width:100%;
    height:200px;
}

<section>
        <aside>
            <h1>Recent <samp>Course</samp></h1>
            <dl>
                <dt>Hyper Text Markup Language</dt>
                <dd><p class="number">1</p></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><p class="number">2</p></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><p class="number">3</p></dd>
                <dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
            </dl>
            <dl>
                <dt>AngularJS</dt>
                <dd><p class="number">4</p></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://climg.mukewang.com/582e61180001ede703300130.jpg" alt="">
            <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>