Django-标签 ui/li

_Gavin124_

已于 2023-03-02 11:23:49 修改

阅读量224

点赞数

分类专栏： Django 文章标签： django

于 2020-03-23 15:13:11 首次发布

本文链接：https://blog.csdn.net/weixin_41515213/article/details/105049188

版权

Django 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

Django-标签 ui/li

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片提示效果</title>
    <script src="jquery.min.js"></script>
    <style type="text/css">
        #menu {
            font: 12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
            width: 100%;
        }

        #menu, #menu li {
            list-style: none; /* 将默认的列表符号去掉 */
            padding: 0; /* 将默认的内边距去掉 */
            margin: 0; /* 将默认的外边距去掉 */
            float: left; /* 往左浮动 */
            display: block;
        }

        #menu li a {
            display: inline-block; /* 将链接设为块级元素 */
            width: 150px; /* 设置宽度 */
            height: 30px; /* 设置高度 */
            line-height: 30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
            text-align: center; /* 居中对齐文字 */
            background: #3A4953; /* 设置背景色 */
            color: #fff; /* 设置文字颜色 */
            text-decoration: none; /* 去掉下划线 */
            border-right: 1px solid #000; /* 在左侧加上分隔线 */
        }

        #menu li a:hover {
            background: #146C9C; /* 变换背景色 */
            color: #fff; /* 变换文字颜色 */
        }

        #menu li a.last {
            border-right: 0; /* 去掉左侧边框 */
        }
    </style>

</head>
<body>
<ul id="menu">
    <li><a href="http://www.baidu.com">Baidu.Com</a></li>
    <li><a href="http://www.Code52.Net">Code52.Net</a></li>
    <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
    <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>
</body>
</html>

_Gavin124_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django-标签 ui/li

html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>图片提示效果</title> <script src="jquery.min.js"></script> <style type="t...
复制链接

扫一扫