HTML 任务三

最新推荐文章于 2022-11-01 15:36:03 发布

chunru8252

最新推荐文章于 2022-11-01 15:36:03 发布

阅读量107

点赞数

原文链接：https://my.oschina.net/u/3356129/blog/861182

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="./load3.css"/>
       <title>任务三</title>
   </head>
   <body>
       <div id="contain">
           <article style="padding: 20px 20px 20px 20px;">
               <div id="big">
                   <div id="first">
                       <p><img src="./张爱玲.jpg" width="80px" height="80px" /> 张爱玲</p><br />
                   </div>

                   <div id="second">
                       <article style="padding: 20px 20px 20px 20px;">
                           <p>张爱玲</p>
                           <p>
                               1.于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里，<br/>
                                   没有早一步，也没有晚一步，刚巧遇上了，那也没有别的话可说，唯有轻轻地问一声：噢，你也在这里。<br/>
                               2.你如果认识从前的我，也许会原谅现在的我。<br/>
                              3.白玫瑰是圣洁的妻，红玫瑰是热烈的情妇。娶了红玫瑰，久而久之，<br/>
                               红的变了墙上的一抹蚊子血，白是还是“床前明月光”;娶了白玫瑰，白的便是衣服上沾的一粒饭粘子，红的却是心口上的一颗朱砂痣。<br/>
                               4.男子憧憬着一个女人的身体的时候，就关心到她的灵魂，自己骗自己说爱上了她的灵魂。<br/>
                                  唯有占领了她的身体之后，他才能够忘记她的灵魂。<br/>
                               5.出名要趁早，来得太晚的话，快乐也不是那么痛快。<br/>
                               6.生命是一袭华美的袍，爬满了虱子。<br/>
                               7.用别人的钱，即使是父母的遗产，也不如用自己赚来的钱自由自在，<br/>
                               良心上非常痛快。可是用丈夫的钱，如果爱他的话，那却是一种快乐，<br/>
                                 愿意想自己是吃他的饭，穿他的衣服。那是女人的传统权利，即使女人现在有了职业，<br/>
                                 还是舍不得放弃的。<br/>
                               8.人本来就是动物，可是没有谁像她这样肯定地是一只动物。
                           </p>
                       </article>
                   </div>
                   <div id="third">
                       <div class="small"><img src="./2.gif" width="80px" height="80px" /></div>
                       <div class="small"><img src="./2.gif" width="80px" height="80px" /></div>
                       <div class="small"><img src="./2.gif" width="80px" height="80px" /></div>
                       <div class="small"><img src="./2.gif" width="80px" height="80px" /></div>
                   </div>
               </div>
           </article>
       </div>
   </body>
</html>

load3.css:

#big{
   background:#eee;
   height:100%;
   overflow: hidden;
   border: 1px solid #999;
}
#first{
   width: 200px;
   height: 150px;
   border: 1px solid #999;
   background: white;
   padding-top: 20px;
   padding-left: 20px;
   margin:10px;
   float: left;
}
#second{
   float: left;
   border: 1px solid #999;
   background: white;
   /*padding-top: 20px;*/
   margin:10px;
}
#third{
       float: left;
       background: white;
       margin:10px;
       width: 120px;
       height:500px;
       /*padding-top: 20px;*/
       border: 1px solid #999;
}
.small{
   margin: 20px;
}