• 第二十七章HTML.CSS综合案例（二）

    3.菜单栏

    效果图如下：

    代码图如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>下拉列表</title>
    7.     <style>
    8.         *{
    9.             margin: 0;
    10.             padding: 0;
    11.         }
    12.         ul{
    13.             list-style: none;
    14.         }
    15.         .biaoti{
    16.             width: 1000px;
    17.             margin: 0 auto;
    18.         }
    19.         .biaoti  .biaoti1{
    20.             background-color: rgb(53, 62, 55);
    21.             color: aqua;
    22.             float: left;
    23.             line-height: 40px;
    24.             width: 120px;
    25.             text-align: center;
    26.         }
    27.         .biaoti .biaoti1:hover{
    28.             background-color: red;
    29.         }
    30.         .biaoti .biaoti1 ul{
    31.             display: none;
    32.             background-color: #ADFF2F;
    33.         }
    34.         .biaoti .biaoti1:hover ul{
    35.             display: block;
    36.         }
    37.         .biaoti .biaoti1 ul li:hover{
    38.             background-color: aquamarine;
    39.         }
    40.  
    41.         .biaoti  .biaoti1 .biaoti2{
    42.             background-color: rgb(53, 62, 55);
    43.             color: aqua;
    44.             float: left;
    45.             line-height: 40px;
    46.             width: 120px;
    47.             text-align: center;
    48.         }
    49.         .biaoti .biaoti1 .biaoti2:hover{
    50.             background-color: rgb(182, 226, 107);
    51.         }
    52.         .biaoti .biaoti1 .biaoti2 ul{
    53.             display: none;
    54.             background-color: #ba3c51;
    55.         }
    56.         .biaoti .biaoti1 .biaoti2:hover ul{
    57.             display: block;
    58.         }
    59.         .biaoti .biaoti1 .biaoti2 ul li:hover{
    60.             background-color: rgb(180, 127, 255);
    61.         }
    62.     </style>
    63. </head>
    64. <body>
    65.     <div>
    66.         <ul class="biaoti">
    67.             <li class="biaoti1">首页</li>
    68.  
    69.  
    70.             <li class="biaoti1">产品展示
    71.                 <ul>
    72.                     <li>产品一</li>
    73.                     <li>产品二</li>
    74.                     <li>产品三</li>
    75.                     <li class="biaoti2">产品四
    76.                         <ul>
    77.                             <li>2302</li>
    78.                             <li>2308</li>
    79.                             <li>2309</li>
    80.                         </ul>
    81.                     </li>
    82.                 </ul>
    83.             </li>
    84.  
    85.             <li class="biaoti1">新闻资讯
    86.                 <ul>
    87.                     <li>产品一</li>
    88.                     <li>产品二</li>
    89.                     <li>产品三</li>
    90.                 </ul>
    91.             </li>
    92.             <li class="biaoti1">客户服务
    93.                 <ul>
    94.                     <li>产品一</li>
    95.                     <li>产品二</li>
    96.                     <li>产品三</li>
    97.                 </ul>
    98.             </li>
    99.             <li class="biaoti1">企业相册
    100.                 <ul>
    101.                     <li>产品一</li>
    102.                     <li>产品二</li>
    103.                     <li>产品三</li>
    104.                 </ul>
    105.             </li>
    106.             <li class="biaoti1">关于我们
    107.                 <ul>
    108.                     <li>产品一</li>
    109.                     <li>产品二</li>
    110.                     <li>产品三</li>
    111.                 </ul>
    112.             </li>
    113.             <li class="biaoti1">联系我们
    114.                 <ul>
    115.                     <li>产品一</li>
    116.                     <li>产品二</li>
    117.                     <li>产品三</li>
    118.                 </ul>
    119.             </li>
    120.  
    121.         </ul>
    122.  
    123.     </div>
    124. </body>
    125. </html>

    4.菜单栏

    效果图如下：

    代码部分如下：

    1. <style>
    2.         *{
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         .box{
    7.             width: 1120px;
    8.             height: 500px;
    9.             /* border: 1px solid red; */
    10.             margin: 0 auto;
    11.         }
    12.         .box1{
    13.             width: 1060px;
    14.             height: 50px;
    15.             border-bottom: 3px solid rgb(175, 120, 120);
    16.             margin-left:  57px;
    17.         }
    18.         .box2{
    19.             color: blue;
    20.             float: left; 
    21.             margin-left: 1px;
    22.         }
    23.         .box3{
    24.             float: left;
    25.             margin-top: 10px;
    26.             margin-left: 57px;
    27.         }
    28.         .box4{
    29.             width: 935px;
    30.             height: 50px;
    31.         }
    32.         .box4 li{
    33.             width: 50px;
    34.             height: 30px;
    35.             color: antiquewhite;
    36.             list-style: none;
    37.             float: left;
    38.             margin-left: 50px;
    39.             font-size: 14px;
    40.             line-height: 30px;
    41.             text-align: center;
    42.         }
    43.         .box4 a{
    44.             color: darkgrey;
    45.             text-decoration: none;
    46.         }
    47.         .box5 a{
    48.             float: right;
    49.             font-size: 14px;
    50.             color: grey;
    51.             margin-top: -30px;
    52.             text-decoration: none;
    53.         }
    54.         .box6{
    55.             margin-left: 50px;
    56.         }
    57.         .box6 img{
    58.             margin-left: 7px;
    59.         }
    60.     style>
    1. <body>
    2.     <div class="box">
    3.         <div class="box1">
    4.             <h1 class="box2">骆驼书</h1>
    5.             <span class="box3">读骆驼书，行万里路。</span>
    6.         </div>
    7.         <div class="box4">
    8.             <ul>
    9.                 <li><a href="#">专题</a></li>
    10.                 <li><a href="#">亚洲</a></li>
    11.                 <li><a href="#">欧洲</a></li>
    12.                 <li><a href="#">北美洲</a></li>
    13.                 <li><a href="#">大洋洲</a></li>
    14.             </ul>
    15.         </div>
    16.         <div class="box5">
    17.             <a href="#">更多></a>
    18.         </div>    
    19.         <div class="box6">
    20.             <img src="../../C4D素材文件/001图片.png" alt="">
    21.             <img src="../../C4D素材文件/002图片.png" alt="">
    22.             <img src="../../C4D素材文件/003图片.png" alt="">
    23.             <img src="../../C4D素材文件/004图片.png" alt="">
    24.         </div>
    25.     </div>
    26. </body>

     

  • 相关阅读:
    李宏毅-机器学习和深度学习概念入门笔记1
    PTA：7-1 栈的基本操作
    R语言STAN贝叶斯线性回归模型分析气候变化影响北半球海冰范围和可视化检查模型收敛性...
    【用四道刁钻例题带你理解】数据在内存中存储的方式
    万界星空科技商业开源MES
    Java Matcher.lookingAt()方法具有什么功能呢？
    【校招VIP】产品思维考察之创意能力
    手工架设安装教程：
    MEMM最大熵模型
    Linux学习-19-SRPM源码包安装
  • 原文地址：https://blog.csdn.net/J3259392566/article/details/139501372