使用css浮动完成网页顶部导航，效果图如下：

css代码：

  1.     body{
  2.         margin: 0;
  3.     }
  4.     header{
  5.         width:100%;
  6.         height:40px;
  7.         background-color: #0282DD;
  8.         line-height: 40px;
  9.     }
  11.     .logo{
  12.         width:45%;
  13.         height:60px;
  14.         float: left;
  15.     }
  16.     .logo>img{
  17.         width:80px;
  18.         height: 100%;
  19.         margin-left: 70px;
  20.         background-size:cover;
  21.         background-position: center;
  22.     }
  24.     .right{
  25.         width: 55%;
  26.         /*height:60px;*/
  27.         float: right;
  28.     }
  30.     /*右边第一层div公共样式*/
  31.     .right_common{
  32.         /*heightl:60px;*/
  33.         /*border:1px red solid;*/
  34.         float: left;
  35.         color: #fff;
  36.         background-color:#0282DD;
  37.         cursor: pointer;
  38.         text-align: center;
  39.         box-sizing: initial;
  40.         padding-right: 35px;
  41.     }
  43.     /*ul列表父类div公共样式*/
  44.     .code_list,.design_list{
  45.         /*width:100%;*/
  46.         height:40px;
  47.         overflow: hidden;
  48.     }
  50.     ul{
  51.         list-style: none;
  52.         text-align: center;
  53.         width: 100%;
  54.         border-top:2px #fff solid;
  55.     }
  56.     li{
  57.         list-style: none;
  58.         margin: 0 auto;
  59.     }
  60.     /*设置列表显示*/
  61.     .design_list:hover{overflow: visible;height:auto;}
  62.     .code_list:hover{overflow: visible;height:auto;}

HTML代码：

#

  1. <header>
  2.     <div class="logo">
  3.         <img src="./img/logo.png" alt="logo去了外太空">
  4.     </div>
  6.     <div class="right">
  7.         <div class="right_common">首页</div>
  8.         <div class="right_common code_list">
  9.             <span>代码&nbsp;&#x25BC;</span>
  10.             <ul class="common">
  11.                 <li>html</li>
  12.                 <li>css</li>
  13.                 <li>javascript</li>
  14.                 <li>php</li>
  15.             </ul>
  16.         </div>
  18.         <div class="right_common design_list">
  19.             <span>设计&nbsp;&#x25BC;</span>
  20.             <ul class="common">
  21.                 <li>网站设计图</li>
  22.                 <li>网站logo</li>
  23.                 <li>网站icon</li>
  24.                 <li>矢量图</li>
  25.             </ul>
  26.         </div>
  28.         <div class="right_common">金币素材</div>
  29.         <div class="right_common">排行榜</div>
  30.         <div class="right_common">开发者工具</div>
  32.     </div>
  33. </header>

更多相关文章

  1. 简历表代码
  2. 关闭selint 的方式
  3. 哪些企业需要云服务器？搭建网站多大的云服务器呢？
  4. 关于Python —— Python教程
  5. 终于和 null say 拜拜了，我超开心
  6. 我去，你写的 switch 语句也太老土了吧
  7. 内部开源的未来
  8. 代码审查常见问题，建议收藏
  9. 一文带你入门Java Stream流，太强了

随机推荐

  1. Android系统升级的完整过程
  2. Android中使用log4j
  3. add study URL
  4. Simulate android behaviors on win32
  5. Android录音下————AudioRecord源码分
  6. 在Android上编译OSG[3.0.2 ]
  7. 在Android中使用ExecutorService、Execut
  8. dumpsys cpuinfo
  9. Android Studio 之 View组件常用属性及其
  10. In FontFamilyFont, unable to find attr