web开发源代码案例8-技术文章-顾乔芝士网

一个网站最基本的就是导览航，现在就开始教大家做上图这个效果的

看着舒服，鼠标移动过去还是可以有其他效果的

1、先把页面内容做出来就是<div>里面的内容

2、先把整体的框架做出来，比如说.nav 里面的内容，这个就是做框架的，这个就是管理整个框架样式

3、再根据a的需求来设置 .nav a 这个大家可以看到主要是导航链接的样式

4、鼠标移动到该导航链接的样式

我们就可以从大到小，从默认到触碰的到的思路一步步做下去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web开发源代码案例8</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            line-height: 41px;
            background-color: #fcfcfc;
        }
        .nav a {
            display: inline-block;
            height: 41px;
            color: #4c4c4c;
            font-size: 12px;
            text-decoration: none;
            padding: 0 20px;
        }
        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">导航栏</a>
        <a href="#">关于我们</a>
        <a href="#">你是最帅的</a>
    </div>
</body>
</html>

顾乔芝士网

持续更新的前后端开发技术栈

web开发源代码案例8