前端练习静态网页（一）：导航栏

最新推荐文章于 2024-06-26 20:20:57 发布

Wby_Nju

最新推荐文章于 2024-06-26 20:20:57 发布

阅读量7.6k

点赞数 15

分类专栏：前端

本文链接：https://blog.csdn.net/Wby_Nju/article/details/105240322

版权

在这里插入图片描述

文章目录

一静态网页
- 1.1. 导航栏
附录

一静态网页

完成静态网页，也就是不需要点击事件。
所以大概需要的内容即：html+css
在这里插入图片描述
大概需要：制作导航栏、布局方式、底部栏

1.1. 导航栏

需要的效果制作如下：
在这里插入图片描述

1.1.1 不带logo的导航栏

在这里插入图片描述

实现过程

Part I: html部分

    <ul>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
    </ul>

实际上html部分的代码就是简单的用ul和li定义标签列表

html中<a>标签指示超链接，例如：<a href="http://www.w3school.com.cn">W3School</a>为指向w3school的超链接
href代表链接地址，常见的有：<link rel="stylesheet" type="text/css" href="myStyle.css">代表链接到当前目录下的myStyle.css文件。
#符号代表链接当前页面
比如：我们把链接设置为<a href="example.html"> 跳转到导航页</a>

Part II:css样式部分
我们需要使标签列表横向排列，参见文章：

.top ul {
   
    /* 清除ul标签的默认样式 */
    /*宽度也改为自动*/
    width: auto;
    list-style-type: none;
    margin-left: 5%;
    padding: 0;
}

.top li {
   
    /* 使li内容横向浮动，即横向排列  */
    float: right;
    /* 两个li之间的距离*/
    margin-left: 2%;
    position: relative;
}

列表横向排布
float属性介绍： float 属性定义元素在哪个方向浮动。
列表项标志类型
属性list-style-type介绍：使用none表示无标记
定位方式
position属性介绍：relative生成相对定位，相对于其正常位置进行定位。
ps. 用fixed和absolute定位方式情况：

实现效果

在这里插入图片描述

<html>

<head>
    <link rel="stylesheet" type="text/css" href="myStyle.css">
</head>

<body>
    <div class="top">
        <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>
            <li><a href="#">个人中心</a></li>
        </ul>
    </div>
</body>

</html>

.top {
   
    /* 设置宽度高度背景颜色 */
    height: auto;
    /*高度改为自动高度*/
    width: 100%;
    margin-left: 0;
    /*固定在顶部*/
    position: fixed;
    /*离顶部的距离为0*/
    top: 0;
    margin-bottom: 5px;
    background: rgb(237, 240, 245);
}

.top ul {
   
    /* 清除ul标签的默认样式 */
    width: auto;
    /*宽度也改为自动*/
    list-style-type: none;
    margin-right: 5%;
    padding: 0;
}

.top li {
   
    /* 使li内容横向浮动，即横向排列  */
    float: right;
    /* 两个li之间的距离*/
    margin-right: 2%;
    position: relative;
}

.top li a {
   
    /* 设置链接内容显示的格式*/
    display: block;
    /* 把链接显示为块元素可使整个链接区域可点击 */
    color: black;
    text-align: center;
    padding: 3px;
    overflow: hidden;
    text-decoration: none;
    /* 去除下划线 */
}

.top li a:hover {
   
    /* 鼠标选中时背景颜色 */
    background-color: rgb(46, 158, 253);
}

1.1.2 带logo的导航栏

在这里插入图片描述

首先在.top li中把元素浮动方向改为float: right;，然后在.top ul</

最低0.47元/天解锁文章

Wby_Nju

关注

15
点赞
踩
80

收藏

觉得还不错? 一键收藏
1
评论
前端练习静态网页（一）：导航栏

文章目录一静态网页1.1 html部分1.1.1 导航栏一静态网页完成静态网页，也就是不需要点击事件。所以大概需要的内容即：html+css可以在完成静态页面之后，制作鼠标提示功能1.1 html部分大概需要：制作导航栏、布局方式、底部栏1.1.1 导航栏效果制作如下：...
复制链接

扫一扫