导航栏制作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0px;     /*盒子外边距*/
                padding: 0px;    /*盒子内边距*/
            }
            .NavigatorView {
                width: 100%;
                height: 50px;
                background-color: WhiteSmoke;

            }
            .NavigatorView div{
                height: 50px;
                width: 80%;
                margin-left: 12%;
                margin-right: 12%;

            }
            .NavigatorView div ul {
                list-style-type: none;   /*去掉ul的无标号的 点, 即 无标记    */
            }
            .NavigatorView div ul li {
                float: left;            /* 左浮动 */
            }

            .NavigatorView div ul li a {
                display: block;        /* 块状显示,在元素后面换行,显示下一个块元素*/
                height: 50px;
                width: 130px;
                text-align:center;
                text-decoration: none;   /*去除链接下的横线*/
                line-height: 50px;        /*文本行高*/
                color:black;
            }
            .a1 {
                background-color: YellowGreen;
            }
            .NavigatorView div ul li a:hover{
                background-color: YellowGreen;
                height: 50px;
                width: 130px;
                text-align:center;
                display: block;
                text-decoration: none;   /*去除链接下的横线*/
                line-height: 50px;
                color: black;
            }    

            .head {
                height: 120px;
                width: 100%;
                background-color: aliceblue;

            }
        </style>
    </head>
    <body>
        <div class="head"></div>
        <div class="NavigatorView">
            <div>
                <ul>
                    <li><a class="a1"  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>

        </div>
    </body>
</html>
时间: 2024-10-10 21:58:25

导航栏制作的相关文章

水平导航栏制作

在网页中水平导航栏是每一张网页都有的. 现在做一个简单的导航栏: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta content="text/html" charset="utf-8">

关于网页导航栏制作的几种方法与常见问题解决(新人向)

无序列表是html页面排版经常用到的非常实用的标签,但是新手在使用无序列表时,经常会在横向排版上出现问题,笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题.(以css内部样式为例) [注:有同学之前问过我怎么制作一张网页,但只会html,本文用到均为css.故说明:若急需制作导航,无css技术基础的,在<head>标签中加<style rel="stylesheet" type="text/css"><s

03-Flutter移动电商实战-底部导航栏制作

1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平板电脑.台式机和其他平台提供一致,更广泛的外观和感觉.我喜欢称它为纸墨设计.Material Design 风格是一种非常有质感的设计风格,并会提供一些默认的交互动画. cupertino风格:即 IOS 风格组件,它重现了很多经典的有 IOS 特性的交互和界面风格,让适用于 IOS 的人感觉亲切和

Bootstrap4后台导航栏制作

<!Doctype html> <html lang="zh-cn"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

网站导航栏如何实现动态效果

导航栏是每一个网站都要有的,那么对于一般的导航栏制作,相信大家都会,而且也不会遇到什么麻烦,但是如何才能让网站导航栏实现动态效果估计这会难倒很多技术人员,那么下面就来为大家分析解答一下. Html代码: <html><head><title>导航演示</title><meta charset="UTF-8"><link rel="stylesheet" href="nav.css"

html css二级导航栏

二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签,给a设置样式,使其成为块级元素( display:block),这样只需要点击当前 li 范围区域即可触发a的跳转 3.给需要添加二级导航栏的li里面添加 ul>li ,给个类名,设置其样式为(display:none),使其在普通情况下隐藏 4.设置一级导航栏划过效果,当滑到有二级导航栏的 li 时,

制作水平导航栏

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <title>制作水平导航栏</title> 9 <style type="text/css&qu

巧妙使用checkbox制作纯css动态导航栏

前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked 属性.巧妙地制作导航栏 结果: 我们主要制作成这样这样的的导航栏: 首先.我们写出相对的html  由于时间问题.svg没有处理到类中.所以这里给出svg的空标签.大家如果想看效果.可以到我的git里面fork一份 <div class="nav-child"> <in

2017-3-30 Js实现导航栏,选项卡,图片轮播的制作

(一)导航栏的制作 显示的效果: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type=&quo