zuoye

最新推荐文章于 2024-09-16 13:17:20 发布

sunzhibiao_

最新推荐文章于 2024-09-16 13:17:20 发布

阅读量23

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/sunzhibiao_/article/details/130356842

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <style>
       * {
           margin: 0px;
           padding: 0px;
           border: 0px;
       }
       .wrap {
           height : 1190px;
           width: 3000px;
           margin: 0pc auto;
       }
       .nav {
           height: 60px;
           width: 100%;
           position: relative;
       }
       .nav ul li {
           list-style-type: none;
           display: inline-block;
           width: 120px;
           line-height: 60px;
           text-align: center;
       }
       .nav ul li a{
           color: #999;
           text-decoration: none;
font-size: 18px;
       }
       .nav ul li a:hover{
           color: #f90;
           text-decoration: underline;
       }
       .nav .icon{
           position: absolute;
           top: -5px;
           right: 28%;

       }
       .leftcontent{
           width: 890px;
           height: 300px;
           background-image: ;
           float: left;
       }
       .rightcontent {
           height: 298px;
           width: 276px;
           float: left;
           margin-left: 20px;
           border: 1px solid #ccc;

       }
   .rightcontent h3 {
      height: 44px;
      line-height: 36px;
      font-size: 18px;
      color:#fff;
      margin-left: 20px;
   margin-top: -6px;
   padding-left: 19px;
   background: ;
   font-weight: normal;

   }
   .rightcontent p {
      font-size: 14px;
      color: #666;
      line-height: 18px;
      padding: 8px;
      text-align: justify;


   }
   </style>
   <body>
       <div class="wrap">
           <div class="nav">
               <ul>
                   <li>
                       <a href="#">景点介绍</a>
                   </li>
                   <li>
                       <a href="#">自然环境</a>
                   </li>
                       <li>
                       <a href="#">自然环境</a>
                   </li>
                       <li>
                       <a href="#">自然环境</a>
                   </li>
                       <li>
                       <a href="#">自然环境</a>
                   </li>
               </ul>


               <div class="icon">
                   <img src="img/d8b0b28e9285f4e843de2bd8bdb7c97.jpg" width="40px">
               </div>
           </div>
   <div class="content">
      <div class="leftcontent">

      </div>
      <div class="rightcontent">
          <div class="tupian">

          <p></p>
          <p></p>
          <p></p>
          <p></p>
      </div>
   </div>
       </div>
   </body>
</html>