制作网页导航栏

最新推荐文章于 2024-05-19 09:58:49 发布

排位必禁百里

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量4.2k

点赞数 6

文章标签： css html5

本文链接：https://blog.csdn.net/qq_44209624/article/details/116611280

版权

制作网页导航栏

记录自己的学习过程

以前粗略的把html和css过了一遍，发现如果记得不是特别牢，敲代码还是无从下手的，所以还是多敲敲比较好。

1、直接用链接<a>来制作简易的而顶部导航栏

这里用到了内部样式表，在<style>里面写css，用到两种选择器：id选择器和类（class）选择器，说是选择器其实在我的理解里和标记差不多，通过对应的标记来查找想要的元素。使用id选择器是以“#”开头，后面紧跟你设置的id值，class则是以“.”开头，后面跟上的设置的class值，两者之间最大的区别在于id选择器在一个文档里智能存在一个，而类（class）选择器可以在一个文档里存在多个。而且id选择器不能够和其他选择器结合使用，例如你要找ul这个元素下面id为“idValue”的值，可能会写“ul #idValue{}”，这样编辑器会报错，而类选择器则可以结合使用，例如你要找p标签下class=“classValue”的值，就可以这样子写：p.classValue{};

对于下面代码一些属性的解释：

margin：设置元素的外间距；

padding：设置元素的内边距;

border-right：对右边的边框进行定义。

color:设置字体的元素；

text-decoration:none:移除文本多余的修饰，同时通过这个属性除了none还可以设置为underline(文本下划线)，overline（文本顶部下划线），line-through（穿过文本下的一条线），blink（定义闪烁的文本），inherit（从父类继承text-decoration 属性的值），顺带一说，该属性为css1版本中的属性。

text-align：设置文本对齐方向，上下左右中都可以设置。

target="_bank":点击链接后打开新窗口，不设置的话默认覆盖原窗口。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="PWBJBL">
        <title>导航栏制作</title> 
        <style>
            #navigation1{margin: auto;text-align: center;}
            .RightBorder{
                /*text-decoration：none 去除文本多余的修饰*/
                text-decoration: none;
                color: black;
                border-right:solid 1px black;
                text-align: center;
                /*padding:内边距，当值为两个时，分别设定的是上下为0，左右为5px的内边距；
                    当值为四个时，设置的顺序为顺时针顺序，即上、右，下左；
                    值为三个时，则是上，左右，下的顺序，boder(外边距)同理*/
                padding: 0 5px;
            }
          
        </style>
    </head>
    <body>
        <!--顶部导航栏-->
        <div id="navigation1">
            <a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=c9588339-af2c-4f2b-ae1c-5f633165f01b&union_place=un" 
            target="_blank" class="RightBorder">首页</a>
            <a href="https://pindao.suning.com/?safp=d488778a.homepagev8.126605238663.6&safpn=10001" 
            target="_blank" class="RightBorder">办公家具</a>
            <a href="https://dianqi.suning.com/?safp=d488778a.homepagev8.126605238663.5&safpn=10001" 
            target="_blank" class="RightBorder">数码科技</a>
            <a href="https://redbaby.suning.com/?safp=d488778a.13701.0.78fd97a8e1&safpn=10007" 
            target="_blank" class="RightBorder">母婴</a>
            <a href="https://qiang.suning.com/pc/brandBenefits.html?safp=d488778a.13701.0.d9e23bea58&safpn=10007"
            target="_blank" class="RightBorder">秒杀活动</a>
        </div>
    </body>
</html>

效果是这样的：

2、使用列表制作比较好看的导航栏

这里是用了无序列表嵌套链接制作，列表默认是竖下来的，但可以使用浮动（float）来使它变为横向。也可以使用display: inline-block;两者有所差别，display: inline-block；会有间隙，需要将父元素的字体大小调为0去除间隙，这里使用浮动。（注：这里面链接的地址是我找的苏宁易购的网址，还有一个是自己文件夹里的一个网页）

下面是用到的css属性：

list-style-type:none；用于移除列表前的标志，通常写完一个无序列表，每一行都会有一个“·”,设置为none去掉了这个点。与此同时还能够使用这个属性设置这个点是实心还是空心之类的。

overflow：hidden；指定如果内容溢出一个元素的框，会发生什么。hidden定义了，如果标签内的内容溢出，内容就会被修剪，溢出的内容不可见。默认值为visibility，即内容溢出不进行修剪。设置为auto，如果内容被修剪，则会出现一个滚动条，向下拉就能看到溢出的内容；同时还有一个scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容；这两者的效果比较像，不同在于scroll在内容不溢出的时候依旧显示滚动条，而auto只有在内容溢出被修剪了才会出现滚动条；

backgroud-color;设置背景色；

display：block；属性规定元素应该生成的框的类型。block设置了元素作为块级显示，前后带有换行符。这里就是将a标签设置为块级，进行高宽的设置，类似于在a标签外套一层<span>，设置为inline时为默认的内联元素。

folat：left;向左浮动，即在第一行没有满的情况下，第二行到第一行的右边显示。

伪类：a.hover:设置鼠标放在连接上时的状态；

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="PWBJBL">
        <title>导航栏制作（列表）</title>
        <style>
              #navigation2{
                /*list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记*/
                list-style-type: none;
                overflow: hidden;
                margin: 0%;
                padding: 0%;
                background-color: rgb(132, 0, 255);
            }
            a.nav{ 
                text-decoration: none;
                /*display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度*/
                display: block;
                width: 100px;
                text-align: center;
                color: white;
                padding: 14px 16px;
                }
            /*伪类*/
            li a:hover{
                background-color:indianred;
            }
            #navigation2 li{
                /*设置列表水平*/
                display: inline;
                float: left;
            }
        </style>
    </head>
    <body style="margin: 0%;padding: 0%;">
         <!--制作导航栏2：使用列表-->
         <ul id="navigation2">
            <li><a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=c9588339-af2c-4f2b-ae1c-5f633165f01b&union_place=un" 
                target="_blank" class="nav">首页</a>
            </li>
            <li>
                <a href="https://pindao.suning.com/?safp=d488778a.homepagev8.126605238663.6&safpn=10001" 
                target="_blank" class="nav">办公家具</a>
            </li>
            <li>
                <a href="https://dianqi.suning.com/?safp=d488778a.homepagev8.126605238663.5&safpn=10001" 
                target="_blank" class="nav">数码科技</a>
            </li>
            <li>
                <a href="https://redbaby.suning.com/?safp=d488778a.13701.0.78fd97a8e1&safpn=10007" 
                target="_blank" class="nav">母婴</a>
            </li>
            <li>
                <a href="https://qiang.suning.com/pc/brandBenefits.html?safp=d488778a.13701.0.d9e23bea58&safpn=10007"
                target="_blank" class="nav">秒杀活动</a>
            </li>
            <li>
                <a href="../p2/login.html" target="_blank" class="nav">登录</a>
            </li>
        </ul>
    </body>
</html>

最后效果时这样的：

排位必禁百里

关注

6
点赞
踩
45

收藏

觉得还不错? 一键收藏
0
评论
制作网页导航栏

制作网页导航栏记录自己的学习过程以前粗略的把html和css过了一遍，发现如果记得不是特别牢，敲代码还是无从下手的，所以还是多敲敲比较好。1、直接用链接<a>来制作简易的而顶部导航栏这里用到了内部样式表，在<style>里面写css，用到两种选择器：id选择器和类（class）选择器，说是选择器其实在我的理解里和标记差不多，通过对应的标记来查找想要的元素。使用id选择器是以“#”开头，后面紧跟你设置的id值，class则是以“.”开头，后面跟上的设置的class值.
复制链接

扫一扫