zoukankan      html  css  js  c++  java
  • 链接导航案例

     1  1 <!DOCTYPE html>
     2  2 <html lang="en">
     3  3 <head>
     4  4     <meta charset="UTF-8">
     5  5     <title>Document</title>
     6  6     <style type="text/css">
     7  7         .nav{
     8  8              height:60px;
     9  9              background-color:#aaa;
    10 10              text-align:center;
    11 11              color:#000;
    12 12              font-weight:700px;
    13 13          }
    14 14         a{
    15 15             display:inline-block;
    16 16             width:100px;
    17 17             height:60px;
    18 18             text-decoration:none;
    19 19         }
    20 20         a:hover{
    21 21             background-color:#eee;
    22 22             text-decoration:underline;
    23 23             color:#f14400;
    24 24         }
    25 25         a.public{
    26 26             color:#f14400;
    27 27             font-weight:700;
    28 28         }
    29 29     </style>
    30 30 </head>
    31 31 <body>
    32 32     <div class=nav>
    33 33     <a href="#" class="public">天猫</a>
    34 34     <a href="#" class="public">聚划算</a>
    35 35     <a href="#" class="public">超市</a>
    36 36     <a href="#" class="public">头条</a>
    37 37     <a href="#">阿里旅行</a>
    38 38     <a href="#">电器城</a>
    39 39     <a href="#">淘抢购</a>
    40 40     <a href="#">智能生活</a>
    41 41     <a href="#">苏宁易购</a>
    42 42     </div>
    43 43 </body>
    44 44 </html>

    总结
    1.开始总结写的时候思维比较混乱,没有按照先写框架在写样式的步骤来写,导致代码看起来特别乱,还有就是用标签不是特别熟练,所以要勤加练习
    2.写案例时一定要按照先框架后样式写,做到思路清晰,简洁明了

  • 相关阅读:
    webp怎么打开 webp怎么转换成jpg
    波浪运动
    缓动
    动画的封装
    单张滑动tab 组件
    明星单品tab
    多个tab选项卡
    下拉框
    购物车css样式效果
    菜单导航兼容和不兼容捕获方法
  • 原文地址:https://www.cnblogs.com/twinkle-/p/9094169.html
Copyright © 2011-2022 走看看