CSS3制作凤凰网导航

最新推荐文章于 2021-07-01 23:15:16 发布

weixin_30947043

最新推荐文章于 2021-07-01 23:15:16 发布

阅读量831

点赞数

原文链接：http://www.cnblogs.com/youtianxia/p/3837049.html

版权

CSS3制作凤凰网导航，所使用的技术并不复杂，你了解了：box-shadow,CSS制作图形，旋转，动画，这样制作这个效果就不会有压力。

<!DOCTYPE html>
<html lang="en-US">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>CSS3制作凤凰网导航</title>
<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 12px;
            font-family: 'Covered By Your Grace', cursive;
            padding: 100px;
        }
        .container {
            width: 960px;
            margin: 0 auto;
        }
        /*menu style start*/
        #nav {
            width: 960px;
            margin: 50px auto;
            background: #8c319c;
            color: #fff;
            position:relative;
            box-shadow: -1px 0 0 #732184,-2px 0 0 #732184,-3px 0 0 #732184,-4px 0 0 #732184,-5px 0 0 #732184,-6px 0 0 #732184,-7px 0 0 #732184,-8px 0 0 #732184,-9px 0 0 #732184,-10px 0 0 #732184;
            border-top: 10px solid #000;
            float: left;
            width: 100%;
        }
        #nav::before {
            content:"";
            border: 5px solid #732184;
            border-color:#732184 #732184 #cecece #cecece;
            position: absolute;
            bottom: 0;
            left: -10px;
            width: 0;
            height: 0;
            display: block;
            z-index:2;
        }
        
        #nav::after {
            content:"";
            width: 10px;
            height: 9px;
            background: #000;
            position: absolute;
            top: -9px;
            left: -10px;
            display: block;
        } 

        #nav li {
            float: left;
            display: inline;
        }
        #nav a {
            display: block;
            float: left;
            padding: 10px 15px;
            text-decoration: none;
            text-transform: uppercase;
            color: #fff;
            font-weight: bold;
            font-size: 24px;
            box-shadow: 2px 0 0 rgba(255,255,255,0.5);
            -webkit-transition: all 0.5s ease-in .218s;
            -moz-transition: all 0.5s ease-in .0038s;
            -o-transition: all 0.5s ease-in .0038s;
            transition: all 0.5s ease-in .0038s;
        }
        #nav .sub-menu {
            position: absolute;
            left: 0;
            top: 100%;
            background: #eff7f7;
            right: 0;
            box-shadow: -1px 0 0 #cecece,-2px 0 0 #cecece,-3px 0 0 #cecece,-4px 0 0 #cecece,-5px 0 0 #cecece,-6px 0 0 #cecece,-7px 0 0 #cecece,-8px 0 0 #cecece,-9px 0 0 #cecece,-10px 0 0 #cecece;
        }
        #nav .sub-menu::before {
            content:"";
            border: 5px solid #cecece;
            border-color:#cecece #cecece #fff #fff;
            position: absolute;
            bottom: 0;
            left: -10px;
            width: 0;
            height: 0;
            display: block;
            z-index:2;
        }
        
        #nav .sub-menu a {
            color: #000;
            font-size: 20px;
            font-weight: normal;
        }
        #nav a:hover,
        #nav .expansion a {
            background: #eff7f7;
            color: #000;
            box-shadow: 1px 0 0 #a5adad, 2px 0 0 #b5bdbd,3px 0 0 #a5adad;
            padding-top: 14px;
            margin-top: -4px;
        }
        #nav .sub-menu a {
            background: none;
            box-shadow: none;
            padding-top: 10px;
            margin-top: 0;
        }
        #nav .sub-menu a:hover {
            color: rgb(140, 49, 156);
        }
    </style>
</head>
<body>
<div class="container">
    <h1>CSS3制作凤凰网导航</h1>
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li class="expansion">
            <a href="#">Tutorial</a>
            <ul class="sub-menu">
                <li><a href="#">css</a></li>
                <li><a href="#">css3</a></li>
                <li><a href="#">html</a></li>
                <li><a href="#">html5</a></li>
                <li><a href="#">jquery</a></li>
                <li><a href="#">javascript</a></li>
                <li><a href="#">php</a></li>
            </ul>
        </li>
        <li><a href="demo2.html">Demo</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
<p class="author" style="clear:both;padding-top: 50px;">张力仪</p>
</div>    
</body>
</html>

转载于:https://www.cnblogs.com/youtianxia/p/3837049.html

weixin_30947043

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3制作凤凰网导航

CSS3制作凤凰网导航，所使用的技术并不复杂，你了解了：box-shadow,CSS制作图形，旋转，动画，这样制作这个效果就不会有压力。<!DOCTYPE html><html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=...
复制链接

扫一扫