html小例子之简单菜单栏

简介: html简单菜单栏

html简单菜单栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <style>
        
        /* 简单菜单栏 */

        a {
            display: block;
            width: 230px;
            height: 40px;
            font-size: 16px;
            color: white;
            text-decoration: none;
            background-color: gray;
            text-indent: 2em;
            line-height: 40px;
        }

        a:hover {
            background-color: aqua;

        }

    </style>
</head>

<body>
    <a href="#">手机电脑</a>
    <a href="#">电视</a>
    <a href="#">笔记本</a>
    <a href="#">耳机</a>
    <a href="#">音响</a>
</body>

</html>
相关文章
|
8月前
|
移动开发 前端开发 HTML5
HTML5作业(六)-----响应式放大悬浮菜单
本实验旨在熟悉CSS3的transition动画和阴影效果,任务是创建一个响应式放大悬浮菜单。当鼠标悬停在菜单上时,菜单会放大并添加立体阴影。代码示例包括设置背景色、字体样式、flex布局以及菜单项的样式和过渡效果。HTML结构包含导航菜单的链接,应用了外部CSS文件中的样式。
85 0
|
8月前
|
移动开发 HTML5 容器
HTML5——周技能检测——菜单编辑——2022年11月22日(考完)
HTML5——周技能检测——菜单编辑——2022年11月22日(考完)
51 0
|
前端开发
HTML+CSS实现菜单的3D翻转特效
HTML+CSS实现菜单的3D翻转特效
|
前端开发
HTMl+CSS制作二级菜单或二级导航栏
 二级菜单的实现思路为: 1.在默认状态下,使用display:none;将二级菜单隐藏。  2.当一级菜单中的列表标签li获取焦点(hover)后,使用display:blick;将二级菜单显示出来。  3.使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。
1317 0
HTMl+CSS制作二级菜单或二级导航栏
|
移动开发 HTML5
HTML5/CSS3超酷环形动画菜单
在线演示 本地下载
1137 0
|
iOS开发
HTML5_CSS3实现iOS Path菜单
在线演示 本地下载
994 0
|
移动开发 HTML5
HTML5/CSS3鼠标悬停动画菜单按钮
在线演示 本地下载
1049 0
|
移动开发 HTML5
基于HTML5和SVG的手机菜单动画
在线演示 本地下载
1030 0