前端练习静态网页（四-END）：底部菜单

最新推荐文章于 2022-11-14 20:37:24 发布

VIP文章 Wby_Nju

最新推荐文章于 2022-11-14 20:37:24 发布

阅读量1.7k

点赞数 3

分类专栏：前端

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

版权

文章目录

一、导航栏
二、分割线
- 2.1 直觉方式
三、底部信息
附录
- 当前所有代码
- 待解决的问题

一、导航栏

导航栏的完成通过列表形式完成。

这里注意到导航栏的点。一般来说是可以通过设置<ul>元素的list-style-type标签完成的，但是这里我们看到，只有部分列表项有point，这可如何是好呢？
我设置一个点形格式，设置左右边距达到。

div.bottom {
   
    background-color: var(--bottom_backgroundColor);
    height: 100px;
}

div.bottom ul.bootomNav {
   
    list-style-type: none;
    margin-left: 25%;
}

div.bottom ul.bootomNav li {
   
    float: left;
    position: relative;
    width: auto;
}

/* 设置间隔点 */
div.bottom ul.bootomNav li.point {
   
    margin-right: 20px;
    margin-left: 20px;
    
    margin-top: 40px;
    color: white;
    font-size: 12px;
    font-weight: normal;
}

div.bottom ul.bootomNav li a {
   
    margin-top: 40px;
    /* 设置链接内容显示的格式*/
    /* 把链接显示为块元素可使整个链接区域可点击 */
    display: block;
    color: white;
    /* 去除下划线 */
    text-decoration: none;
    width: auto;
    /* 字体 */
    font-family: var(--nav_fontTypeface);
    font-size: var(--nav_fontSize);
    font-weight: var(--nav_fontWeight);
}

    <!-- 底部菜单 -->
    <div class="bottom">
        <ul class="bootomNav">
            <li><a href="#">首页</a></li>
            <li class="point">•</li>
            <li><a href="#">天恒网络</a></li>
            <li class="point">•</li>
            <li><a href="#">天恒智家</a></li>
            <li class="point">•</li>
            <li><a href="#">关于我们</a></li>
            <li class="point">•</li>
            <li><a href="#">在线商城</a></li>
            <li class="point">•</li>
            <li><a href="#">个人中心</a></li>
        </ul>
    </div>

在这里插入图片描述

二、分割线

2.1 直觉方式

注意到这里有一条白色的分割线
在这里插入图片描述
直觉通过设置两各元素间的1px间隔来完成，效果如下：

感觉有点不尽人意不过暂时没找到更好的方案。用了这篇文章的分割线方式依然感觉不是很好。

三、底部信息

在这里插入图片描述
这一块儿就是涉及到，文字居中的制作，使用text-align: center
结果在事件的过程中，遇到问题：底部的div跑到了顶部。没有找到合适的解决方案，使用了固定高度的方式解决了问题。

附录

当前所有代码

<html>

<head>
    <link rel="stylesheet" type="text/css" href="myStyle.css">
    <!-- <script src="myJavaScript.js"></script> -->
</head>

<body>
    <!-- 顶部导航信息 -->
    <div class="nav">
        <ul id="navigator">
            <li class="logo"><img src="./images/logo.png"></li>
            <li>
                <input type="submit" value="登录"></li>
            <li><a href="# ">个人中心</a></li>
            <li><a href="# ">在线商城</a></li>
            <li><a href="# "

最低0.47元/天解锁文章

Wby_Nju

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端练习静态网页（四-END）：底部菜单

文章目录一、导航栏二、分割线一、导航栏导航栏的完成通过列表形式完成。这里注意到导航栏的点。一般来说是可以通过设置<ul>元素的list-style-type标签完成的，但是这里我们看到，只有部分列表项有point，这可如何是好呢？我设置一个点形格式，设置左右边距达到。div.bottom { background-color: var(--bottom_back...
复制链接

扫一扫