CSS3综合练习，导航菜单的制作

最新推荐文章于 2023-08-23 17:52:49 发布

黄宝康

最新推荐文章于 2023-08-23 17:52:49 发布

阅读量1.8k

点赞数

分类专栏： css 文章标签： CSS3综合练习，导航菜单的制作

本文链接：https://blog.csdn.net/huangbaokang/article/details/81901279

版权

css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>导航菜单</title>
<style type="text/css">
    body{
        background: #ebebeb;
    }
    .nav{
        margin: 40px auto 0;
        width: 560px;
        height: 50px;
        text-align:center;
        background: #f65f57;
        font:bold 0/50px Arial;
        border-radius: 5px;
        box-shadow:5px 5px 0 #cc1725;
    }
    .nav a{
        display: inline-block;
        transition: all 0.2s ease-in;
        color: #fff;
        text-decoration: none;
    }
    .nav a:hover{
        transform: rotate(10deg);
    }
    .nav li{
        text-shadow: 5px 5px 4px rgba(0,0,0,.5);
        list-style: none outside none;
        font-size: 13px;
        display: inline-block;
        padding: 0 16px;
        position: relative;
    }
    .nav li:after{
        content: "";
        width: 2px;
        height: 15px;
        background: linear-gradient(to bottom,#dd2926,#a82724,#dd2926);
        display: block;
        top: 19px;
        right: -3px;
        position: absolute;

    }
    .nav li:last-child:after{
        background: none;
    }
</style>  
</head> 
<body>
    <ul class="nav">
        <li><a href="">Home</a></li>
        <li><a href="">About Me</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Resources</a></li>
        <li><a href="">Contact Me</a></li>
    </ul>
</body>
</html>

其中用到了border-radius， box-shadow，transition，transform，text-shadow，linear-gradient以及伪元素的使用，是一个不错的练习，其中ul下的li之前一直使用浮动，今天试了下 display: inline-block;同样起到了效果，学到了东西。

页面效果图：
这里写图片描述

黄宝康

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3综合练习，导航菜单的制作

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt;&lt;title&gt;导航菜单&lt;/title&gt;&lt;style type="text/css"&gt; body{ background: #ebebeb;
复制链接

扫一扫