zoukankan      html  css  js  c++  java
  • 与其放在电脑里占内存,还不如拿出来帮助一群小白白之html篇之八

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>导航翻转效果</title>
    <style>

    *{
    padding:0;
    margin:0;
    list-style:none;
    text-decoration:none;
    }
    .nav{
    100%;
    height:40px;
    background:#333;
    margin-top:50px;
    }
    .nav_con{
    1000px;
    height:40px;
    margin:0 auto;
    overflow:hidden;
    }
    .nav_con li{
    float:left;

    }
    .nav_con li a{
    display:block;
    height:80px;
    color:#ccc;
    margin-top:0;
    transition:all 0.5s;

    }
    .nav_con li a:hover{
    margin-top:-40px;
    }
    .nav_con li a span.ac{
    background:#FFF;
    color:#333;
    border-top:1px solid #333;
    }
    .nav_con li a span{
    padding:0 35px;
    display:block;
    height:40px;
    line-height:40px;
    }

    </style>

    </head>

    <body>
    <div class="nav">
    <div class="nav_con">
    <ul>
    <li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
    <li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
    <li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
    <li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
    <li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
    <li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
    </ul>


    </div>


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

    何以飘零去,何以少团栾,何以离别久,何以不得安。
  • 相关阅读:
    结婚也可以2.0!
    最近读书清单
    Win7旗舰版中的IIS配置asp.net的运行环境
    Google Chrome浏览器
    MySQL到NoSQL:数据的重思和查询方式的转换
    sqlserver游标概念与实例全面解说
    高效管理ASP.NET的JavaScript库
    如何提取网页中的flash
    如何手动启动tomcat
    tomcat单词缩写
  • 原文地址:https://www.cnblogs.com/mikou2017/p/6883418.html
Copyright © 2011-2022 走看看