5、个人简介网站项目实战开发（右侧悬浮导航栏代码实现）

2019-11-13宗九尘博客个人简介网站web项目实战1021

- N +

请记住投稿邮箱是：203239351@qq.com 注册联系QQ203239351

前言：

今天做一个网站首页右侧导航栏开发，由于是纯html+css写的，没有添加js效果，所以只有初略功能，没有那么细致，仅供大家参考！个人简介网站项目实战开发（右侧悬浮导航栏代码实现）

网站建设.jpg

悬浮右侧导航栏功能：

1、div盒子不随网页滚动而滚动（浮动）

2、ul/li布局

3、超链接a标签相关设置

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{
            width: 100%;
            height: 1900px;
            /*height: 1900px;网页高度*/
            background-color: lightskyblue;
            /*background-color: lightskyblue;网页背景颜色*/
        }
        .youfudong{
            width: 50px;
            /*width: 50px;右侧div浮动的宽度*/
            height: 300px;
            /*height: 300px;右侧浮动div的高度*/
            position: fixed;
            /*position: fixed;生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。*/
            z-index: 999;
            /*z-index: 999;设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
            top: 200px;
            /*top: 200px;div相对浏览器顶部距离的定位*/
            right: 10px;
            /*right: 10px;div相对于浏览器右侧距离的定位*/
        }
        .youfudong li{
            list-style: none;
            /*list-style: none;清除li标签默认自带的小圆点*/
            text-align: center;
            /*text-align: center;让文字水平居中*/
            width: 40px;
            height: 40px;
            padding-top: 5px;
            /*padding-top: 5px;内边距5像素*/
            border: 1px solid red;
            border-radius: 5px;
            /*border-radius: 5px;边框圆角*/
            line-height: 18px;
            /*line-height: 18px;行高18像素*/
            margin-bottom: 10px;
            background-color: #ffffff;
        }
        .youfudong li a{
            text-decoration: none;
            /*text-decoration: none;清除a标签的样式，下划线*/
            color: black;
        }
    </style>
</head>
<body>
<!--以下div是为了给整个页面添加背景颜色，添加网页高度，方便观察右侧浮动div的效果-->
<div class="div">
<!--以下div是右侧浮动的布局代码，也是文章的正式代码-->
    <div class="youfudong">
        <ul>
            <li><a href="#">返回顶部</a></li>
            <li><a href="javascript:">在线客服</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>
</div>
</body>
</html>