css---如何制作菜单栏（附加二级菜单栏）

最新推荐文章于 2024-07-13 11:50:40 发布

扎刺

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量845

点赞数

分类专栏： html 文章标签： css html

本文链接：https://blog.csdn.net/weixin_45323349/article/details/115700870

版权

html 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

最终样式
在这里插入图片描述
HTML文件

<html>
    <head>
        <!--line-height 把字体的所占的空间高度也变成了40-->
        <title>菜单导航</title>
        <!--连接css文件  href 后面接的是css文件名  
        rel="stylesheet"表示调用的是一种样式。告诉浏览器你将采用一个样式表文件
		简单来说就是告诉浏览器你将采用什么编码来对下面的内容进行处理
		type 说明的是具体调用文件样式是css类型
		-->
       <link rel= "stylesheet" href = st.css type="text/css" />
    </head>
    <body>
    <!--给ul标签改个名字-->
        <ul class = "mune">
            <li>
                <a href="https://www.imnu.edu.cn/">首页</a>
                <!--创建二级标签 div-->
                <div>
                    <a href="https://www.imnu.edu.cn/">二级标签</a>
                </div>
                <div class = "div1"><!--三级标签和二级标签写法类似-->
                    <a href="https://www.imnu.edu.cn/">三级标签</a>
                </div>
                
            </li>
            <li>
                <a href="https://www.imnu.edu.cn/">学校概况</a>
                <div>
                    <a href="https://www.imnu.edu.cn/">二级标签</a>
                </div>
            </li>
            <li>
                <a href="https://www.imnu.edu.cn/">机构设置</a>
                <div>
                    <a href="https://www.imnu.edu.cn/">二级标签</a>
                </div>
            </li>
            <li>
                <a href="https://www.imnu.edu.cn/">人才培养</a>
                <div>
                    <a href="https://www.imnu.edu.cn/">二级标签</a>
                </div>
            </li>
            <li>
                <a href="https://www.imnu.edu.cn/">科学研究</a>
                <div>
                    <a href="https://www.imnu.edu.cn/">二级标签</a>
                </div>
            </li>
            <li>
                <a href="https://www.imnu.edu.cn/">合作交流</a>
                <div>
                    <a href="https://www.imnu.edu.cn/">二级标签</a>
                </div>
            </li>
            <li>
                <a href="https://www.imnu.edu.cn/">公共服务</a>
                <div>
                    <a href="https://www.imnu.edu.cn/">二级标签</a>
                </div>
            </li>
        </ul>
        
    </body>
</html>

CSS文件

.mune{
/*取消无序列表的小黑点、*/
    list-style: none;
  
}
  /*设置每一个绿色区域的属性*/
  /*利用无序列表写的，若使用p标签会很不好控制*/
.mune li{
	
    width : 100px;
    height: 40px;
   /* 设置文本这一隐形框架的行高与font-size不一样，
   文本中的每一个字符都有一个不可见的框，
   这些框又被放在两条不可见的横线中（垂直居中），
   两条横线的距离就是行高*/
    line-height: 40px;
    /*改变列表排列顺序，从左向有排序 float 浮动*/
    float: left;
    /*背景颜色*/
    background-color: rgb(47, 179, 69);
    /*设置文本位于中心*/
    text-align: center;
    /*设置外边距按顺时针的顺序*/
    margin: 0px 10px;
    /*字体颜色*/
    color: floralwhite;
    font-size: 16px;
   
    
}
/*设置当鼠标放在li时将变成该状态*/
.mune li:hover{
    /*字体变大*/
    font-size: 17px;
    
}
/*二级标签设置*/
div{
    width : 100px;
    height: 40px;
    background-color: rgb(131, 214, 131);
    
    position: absolute;
    top:50px;
    display: none;
}
.div1{
    width : 100px;
    height: 40px;
    background-color: rgb(131, 214, 131);
     /*设置*/
    position: absolute;
    top:92px;
    display: none;
}

.mune li:hover div{
    display: block;
}
/*修改默认模式 点击网站之后的文本样式*/
.mune li a:visited{
    color: floralwhite;
}
/*未点击时的状态  取消默认的有下划线模式*/
.mune li a:link {
/*文本修饰控制有无下划线*/
    text-decoration:none;  
}

①
position定义和用法
position 属性规定元素的定位类型。

说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position赋值：absolute
则生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

扎刺

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css---如何制作菜单栏（附加二级菜单栏）

<html> <head>  <title>菜单导航</title> <link rel= "stylesheet" href = st.css type="text/css" /> </head> <body> <ul class = "mune"&
复制链接

扫一扫

专栏目录