zoukankan      html  css  js  c++  java
  • 简单导航条制作

    <!doctype html>
    <html lang="en">
       <head>
         <meta charset="UTF-8">
         <title>练习</title>
          <link rel="stylesheet" href="index.css"> 
       </head>
       <body>
          <div id="nav">
             <ul>
                <li>首页</li>
                <li>歌曲</li>
                <li>视频</li>  
                <li>电影</li>
                <li>关于我们</li> 
             </ul>
          </div>
          <div id="left">
            <span>×</span>
          </div>
          <div id="right">
              <span>×</span>
          </div>
       </body>
    </html>

    /*复位*/
    *
    { margin:0; padding:0; } #nav ul{ list-style:none; background-color:#000; color:#fff; padding-left:100px; } #nav ul li{ display:inline-block; cursor:pointer; padding:20px 0px; color:inherit; margin:0px 15px; }

    /*鼠标滑过字体抖动*/ #nav ul li:hover{ position:relative; top:3px; color:#74b0e2; } #left,#right{ border:1px solid gray; width:120px; height:200px; position:fixed; top:300px; box-shadow:0px 0px 8px 3px gray; } #left{ left:10px; } #right{ right:10px; } #left span,#right span{ float:right; cursor:pointer; }
    
    
    效果如下


  • 相关阅读:
    Ionic 2.0 相关资料
    Tkinter的Menubutton组件
    Tkinter的Menubutton组件之OptionMenu
    Tkinter的Menu组件
    Tkinter的Scale组件
    Tkinter的Scrollbar组件
    Tkinter的Listbox组件
    Tkinter的Text组件
    Tkinter的Spinbox组件
    Tkinter的Label组件
  • 原文地址:https://www.cnblogs.com/Onlywjy/p/6073360.html
Copyright © 2011-2022 走看看