字体旋转+导航+媒体化查询_header>ul>li ul li:hover{color:yellow}-CSDN博客

本文链接：https://blog.csdn.net/zhou742626/article/details/78696311

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           body{
               width: 1290px;
               height: 633px;
           }
           *{
               margin: 0px;
               padding: 0px;
           }
           .title{
               width: 1290px;
               height: 170px;
               background: #aaac90;
           }
           .p{
               width: 145px;
               height: 45px;
               margin-left:130px ;
               padding-top: 25px;
               font-size: 43px;
               color: #AA0000;
               transition: all 2s linear;
           }
           .p:hover{
               transform: rotate(360deg);
           }
           .p1{
               font-size: 25px;
               position: relative;
               left: 260px;
               top: -15px;
           }
           .nav{
               width: 670px;
               height: 40px;
               background: white;
               margin-top:26px ;
               margin-left:8px ;
           }
           li{
               width: 100px;
               height: 40px;
               float: left;
               list-style-type: none;
               line-height: 40px;
               text-align: center;
               background: #6495ed;
               margin-right:1px ;
               color: white;
               font-size: 16px;
           }
           ul .li4{
               width: 132px;
               height: 40px;
           }
           ul .li5{
               width: 116px;
               height: 40px;
           }
           ul li:hover{
               background: red;
               font-size: 20px;
               color: yellow;
           }
           .section{
               width: 1290px;
               background: pink;
           }
           .article{
               width: 665px;
               height: 550px;
               margin-top: 19px;
               margin-left: 130px;
               float: left;
           }
           .p2{
               text-indent: 2em;
               line-height: 27px;
               margin-top: 10px;
           }
           .p3{
               text-indent: 2em;
               line-height: 27px;
               margin-top: 15px;
           }
           .aside{
               border-radius:20px;
               width: 315px;
               height: 444px;
               background: #000000;
               float: left;
               margin-top: 19px;
               margin-left: 60px;
           }
           .aside img{
               margin: 13px;
           }
           .p4{
               text-indent: 2em;
               color: white;
               line-height: 27px;
               margin-top: 15px;
               margin-left: 10px;
           }
           @media only screen and (max-width: 1250px) {
               .section{
                   width: 700px;
               }
               .aside{
                   margin-left: 130px;
               }
           }
       </style>
   </head>
   <body>
       <div class="title">
           <p class="p">散文集</p>
           <p class="p1">朱自清</p>
           <nav class="nav">
               <ul class="ul">
                   <li>作者生平</li>
                   <li>故事背景</li>
                   <li>词语注释</li>
                   <li class="li4">作品手法欣赏</li>
                   <li class="li5">上一篇文章</li>
                   <li class="li5">下一篇文章</li>
               </ul>
           </nav>
       </div>
       <div class="section">
           <div class="article">
               <p><b class="b">荷塘月色(节选)</b></p>
               <p class="p2">
                   这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了;妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。
               </p>
               <p class="p2">
                   沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。
               </p>
               <p class="p2">
                   路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
               </p>
               <p class="p3">
                   <font style="background: #B0E0E6;font-size:42px ;">曲</font>曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色;而叶子却更见风致了。
               </p>
           </div>
           <div class="aside">
               <img src="img/zzq.png"/>
               <p class="p4">
                   朱自清（1898年11月22日—1948年8月12日），原名自华，号秋实，后改名自清，字佩弦。中国现代散文家、诗人、学者、民主战士
               </p>
           </div>
       </div>
   </body>
</html>