CSS导航栏的制作

 


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="../static/reset.css" />
    <style>
        /*
        导航栏CSS设置
         */
        .navigation {
            width:1210px;
            height:48px;
            background-color: #E8E7E3;
            margin:50px auto;
        }
        .navigation li{
            /*浮动会在父元素的范围内浮动
             */
            float: left;
            /*文字居中的方法
 */
            height: 48px;
            line-height: 48px;

        }
        .navigation li a{
            /*
            块元素会占据整个父类元素的长和宽
            行内元素只会被内容撑开
*/
            display: block;
            font-size: 18px;
            color: #8F8F8E;
            
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值