主体部分

<section>
   <div class="main">
       <aside>
           <h2>Recent <samp>Course<samp/></h2>
           <dl>
               <dt>HyperText Markup Language</dt>
               <dd>
                   <img src="http://climg.mukewang.com/582e61290001787900500051.png" alt="">
                   <div>1</div>
               </dd>
               <dd> HTML is the standard markup language used to create
                   webpages and its elements form the building blocks of all websites.
               </dd>
           </dl>
           <dl>
               <dt>Cascading StyleSheets</dt>
               <dd>
                   <img src="http://climg.mukewang.com/582e61290001787900500051.png" alt="">
                   <div>2</div>
               </dd>
               <dd>Cascading StyleSheets(CSS) is a simple mechanism for adding style(e.g.， fonts， colors， spacing) to Web
                   documents.
               </dd>
           </dl>
           <dl>
               <dt>JavaScript</dt>
               <dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt=""><div>3</div></dd>
               <dd> JavaScript is a high-level， dynamic， untyped， and
                   interpreted programming language.
               </dd>
           </dl>
           <dl>
               <dt>Angular Js</dt>
               <dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt=""><div>4</div></dd>
               <dd> HAngular Js 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 <samp>Massive Open Online Course!<samp/></h2>
           <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 MOO C， consistent with the development trend of the Internet down to earth'sMOO C.
               We are free， we only teach useful， we concentrate on education.</p>
       </article>
   </div>

</section>

css

*{
   padding: 0;
   margin: 0;
   font-size: 16px;
   font-family: "微软雅黑";
}
a{
   text-decoration: none;
}
.main{
   width: 1200px;
   margin: 0 auto;
   font-family: "Arial Black"!important;
}
.main h2{
   font-size: 30px;
   line-height: 55px;
   font-weight: 400;
}
.main h2 samp{
   font-size: 30px;
   color: #7C7C7C;
}
.main aside{
   width: 500px;
   float: left;

}
.main aside dl{
   width: 430px;
   height: 95px;
   position: relative;
}
.main aside dt{
   font-weight: 700;
   text-decoration: underline;
   position:absolute;
   left: 75px;
   top: -1px;
}
.main aside dd:first-of-type{
   position: absolute;
   left: 0;
   top: 0;
}
.main aside dd:first-of-type div{
   position: absolute;
   left: 17px;
   top: 8px;
   z-index: 2;
   color: #fff;
   font-size: 26px;
}
.main aside dd:last-of-type{
   position: absolute;
   left: 75px;
   top: 30px;
   font-size: 14px;
}
.main article {
   width: 700px;
   float: right;
}
.main article img{
   display: inline-block;
   margin-bottom: 20px;
   width: 700px;
   height: 200px;
}
.main article p{
   font-size: 14px;
   margin-bottom: 20px;
   line-height: 20px;
}