html+css实现下拉菜单和字体图标

最新推荐文章于 2024-05-03 00:15:06 发布

前端小白在前进

最新推荐文章于 2024-05-03 00:15:06 发布

阅读量748

点赞数 3

分类专栏： html+css构成案例文章标签： css html html5

本文链接：https://blog.csdn.net/m0_52040370/article/details/114498547

版权

html+css构成案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下拉菜单

下拉菜单的制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
</head>
<body>
<div class="dropdown">
    <button>下拉菜单</button>
    <div class="content">
        <a herf="">首页</a>
        <a herf="">学习中心</a>
        <a herf="">考试中心</a>
        <a herf="">考试动态</a>
    </div>
</div>
</body>
</html>

.dropdown{
            display:inline-block;
            position:relative;
        }
        button{
            background-color:pink;
            color:white;
            border:none;
            margin:6px;
            padding:5px;
            font-size:16px;
        }
        /*下拉内容，绝对定位，初始不显示，背景颜色为pink*/
        .content{
            display:none;
            position:absolute;
            background-color:pink;
            min-width:160px;
            box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index:1;
        }
        /*下拉内容a链接样式*/
        .content a{
            display:block;
            color:white;
            padding:12px 16px;
            text-align:center;
        }
        /*鼠标移到下拉菜单a链接时背景变为灰色*/
        .content a:hover{
            background-color:gray;
        }
        button:hover{
            background-color:gray;
        }
        /*鼠标点击盒子区域，显示下拉菜单！*/
        .dropdown:hover .content{
            display:block;
        }

字体图标

字体图标的复习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器使用场景-字体图标</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src:  url('fonts/icomoon.eot?6m2w13');
            src:  url('fonts/icomoon.eot?6m2w13#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?6m2w13') format('truetype'),
            url('fonts/icomoon.woff?6m2w13') format('woff'),
            url('fonts/icomoon.svg?6m2w13#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border:1px solid red;
        }
        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            content: "";
            font-family: 'icomoon';
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

前端小白在前进

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
html+css实现下拉菜单和字体图标

下拉菜单的制作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>下拉菜单</title></head><body><div class="dropdown"> <button>下拉菜单</button> <div class="conten.
复制链接

扫一扫