html 导航栏

页面显示:


代码参考:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>实验3</title>  
    <style type="text/css">  
         ul{/*设置导航栏的框框*/  
            margin: 30px auto;/*框框整体的位置,30px是指离网页的顶部和下部的距离,auto控制的是左右距离为自动调节*/  
            width: 600px;/*框框的宽度*/  
            height: 350px;/*框框的长度*/  
            padding: 0px;/*将框框的padding设置为零,不然会导致框框里的内容与框边缘有间隔*/  
            border:1px solid #000;/*添加边框*/  
        }  
        li{  
            list-style-type: none;/* 去掉li前的点 */  
            float: left;/*将li设置成做浮动,变为联动*/  
        }  
        a{  
            display: block;/*将a变成块状*/  
            width: 100px;/*设置块的宽度*/  
            height: 50px;/*设置块的长度*/  
            font-family: Microsoft Yahei;  
            line-height: 50px;/*设置字体在块中的高度*/  
            background-color: #2f4f4f;  
            margin: 0px 0px;/*块里的高宽通过margin设置*/  
            color: #fff;  
            text-align: center;/*字体居中*/  
            text-decoration: none;/*去掉下划线*/  
            font-size: 15px;  
        }  
        a:hover{  
            background-color: #2f6f4f;  
        }  
    </style>  
</head>  
<body>  
    <div >  
        <ul class=daohang>  
            <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>  
  
  
    </table>  
</body>  
</html> 


原文链接:

https://blog.csdn.net/no2015214099/article/details/72794032

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值