前端炒冷饭：03 垂直导航

最新推荐文章于 2022-07-21 11:15:02 发布
最新推荐文章于 2022-07-21 11:15:02 发布
阅读量226 收藏
点赞数
分类专栏： 前端学习 文章标签： 垂直导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lpZhouYi/article/details/84961217
版权

垂直导航

效果

代码目录：

代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新布局</title>
    <link rel="stylesheet" href="../CSSFile/index.css" type="text/css">
</head>
<body>
<ul>
    <li>
        <a href="#" class="actvte">
            <h3>
                新博客
            </h3>
        </a>
    </li>
    <li>
        <a href="#">
            <h3>
                往期博客
            </h3>
        </a>
    </li>
    <li>
        <a href="#">
            <h3>
                日常吐槽
            </h3>
        </a>
    </li>
    <li>
        <a href="#">
            <h3>
                我的歌唱
            </h3>
        </a>
    </li>
</ul>
<div>


    版权声明：本文为博主原创文章，转载请附上博文链接！
</div>
</body>
</html>

CSS代码

body
{
    margin: 0;
}

ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f8715f;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li
{
    display: inline;
}

li a
{
    display: block;
    color: #6ca3ff;
    padding: 8px 16px;
    text-decoration: none;
}

li a.header
{
    background-color: #f89cab;
    color: #285cf8;
}

li a.actvte
{
    background-color: #f81c30;
    color: #7643f8;
}

li a:hover:not(.actvte)
{
    background-color: #e2bff8;
    color: #f8e5c4;
}

div
{
    margin-left: 25%;

    padding: 1px 16px;

    height: 1000px;
}

JS代码

/**
 * 无
 */

 

lpZhouYi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端组件从零之垂直导航栏
weixin_38343158的博客
06-10 1134
今天继续组件文章的分享。结合上一次讲到的水平导航栏，今天就讲讲垂直导航栏。其实原理和水平导航栏原理其实差不多类似，那么就来谈谈。 说到垂直导航栏，用到最多的地方就是电商网页，特别像淘宝，天猫，京东，苏宁这些网站都有垂直导航栏。垂直导航栏能展示到更多的子项目供用户链接到想了解的地方。这里结合天猫的垂直导航栏来说说垂直导航栏如何写完成。 首先肯定需要一个最外层的盒子来装载全部的内容。然后就是商品分类...
【STM32炒冷饭】GPIO和外部中断
m0_53777801的博客
08-31 1399
【STM32炒冷饭】GPIO和外部中断（标准外设库） 用STM32系列单片机做项目已经一年了，突然想开个新坑写点东西，相当于自己的理解吧，有空就更，搭建开发环境和配置工程就不多说了，网上大把教程，介于本人实在是看不惯MDK的UI风格，所以一直使用VSCode+Keil Assist+MDK-ARM的开发方式 直接进入主题，本系列会写标准外设库和HAL库两版，使用的单片机为STM32F407ZGT6，使用了正点原子提供的SYSTEM文件夹，因为库函数本没有提供延时函数，为了方便直接使用正点原子提供的延时函数
学习笔记 css垂直导航
热门推荐
06-03 3万+
学习笔记 css垂直导航 <!DOCTYPE html> <html> <head> <style> ul { margin: 0px; padding: 0px; list-style: none; } li a{ display: block; width: 200px; height: 39px; line-height: 39px; text-decoration:
垂直导航栏
小白小白从不日别的博客
04-02 6138
垂直导航栏这一类导航栏在很多网站上都是很常见的，比如京东 因此可以说是一个前端人员必须要会的吧 在这里目前给出了两种方式去实现：第一种就是利用html+css实现，这里模仿的是小米官网的垂直导航、第二种方式就是利用html+css+js实现 不管是第一种还是第二种主要都是利用定位来实现的 先来看第一种吧 先准备相关素材以及一些基础的css样式类，素材这里省略，基础的样式类如下： * { margin: 0; padding: 0; } ul,li { list-s
前端实习运用bootstrap4制作垂直导航栏的一个问题
zzh的博客
12-14 1759
大二的我有幸通过实习岗位加入一个公司的项目，大致做的是一个中小学生网上在线学习的网站，后端运用php，前端主要借助bootstrap4快速开发。 最近在做页面整体框架的左垂直导航栏时，有一个需求让现在的我着实有点头疼，需求内容大致如下： 首先，满足每个垂直导航块的一级菜单内部包含二级菜单。 其次，每次打开一个一级菜单，其余的一级菜单自动关闭。 接着，一级菜单的第一个默认打开，并且其中二级菜单的第...
bootstrap实现垂直导航框架
baidu_33403616的博客
04-18 2万+
<html> <head> <title>Bootstrap 实例 - 垂直的胶囊式导航菜单</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.
炒冷饭系列-STM32F103之DAC
chenyouledashen的博客
10-10 2589
WK_UP 和 KEY1（也就是上下键）来实现对 DAC 输出的幅值控制。按下 WK_UP 增加，按 KEY1 减小。同时在 LCD 上面显示 DHR12R1 寄存器的值、 DAC 设计输出电压以及 ADC 采集 到的 DAC 输出电压。 #include "led.h" #include "delay.h" #include "key.h" #include "sys.h" #include "lcd.h" #include "usart.h" #include "lsens.h" #include "a
炒冷饭系列-STM32F103之RTC
chenyouledashen的博客
10-07 322
#include "led.h" #include "delay.h" #include "key.h" #include "sys.h" #include "lcd.h" #include "usart.h" void myRtcHandler(void); void GetTime(void); u8 isLeapYear(u32 year); /************************************************ ALIENTEK 战舰STM32F103开发板实验
炒冷饭系列-STM32F103之DMA
chenyouledashen的博客
10-11 328
#include "led.h" #include "delay.h" #include "key.h" #include "sys.h" #include "lcd.h" #include "usart.h" #include "lsens.h" #include "adc.h" #include "dac.h" //#include "pwmdac.h" #define SEND_BUF_SIZE 8200 u8 SendBuff[SEND_BUF_SIZE]; //发送数据缓冲区 u16 DMA1
炒冷饭系列-STM32F103之光敏传感器
chenyouledashen的博客
10-10 1427
#include "led.h" #include "delay.h" #include "key.h" #include "sys.h" #include "lcd.h" #include "usart.h" void myLseorInit(void); u16 myLseorHandler(u8 ch); u16 LseorcArc(u8 ch,u8 time); int main(void) { u8 lightval=0; delay_init(); //延时函数初
h5+css 垂直导航菜单
weixin_30832405的博客
12-06 351
http://blog.csdn.net/baidu_32731497/article/details/51814427 转载于:https://www.cnblogs.com/zhangbojiangfeng/p/7992017.html
HTML中使用CSS+JS实现简单的简约垂直导航栏
RBK的博客
07-12 1108
直接上代码。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>主页</title> <style> body { font: normal 11px verdana; } ul {
jquery 导航栏demo(竖)
web前端技术交流分享
11-24 628
导航栏 *{ padding:0; margin:0; } li{ list-style:none; } a{ text-decoration:none; color:#333; font-size:12px; } .box{ border:solid 1px #ccc; width:123px; margin:20px auto; } .box a{ paddi
【前端实例】自适应垂直滑动导航条
LaoYe的博客
02-22 1616
【提出需求】 当屏幕小于内容显示的高度时，用户可以通过上下滑动导航条来浏览被隐藏的内容。 【解决问题】 1、判断内容是否被隐藏      答：解决方式分为CSS和JS，前者最简单后者相对麻烦，后者因为需要获取当前容器距离顶部的像素再加上本身的高度，再和浏览器的浏览高度进行比较，如果大于则说明多余的内容被隐藏了。 2、解决CSS样式overflow隐藏多余内容后滚动条的问题      答...
垂直-水平导航菜单的制作
还没想好
05-05 3497
导航菜单，前端web开发，慕课网教程
CSS实现垂直/水平导航栏
ZhuangXuward
04-11 2万+
先看效果 垂直导航栏 水平导航栏 导航栏 = 链接列表 导航栏需要标准的 HTML 作为基础。在我们的例子中，将用标准的 HTML 列表来构建导航栏。导航栏基本上是一个链接列表，因此使用 ul 和 li 元素是非常合适的：<ul> <li><a href="default.asp">Home</a></li> <li&gt...
一个水平、垂直的导航demo
wang_kai_7的博客
10-06 1316
模仿layui做的水平和垂直导航 代码地址：代码地址 阅览地址：预览页面 gif:  
CSS技能点--垂直导航栏实例
程序员大阳
07-21 2457
垂直导航栏可以说是相当常见，尤其是在一些管理系统中，左侧往往是一个垂直导航栏，便于用户快速切换菜单。 本篇就来实现一个简单的垂直导航栏
Web前端开发-导航效果
viewerlin的博客
04-23 5276
Web前端开发，自学笔记整理 导航效果 1.导航效果1 完整代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航效果&lt;/title&gt; &lt;styl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值