请老师检查，谢谢！

来源：2-5 编程练习
努力的刘同学
2020-02-22 14:52:55
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 清除默认  */
    *{
      margin: 0;
      padding: 0;
    }
    .main{
      width: 1200px;
      height: 600px;
      margin: 20px auto 0;
    }
    .main h1{
      font-size: 30px;
    }
    .main samp{
      font:800 30px  "微软雅黑";
      color: #7c7c7c;
    }
/* aside */
    .main > aside{
      width: 450px;
      float: left;
    }
    .main > aside > dl{
      height: 80px;
      margin-top: 20px;
      display: block;
      position: relative;
    }
    .main > aside > dl > dt{
      position: absolute;
      top: 0;
      left: 60px;
      text-decoration: underline; 
      font-size: 18px; 
      font-weight: 700;     
    } 
    .main > aside > dl > dd:first-of-type{
      position: absolute;
      top: 10px;
      left: 0;
      z-index: 2;     
    }
    .main > aside > dl > dd:last-of-type{
      position: absolute;
      top:25px;
      left:60px;
      z-index: 2;
      margin-top: 5px;
    }
    .main > aside > dl > span{
      position: absolute;
      left: 19px;
      bottom: 30px;
      z-index: 4;
      font-size: 23px;
      color: #fff;
    }
/* article */
    .main > article{
      width: 720px;
      float: right;
    }
    .main > article > p{
      margin:30px 0 30px 0; 
    }
    .main > article > img{
      display: block;
      width: 100%;
      height: 200px;
    }
  </style>
</head>
<body>
  <section class="main">
    <aside>
      <h1>Receat<samp> Course</samp></h1>
      <dl>
        <dt>Hyper Text Markup Language</dt>
        <span>1</span>
        <dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt="很抱歉，您暂时无法打开！"></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>Hyper TextMarkup Language</dt>
        <span>2</span>
        <dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt="很抱歉，您暂时无法打开！"></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>Hyper TextMarkup Language</dt>
        <span>3</span>
        <dd><img src="http://img1.sycdn.imooc.com\/climg/582e61290001787900500051.png" alt="很抱歉，您暂时无法打开！"></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>Hyper TextMarkup Language </dt>
        <span>4</span>
        <dd><img src="http://img1.sycdn.imooc.com\/climg/582e61290001787900500051.png" alt="很抱歉。您暂时无法打开！"></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>
    </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" 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>
</body>

</html>
写回答
1回答