【CSS 基础】07 拉手网导航栏的实现

来源：互联网发布：下载手机淘宝2017 编辑：程序博客网时间：2024/04/30 10:25

拉手网导航条效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                padding: 0;                margin: 0;            }            #menu{                              width: 699px;                height: 40px;                background: rgb(255, 126, 0);                margin: 0 auto;                margin-top: 50px;            }                       #menu a{                color: rgb(255, 255, 255);                font-family: Microsoft Yahei;                font-size: 14px;                font-weight: 700;                line-height: 40px; /*可以实现文字垂直居中*/                text-decoration: none; /*去掉下划线*/                padding-left: 18px;                padding-right: 18px;                display: inline-block; /*行内块级元素,可以设置宽高*/                height: 40px; /*定义高度,让按下后背景变色*/            }                       #menu a:hover{                background: #e46703;            }                   </style>    </head>    <body>              <div id="menu">                     <a href="">首页</a>            <a href="">身边团购</a>            <a href="">今日新单</a>            <a href="">美食</a>            <a href="">电影</a>            <a href="">酒店</a>            <a href="">旅游</a>            <a href="">商城</a>            <a href="">特价机票</a>                 </div>          </body></html>

微信公共号

阅读全文

0 0