menu bar (html+css)

来源：互联网发布：程序员怎么面试编辑：程序博客网时间：2024/06/06 05:46
这里写图片描述
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>        .menu{            width: 694px;            height: 50px;            margin: 50px auto 0;            list-style: none;            padding: 0;            /*decrease the distance of <a> to 0*/            font-size: 0px;        }        .menu li{            /*convert the li from inline element to inline-block element,            to have all the attribute of block element*/            display: inline-block;            width: 92px;            height: 48px;            border: 1px solid gold;            /*decrease the distance of <a> to 0*/            font-size: 16px;            /* merge the border of the adjacent li (from 2 to 1)*/            margin-right: -1px;            /*make it align in center*/            text-align: center;            line-height: 48px;        }        .menu a{            font-family:'Microsoft Yahei';            color: pink;            text-decoration: none;        }        .menu li:hover{            background-color:bisque;        }        .menu a:hover{            color: red;        }    </style></head><body><ul class="menu">    <li><a href="">HomePage</a></li>    <li><a href="">Company</a></li>    <li><a href="">news</a></li>    <li><a href="">jok</a></li>    <li><a href="">music</a></li>    <li><a href="">movie</a></li>    <li><a href="">painting</a></li></ul></body></html>
阅读全文
1 0