HTML_导航

最新推荐文章于 2024-08-11 11:20:30 发布

hello~bye~

最新推荐文章于 2024-08-11 11:20:30 发布

阅读量949

点赞数

分类专栏：前端（HTML、css）文章标签： html5 导航栏

本文链接：https://blog.csdn.net/qq_36654309/article/details/109742176

版权

前端（HTML、css）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式学习</title>
    <style>
        #navigator{
            text-align: center;
        }
        .item{
            text-decoration: none;
            color: slategrey;
            border-right:solid 1px slategrey;
            padding: 0 15px;
        }
    </style>
</head>
<!--body标签默认会在页面四周有一点点空隙，用margin:0可以去掉-->
<body style="margin:0">
    <!--一个空的div默认宽度100%，高度为0，添加内容时，高度才会被撑开-->
    <div>
        <img src="img/bannner.jpg" alt="" sizes="" srcset="">
    </div>
    <!--做导航栏右边带一个|
    （1）超链接
    （2）容器设置为居中
    （3）每一个链接a加class，组成一个类
    （4）加border-right
    （5）最后一个采用行内样式去掉右边的|-->
    <div id="navigator">
        <a href="#" class="item">导航栏1</a>
        <a href="#" class="item">导航栏2</a>
        <a href="#" class="item">导航栏3</a>
        <a href="#" class="item">导航栏4</a>
        <a href="#" class="item">导航栏5</a>
        <!--行内样式1000>ID选择器100>类选择器10>标签选择器1div{}>通用选择器0（*{}）
        现实使用时，不能单独看，而是要把样式中设置的各种权重进行判断，比如：
        #navigator a就比.item的高-->
        <a href="#" class="item" style="border:none;">导航栏6</a>
    </div>
</body>
</html>