HTML窗口改变页面改变案例

最新推荐文章于 2024-03-26 11:27:02 发布

w4270724

最新推荐文章于 2024-03-26 11:27:02 发布

阅读量1.1k

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/w4270724/article/details/79188652

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<style type="text/css">
  * {
   margin: 0 auto;
   padding: 0;
  }

  .div1 {
   width: 1300px;
   height: 100%;
   background: #ffffff;
  }

  .div2 {
   width: 100%;
   height: 170px;
   background: #aaac90;
  }

  .header1 {
   position: relative;
   left: -480px;
   width: 100px;
   padding-top: 20px;
   font-size: 30px;
   color: red;

  }

  .header1:hover {

   display: block;
   transform: rotate(360deg);
   transition: all 1s;
  }

  .span1 {
   position: relative;
   left: 215px;
   margin-top: -25px;
   font-size: 20px;
   color: black;
  }

  .ul1 {
   list-style: none;
  }




  .ul1 li {
   float: left;
   border: 1px solid white;
   margin-top: 80px;
   background: blue;
   color: white;
  }
  .ul1 li:hover{
   transition: all 1s;
   background: red;
  }




  .s1:hover{

   transition: all 1s;

   transform: scale(2);
      color: yellow;
  }
  .s2:hover{

   transition: all 1s;

   transform: scale(2);
      color: yellow;
  }
  .s3:hover{

   transition: all 1s;

   transform: scale(2);
     color: yellow;
  }
  .s4:hover{

   transition: all 1s;

   transform: scale(2);
     color: yellow;
  }
  .s5:hover{

   transition: all 1s;

   transform: scale(2);
     color: yellow;
  }
  .s6:hover{

   transition: all 1s;

   transform: scale(2);
     color: yellow;
  }



  .div3 {
   width: 670px;
   height: 200px;
   margin-top: 10px;
   margin-left: 10px;
   float: left;
  }

  .div4 {
   width: 500px;
   height: 300px;
   float: right;
  }

  .im0 {
   margin: 10px;
  }

  @media only screen and (max-width:1024px ) {
   .div4{
    position: relative;
    left: -800px;
    top: 450px;
   }



  }
</style>

    <nav class="nav1">
     <ul class="ul1">
      <li><p class="s1">作者生平</p></li>
      <li><p class="s2">故事背景</p></li>
      <li><p class="s3">词语注释</p></li>
      <li><p class="s4">作品手法欣赏</p></li>
      <li><p class="s5">上一篇文章</p></li>
      <li><p class="s6">下一篇文章</p></li>
     </ul>
    </nav>
   </div>

   <div class="div3">
    <span style="font-size: 20px; "><strong>荷塘月色</strong></span>
    <节选><br><br>      这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了;妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。 <br><br>　　沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。<br> <br>　　路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。　<br><br>　<span style="font-size: 30px;">曲</span>曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色;而叶子却更见风致了
   </div>

</div>

</div>
</body>

</html>

w4270724

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML窗口改变页面改变案例

* { margin: 0 auto; padding: 0; } .div1 { width: 1300px; height: 100%; background: #ffffff; } .div2 { width: 100%; height: 170px; background: #aaac9
复制链接

扫一扫