多高的问题

多高的问题

<!DOCTYPE html>

<html>


<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

   <style>

      .main {

         width: 1200px;

         height: 500px;

         margin: 34px auto 0;

         padding-bottom: 34px;

      }


      .main h1 {

         font-size: 30px;

         font-weight: lighter;

         margin-bottom: 23px;

      }


      .main h1 samp {

         font-size: 30px;

         color: #7c7c7c;

      }


      .main>aside {

         float: left;

         width: 450px;

      }


      .main>aside>dl {

         position: relative;

         display: block;

         height: 74px;

         padding-bottom: 28px;

      }


      .main>aside>dl>dt {

         position: absolute;

         top: -1px;

         left: 92px;

         font-size: 16px;

         font-weight: bold;

         line-height: 16px;

         text-decoration: underline;

      }


      .main>aside>dl>dd:first-of-type {

         position: absolute;

         top: 20px;

         left: -40px;

      }


      .main>aside>dl>dd:first-of-type>.fixed {

         position: absolute;

         top: 15px;

         right: 20px;

         color: #ffffff;

      }


      .main>aside>dl>dd:last-of-type {

         position: absolute;

         top: 20px;

         left: 50px;

      }


      .main>article {

         float: right;

         width: 720px;

      }


      .main>article>img {

         display: block;

      }


      .main>article img {

         width: 720px;

         height: 100%;

      }

   </style>

</head>


<body>

   <section class="main">

      <aside>

         <h1>Recent <samp>Course</samp></h1>

         <dl>

            <dt>Hyper Text Markup Language</dt>

            <dd>

               <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="">

               <div class="fixed">1</div>

            </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>

               <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="">

               <div class="fixed">2</div>

            </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>

               <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="">

               <div class="fixed">3</div>

            </dd>

            <dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>

         </dl>

         <dl>

            <dt>AngularJS</dt>

            <dd>

               <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="">

               <div class="fixed">4</div>

            </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>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,代码实现效果很棒。关于标题‘多高的问题’是什么意思呢?老师不太明白,建议描述具体一些。

另外,目前正在做问答和笔记功能优化,如果在提问或者记笔记的时候,提示"内容正在加急审核中,请耐心等待"时,请不要重复提交,等待审核通过即可。

继续加油,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师