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>
相关文章
|
2天前
|
移动开发 前端开发 HTML5
HTML5作业(六)-----响应式放大悬浮菜单
本实验旨在熟悉CSS3的transition动画和阴影效果,任务是创建一个响应式放大悬浮菜单。当鼠标悬停在菜单上时,菜单会放大并添加立体阴影。代码示例包括设置背景色、字体样式、flex布局以及菜单项的样式和过渡效果。HTML结构包含导航菜单的链接,应用了外部CSS文件中的样式。
|
3月前
|
移动开发 HTML5 容器
HTML5——周技能检测——菜单编辑——2022年11月22日(考完)
HTML5——周技能检测——菜单编辑——2022年11月22日(考完)
20 0
|
5月前
|
前端开发
HTML+CSS实现菜单的3D翻转特效
HTML+CSS实现菜单的3D翻转特效
|
6月前
HTML左侧菜单
HTML左侧菜单
19 0
|
移动开发 HTML5
HTML5/CSS3超酷环形动画菜单
在线演示 本地下载
1103 0
|
iOS开发
HTML5_CSS3实现iOS Path菜单
在线演示 本地下载
897 0
|
移动开发 HTML5
HTML5/CSS3鼠标悬停动画菜单按钮
在线演示 本地下载
1019 0
|
移动开发 HTML5
基于HTML5和SVG的手机菜单动画
在线演示 本地下载
978 0