简易实现导航条

最新推荐文章于 2023-01-02 09:11:46 发布

奋斗的IT菜鸟

最新推荐文章于 2023-01-02 09:11:46 发布

阅读量569

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/sujianxin2012/article/details/50575591

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

仿各大网站实现的导航条：

鼠标上移，字体、颜色、背景都变化；鼠标移除，恢复默认

需要注意：

1、设置块状元素的浮动（float）布局

2、内联元素是无法设置高度和宽度的，块状元素可以

HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>导航条</title>
    <link rel="stylesheet" type="text/css" href="navigation.css">
</head>
<body>
    <div class="nav">
        <ul class="">
            <li><a href="">我的主页</a></li>
            <li><a href="">新闻</a></li>
            <li><a href="">娱乐</a></li>
            <li><a href="">体育</a></li>
            <li><a href="">网上购物</a></li>
            <li><a href="">度假休闲</a></li>
        </ul>
    </div>
</body>
</html>

CSS代码：

body,div{
    padding: 0px;
    margin: 0px;
}

.nav{
    width: 560px;
    height: 35px;
    background-color: #cccccc;
    margin: 0px auto;
    margin-top: 30px;
}
.nav ul{
    width: 560px;
    height: 35px;
    list-style: none;
}
.nav ul li{
    float: left;
    /*width: 100px;*/
    line-height: 35px;
    text-align: center;
    margin-right: 1px;
    /*padding: 0 20px;*/
}
a{
    font-size: 20px;
    text-decoration: none;
    height: 35px;
    display: block;
    float: left;
    padding: 0 10px;
}
a:hover{
    text-decoration: underline;
    font-weight: bold;
    color: #ffffff;
    background-color: darkorange;
}

奋斗的IT菜鸟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简易实现导航条

仿各大网站实现的导航条：鼠标上移，字体、颜色、背景都变化；鼠标移除，恢复默认需要注意：1、设置块状元素的浮动（float）布局2、内联元素是无法设置高度和宽度的，块状元素可以HTML代码导航条我的主页新闻娱乐
复制链接

扫一扫