CSS制作水平导航栏

<style type ="text/css" >
    ul li a
    {
    color:#000000;
        text-decoration:none;
        padding-top:10px;
        display :block ;
        width:100px;
        height:30px;
        text-align :center ;
        background-color:#ececec;
        margin-left:2px;
    }

   ul li{


        float :left ;

         }
    a:hover
    {
    background-color:#bbbbbb;
    color :#ffffff;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul >
    <li><a href ="Default.aspx">中国</a></li>
    <li><a href ="http://www.cctv.com/">中央</a></li>
    <li><a href="http://www.163.com/">网易</a></li>
    <li><a href="http://www.sina.com.cn/">新浪</a></li>   
    </ul>
    </div>
    </form>
</body>

转载于:https://www.cnblogs.com/jhxk/articles/1610954.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
制作 CSS 导航一般有以下几个步骤: 1. HTML 结构:首先,需要在 HTML 中创建导航的结构,一般可以使用 `ul` 和 `li` 标签来创建一个无序列表,每个列表项(`li` 标签)代表一个导航链接。 2. CSS 样式:接下来,需要使用 CSS导航进行样式设置。可以为导航添加背景颜色、字体颜色、字体大小等样式,同时也需要设置列表项的样式,如鼠标悬停时的样式、选中时的样式等。 3. JavaScript 交互:如果需要实现更高级的交互效果,如下拉菜单、响应式布局等,可以使用 JavaScript 来实现,例如使用 jQuery 库等。 下面是一个简单的 CSS 导航示例代码: HTML: ``` <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> </ul> </nav> ``` CSS: ``` nav { background-color: #333; height: 50px; } ul { list-style: none; margin: 0; padding: 0; display: flex; } li { flex: 1; text-align: center; } a { display: block; color: #fff; text-decoration: none; font-size: 18px; line-height: 50px; } a:hover { background-color: #555; } a.active { background-color: #f00; } ``` 这个示例是一个简单的水平导航,使用了 Flexbox 布局。其中,`nav` 元素设置了背景颜色和高度,`ul` 元素设置了列表样式、边距和内边距,并使用 Flexbox 布局,`li` 元素设置了 Flexbox 弹性布局和文本居中,`a` 元素设置了字体颜色、字体大小和行高,并且使用了块级元素展示。同时,`a:hover` 设置了鼠标悬停时的背景颜色,`a.active` 设置了选中时的背景颜色。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值