新浪导航案例

简介: 新浪导航案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            height: 92px;
        }
        .in {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        a {
            float: left;
            width: 81px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            font-size: 12px;
            color: #4c4c4c;
        }
        a:hover {
            background-color: #f6f5ec;
            color: #f15a22;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="in">
            <a href="#">新浪导航</a>
            <a href="#">新浪导航</a>
            <a href="#">新浪导航</a>
            <a href="#">新浪导航</a>
        </div>
    </div>
</body>
</html>

image.png


刚开始要清除默认样式


相关文章
仿网易官网顶部展出的大幅广告代码,附效果演示
仿网易官网顶部展出的大幅广告代码,附效果演示
|
前端开发
学成网页面首页定制
学成网页面首页定制
244 0
学成网页面首页定制
|
搜索推荐 小程序 数据挖掘
仿今日头条实时新闻微信小程序项目源码
仿今日头条实时新闻微信小程序项目源码
394 0
仿今日头条实时新闻微信小程序项目源码
CSDN博客自定义栏目——Google、百度、必应站内搜索框
CSDN博客自定义栏目——Google、百度、必应站内搜索框
147 0
|
JavaScript
【VIP视频网站项目一】搭建视频网站的前台页面(导航栏+轮播图+电影列表+底部友情链接)
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/82557308 ...
2445 0
html+css实战98-新浪导航布局div
html+css实战98-新浪导航布局div
109 0
html+css实战98-新浪导航布局div
html+css实战99-新浪导航内容div
html+css实战99-新浪导航内容div
364 0