侧拉列表、定位

最新推荐文章于 2023-07-18 16:31:54 发布

小呆狸

最新推荐文章于 2023-07-18 16:31:54 发布

阅读量105

点赞数

分类专栏：学习文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_44416290/article/details/118942885

版权

本文介绍了如何使用HTML5和CSS创建侧边导航栏，通过改变display属性控制元素的隐藏与显示，以及详细讲解了定位的四种方式：固定定位、粘性定位、绝对定位和相对定位的语法与应用场景。通过示例代码展示了如何实现鼠标悬停时显示隐藏的侧拉列表，同时探讨了定位在网页布局中的重要作用。

摘要由CSDN通过智能技术生成

关于display 转化的延伸部分，当display的属性值为none的时候，其就会隐藏起来，这可以让我们实现侧边导航栏的操作，下面讲一下侧边导航栏的制作

首先是建立一个主题的结构
创建一个盒子
在盒子中加入一个段落标签，
在段落标签中加入超链接标签与一定数量的span标签，按需要重复上述3、4操作
在css中对样式进行修改
清除浏览器自带的内外边距，超链接标签的下划线，并设置超链接标签的字体颜色
设置盒子的高度、宽度、行高、文字的水平对齐
将超链接标签转化为块元素，并将其浮动起来
将span标签隐藏起来，并设置宽度与高度并设置浮动

在鼠标滑到超链接标签时span标签再显示出来。简单源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .one{
            width: 600px;
            height: 50