格式化小拓
格式化小拓

day45-Netflix Mobile Navigation（左边侧边栏动态导航）

50 天学习 50 个项目 - HTMLCSS and JavaScript

day45-Netflix Mobile Navigation（左边侧边栏动态导航）

效果

day45-Netflix Mobile Navigation（左边侧边栏动态导航）_第1张图片

day45-Netflix Mobile Navigation（左边侧边栏动态导航）_第2张图片

index.html

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Netflix Mobile Navigationtitle>
head>

<body>
    
    <button class="nav-btn open-btn">
        <i class="fas fa-bars">i>
    button>
    
    <img src="https://source.unsplash.com/random" alt="Logo" class="logo">
    
    <p class="text">手机导航p>
    
    <div class="nav nav-black">
        
        <div class="nav nav-red">
            
            <div class="nav nav-white">
                
                <button class="nav-btn close-btn">
                    <i class="fas fa-times">i>
                button>
                
                <img src="https://source.unsplash.com/random" alt="Logo" class="logo">
                
                <ul class="list">
                    <li><a href="#">团队a>li>
                    <li><a href="#">位置a>li>
                    <li><a href="#">Netflix的生活a>li>
                    <li>
                        <ul>
                            <li><a href="#">Netflix文化备忘录a>li>
                            <li><a href="#">工作与生活的平衡a>li>
                            <li><a href="#">包容性与多样性a>li>
                            <li><a href="#">博客a>li>
                        ul>
                    li>
                ul>
            div>
        div>
    div>

    <script src="script.js">script>
body>

html>

style.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Muli', sans-serif;
    /* 子元素竖直居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}


.logo {
    width: 150px;
}

/* 点击按钮 */
.nav-btn {
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 20px;
}

/* 打开按钮 固定定位 */
.open-btn {
    position: fixed;
    top: 10px;
    left: 10px;
}

/* 导航 固定定位 */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    /* 通过移动隐藏 三层导航*/
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

/* visible 不隐藏 通过js控制 */
.nav.visible {
    transform: translateX(0);
}

/* 第一层背景 */
.nav-black {
    background-color: rgb(71, 209, 117);
    max-width: 480px;
    min-width: 320px;
    transition-delay: 0.4s;
}

.nav-black.visible {
    transition-delay: 0s;
}

/* 第二层背景 */
.nav-red {
    background-color: rgb(9, 181, 229);
    width: 95%;
    transition-delay: 0.2s;
}

.nav-red.visible {
    transition-delay: 0.2s;
}

/* 第三层背景 */
.nav-white {
    background-color: #fff;
    width: 95%;
    padding: 40px;
    position: relative;
    transition-delay: 0s;
}

.nav-white.visible {
    transition-delay: 0.4s;
}

/* 关闭按钮 */
.close-btn {
    opacity: 0.3;
    position: absolute;
    top: 40px;
    right: 30px;
}

/* 导航列表 */
.list {
    list-style-type: none;
    padding: 0;
}

.list li {
    margin: 20px 0;
}

.list li a {
    color: rgb(34, 31, 31);
    font-size: 14px;
    text-decoration: none;
}

.list ul {
    list-style-type: none;
    padding-left: 20px;
}

script.js

// 重点 flex position fixed transform transition transition-delay 通过延迟过渡展示动态效果
// 1.获取元素节点
const open_btn = document.querySelector('.open-btn')//打开按钮
const close_btn = document.querySelector('.close-btn')//关闭按钮
const nav = document.querySelectorAll('.nav')//三层导航
// 2.绑定事件 打开
open_btn.addEventListener('click', () => {
    nav.forEach(nav_el => nav_el.classList.add('visible'))
})
// 隐藏
close_btn.addEventListener('click', () => {
    nav.forEach(nav_el => nav_el.classList.remove('visible'))
})

你可能感兴趣的:(50天50个小demo前端,html5,css3,javascript,前端,侧边栏导航,动态)

  • 在VMware下安装Ubuntu12后出现的问题解决方法 shanzhizi Linuxvmwareubuntu
    今天再VMware9.0下安装了Ubuntu12.04的桌面版，结果安装成功，重启后输入用户密码，图形界面卡住没有反应了，但是可以进入字符界面。网上搜索找到了一个解决方法，尝试了一下果然可以，记录下来供大家参考吧：l另外还有一个问题，开机老是提示piix4_smbus0000:00:007.3:HostSMBuscontrollernotenabled，虽然说不会影响系统的正常运行，但是很影响开机
  • 《伴时匣》app开发技术分享--表单提交准备（4） 鸿蒙小林 鸿蒙端云一体化harmonyos
    技术栈Appgalleryconnect开发准备上一节我们实现了用户登录功能，现在我们进入首页，可以开始准备着手发布我们的日期计划了，在这之前我们先实现信息表的创建。在首页实现一个标题栏，一个悬浮的按钮。功能分析我们的信息表要展示的内容很多，首先是我们的事件名称，目标日期选择，公历农历，正数倒数，倒数类目的选择，是否实现置顶效果，是否显示精确时间，事件颜色，事件图标，事件心情，事件天气，跟用户绑定
  • yum 报错解决记录 孤高飘云影 linuxcentos运维
    创建一个虚拟机，在安装yum源的时候，执行到yummakecahce的时候，报如下的错误：解决方式：1、执行如下命令修改fastestmirror.conf的配置参数sed-i"s|enabled=1|enabled=0|g"/etc/yum/pluginconf.d/fastestmirror.conf2、备份一下原yum源文件mv/etc/yum.repos.d/CentOS-Base.rep
  • LGTM？Github中那些迷之缩写 SunTecTec github
    PR:PullRequest.拉取请求，给其他项目提交代码LGTM:LooksGoodToMe.朕知道了代码已经过review，可以合并SGTM:SoundsGoodToMe.和上面那句意思差不多，也是已经通过了review的意思WIP:WorkInProgress.传说中提PR的最佳实践是，如果你有个改动很大的PR，可以在写了一部分的情况下先提交，但是在标题里写上WIP，以告诉项目维护者这个功能
  • Dify实现图文混排的智能问答实践 一望无际的大草原 Dify高级应用工作总结Agent数据分析agent智能客服
    最近在做类似于各大平台中广泛应用的智能客服，相当于基于各平台的用户操作手册，业务流程场景等文档资料，开发一个类似于智能客服的自动化问答应用。主要基于dify进行开发，但对数据有些特殊要求，之前大家做的都是基于文本的，结合大模型返回的结果主要也是文本信息，这种方式不够直观全面，也有信息丢失，同时，一般这些资料中都包含了大量的图文结合内容，很多问题的答复需要结合图像进行答复更加直观，因此对其进行简单的
  • 苍穹外面Day10 guslegend python数据库java
    SpringTaskSpringTask是Spring框架提供的任务调度工具，可以按照约定的时间自动执行某个代码逻辑。定位：定时任务框架作用：定时自动执行某段Java代码cron表达式cron表达式其实就是一个字符串，通过cron表达式可以定义任务触发的时间构成规则：分为6或7个域，由空格分隔开，每个域代表一个含义每个域的含义分别为：秒、分钟、小时、日、月、周、年(可选)举例：2022年10月12
  • 用万用表测量（TO-220）NMOS管的好坏 MingYue_SSS 元器件好坏测量嵌入式硬件经验分享笔记学习
    第一步：用镊子或表笔短接MOS管的三个引脚，进行放电。第二步：万用表选择二极管档位。短接表笔，发出蜂鸣声说明万用表没问题。第三步：测量MOS管体二极管的好坏。用万用表测量2脚和3脚，正向导通，反向截至表示MOS管为好的。反之则是坏的。红表笔(+)测3脚源极S，黑表笔(-)测2脚漏极D，正常有一个导通压降，万用表数值在0.4V—0.9V左右。红表笔(+)测2脚漏极D，黑表笔(-)测3脚源极S，正常为
  • 关于JAVA中LIST元素修改的一个问题记录
    在工作中有遇到一个问题，需要从既有获取数据库中的LIST数据，做一下对其中部分数据做处理存入另外一个LIST集合之中，但是，有些现象还是比较出乎我的意料的，模拟了一下相关场景，具体的代码如下：packagecom.interview.demo;importjava.util.ArrayList;importjava.util.List;classStudent{privateStringname;
  • 服务器、树莓派/香橙派部署HomeAssistant与小爱音箱联动 不对法 物联网物联网
    HomeAssistant功能介绍与多平台部署实战：CentOS服务器、树莓派、香橙派部署及小爱音箱联动控制一、HomeAssistant简介HomeAssistant是一款基于Python开发的开源智能家居自动化平台，它最大的特点是高度集成和自定义。通过HomeAssistant，用户可以将不同品牌、不同协议的智能家居设备（如空调、电灯、传感器等）整合到一个统一的平台进行管理和控制，同时还支持通
  • 建议是先把base完全搞懂 weixin_47868976 Web云存储项目网络
    并发编程日志系统啥的我只了解了一点点直接从网络层入手这个项目可行么？底层base模块没搞懂从web开始合理么？你的担心很有道理！让我来分析一下学习路径的可行性，并给你一个合理的学习建议。一、项目依赖关系分析1.模块依赖层次application/(应用层)↓强依赖net/(网络层)↓强依赖base/(基础层)↓强依赖系统调用(LinuxAPI)2.具体依赖关系Rantool从依赖分析可以看出，网络
  • Redisson 的 “看门狗 dj_master Redis服务器数据库java
    Redisson的“看门狗（WatchDog）”机制是其针对Redis分布式锁实现的一个重要优化，用于解决分布式锁因业务执行时间过长，锁自动过期释放，导致锁失效的问题。下面从原理、作用、工作机制等方面详细介绍：一、背景：分布式锁的过期问题在使用Redis实现分布式锁时，通常会给锁设置一个过期时间（比如setIfAbsent加过期时间），防止持有锁的客户端因故障（如程序崩溃、网络阻塞）无法释放锁，导
  • 机器学习算法——神经网络1（神经元模型）
    神经网络是由具有适应性的简单单元组成的广泛并行互连的网络，它的组织能够模拟生物神经系统对真实世界物体所作出的交互反应。神经网络中最基本的成分是神经元（neuron）模型。即上述定义中的“简单单元”。在生物神经网络中，每个神经元与其他申请元相连，当它“兴奋”时，就会向相连的神经元发送化学物质，从而改变这些神经元内的电位；如果某神经元的电位超过一个“阈值”，那么它就会被激活，即“兴奋”起来，向其他神经
  • SpringBoot+WebSocket实现直播连麦 雨轩智能 java及Linux相关教程springbootwebsocket后端
    一、引言随着互联网技术的发展，直播已成为一种主流的内容传播形式。其中，连麦功能作为直播互动的重要手段，能够有效提升用户参与感和观看体验。本文将介绍如何使用SpringBoot和WebSocket技术构建一个直播连麦系统，实现主播与观众之间的实时音视频交流和文字聊天功能。为了方便DEMO的运行，本系统基于纯内存操作实现核心业务逻辑，不依赖外部数据库或者缓存组件。二、技术设计2.1技术栈后端：Spri
  • R语言入门课| 05 一文掌握R语言常见数据类型 Biomamba生信基地 r语言信息可视化开发语言生信医药
    视频教程大家可以先做一做R语言基础小测验，看看自己是否需要跟我们5.5h入门R语言的课程。先上教程视频，B站同步播出：https://www.bilibili.com/video/BV1miNVeWEkw完整视频回放和答疑服务可见：5.5h入门R语言本节课程视频：（点击此处查看）"R语言入门课"是我们认为生信小白入门不得不听的一个课程，我们也为这个课程准备了许多干货。R语言的精髓便是数据处理，在本
  • Linux下使用C语言实现线程池---代码及分析 唐·柯里昂798 linuxlinuxc语言javaubuntucentosunix笔记
    线程池相关文章协议Socket编程高并发服务器实现线程池如果一个客户端建立连接使用创建一个线程用于处理这一个线程,处理结束的时候把这一个线程删除,这个时候会导致线程的创建以及销毁会消耗大量的时间这时候可以一次性创建多个线程,这几个线程统称线程池,如果客户端建立一个连接,线程池分配一个线程处理客户发过来的数据,不处理的时候这几个线程阻塞可以使用条件变量进行阻塞线程的数量可以随着连接的个数,时间等条件
  • 数据库-事务 ruleslol springspringjdbc
    一、什么是事务？在执行SQL语句的时候，某些业务要求，一系列操作必须全部执行，而不能仅执行一部分。例如，一个转账操作：--从id=1的账户给id=2的账户转账100元--第一步：将id=1的A账户余额减去100UPDATEaccountsSETbalance=balance-100WHEREid=1;--第二步：将id=2的B账户余额加上100UPDATEaccountsSETbalance=ba
  • Mac 快捷键 快乐的一只小喵喵 macmacos
    总结一下Mac快捷键的图形符号：Mac中主要有四个修饰键，分别是Command，Control，Option和Shift。转存失败重新上传取消END基本的快捷键Command是Mac里最重要的修饰键，在大多数情况下相当于Windows下的Ctrl。所以以下最基本操作很好理解：Command-Z撤销Command-X剪切Command-C拷贝（Copy）Command-V粘贴Command-A全选（
  • MySQL(107)如何进行分片查询？ 辞暮尔尔-烟火年年 MySQLmysql数据库
    进行分片查询时，需要根据分片键确定查询应在哪些分片上执行。分片查询的复杂性在于需要处理跨分片查询的情况。以下是一个更为详细的示例，展示如何在分片数据库中进行查询，并结合Java代码进行实现。1.环境准备假设我们继续使用SpringBoot和MySQL，且需要查询的表是orders表。我们已经有了分片的数据库环境和数据源配置。2.项目依赖在pom.xml中添加必要的依赖：org.springfram
  • Linux【7】------Linux系统编程（进程间通信IPC） Invinciblenuonuo linux多进程进程间通信
    文章目录1信号1.1信号类型1.2信号含义1.3信号产生按键硬件异常调用接口发送指令内核检测1.4信号处理默认捕捉忽略1.5信号阻塞1.6信号挂起2消息队列2.1概念2.2创建消息队列2.3访问消息队列2.4控制消息队列3共享内存3.1申请共享内存3.2共享内存映射3.3控制共享内存3.4信号量3.5操作信号量1信号信号是一种异步通信方式同步通信同步指的是当进程发起一个请求，但是该请求并未马上响应
  • 人脸识别常用数据集和Loss JL_Jessie 人脸识别深度学习
    人脸识别数据集数据集的noise对训练效果的影响很大！很长一段时间MegaFace的效果都上不去，就是因为数据集噪声的原因。而且自己在训练人脸的时候，如果不对数据集的噪声和属性有一点了解，对训练结果可能会有误判，甚至越训练越差…在选择数据集的时候不要一味求大，有的时候选择一个noise比例极高的大数据集，效果还不如选择一个clean的小数据集呢，可以参见这篇论文TheDevilofFaceReco
  • 【分治算法】【Python实现】Strassen矩阵乘法 「已注销」 #分治算法分治算法Python
    文章目录@[toc]问题描述基础算法时间复杂性Strassen算法时间复杂性问题时间复杂性Python实现个人主页：丷从心·系列专栏：分治算法学习指南：算法学习指南问题描述设AAA和BBB是两个n×nn\timesnn×n矩阵，AAA和BBB的乘积矩阵CCC中元素cij=∑k=1naikbkjc_{ij}=\displaystyle\sum\limits_{k=1}^{n}{a_{ik}b_{kj
  • 半导体器件仿真：光电器件仿真_（6）.光电二极管仿真 kkchenkx 信号仿真2信号处理信息可视化
    光电二极管仿真1.引言光电二极管是一种能够将光能转换为电能的半导体器件。在光通信、图像传感器、光检测器和太阳能电池等领域有广泛的应用。光电二极管的仿真可以帮助设计者了解器件的工作原理、性能参数以及优化设计。本节将详细介绍光电二极管的仿真原理和步骤，包括器件结构、物理模型、仿真软件的使用方法以及具体的仿真案例。2.光电二极管的基本结构和工作原理2.1器件结构光电二极管通常由一个PN结或PIN结组成。
  • MCP如何助力智能交通系统？从数据融合到精准决策 Echo_Wish Python进阶python开发语言
    MCP如何助力智能交通系统？从数据融合到精准决策近年来，智能交通系统（ITS）正在全球范围内快速发展，它结合人工智能（AI）、物联网（IoT）和数据分析，致力于提高交通效率、减少拥堵、增强安全性。而MCP（Multi-ConstraintPathfinding，多约束路径寻优）技术作为一种复杂路径优化算法，在智能交通系统中扮演着重要角色，尤其是在导航优化、公共交通调度、应急响应等场景。今天，我们就
  • 4-AI-业务与MCP协议结合-MCPServer实战 小沛9 人工智能javaAI编程
    一、介绍本章节会开发一个简单的MCP的服务。目前的步骤是先开发一个简单的MCP的SSE模式的server集成到大模型中。后面会演示stdio模式。注册到Nacos中（重点探索模式）、将HTTP接口配置成MCP的server。大概会从这几个方面进行演示。二、Server代码展示1、POM文件org.springframework.bootspring-boot-starter-actuatororg
  • N-P准则下的多传感器融合(python) 不会打架的锤子 机器学习自动化算法算法pythonvscode
    本文设计了一个主程序：main_sensor_fusion，和一个函数程序：cal_fuse。主程序里面包含主干部分和绘图部分，函数程序包含数据生成函数gen，检测概率计算函数cal，非0逻辑矩阵函数No_zero_value，单传感器判决函数fus_seq，多传感融合函数fusion。需要的点赞私聊if__name__=="__main__":begin_time=time()#Measurep
  • NeRF-Pytorch：NeRF神经辐射场复现——Pytorch版全流程分析与测试【Ubuntu20.04】【2025最新版！！！】 那就举个栗子！ 三维重建计算机视觉人工智能
    一、引言在计算机视觉和计算机图形学的交叉领域中，视图合成（ViewSynthesis）一直是一个充满挑战的研究方向。传统的三维重建方法往往需要复杂的几何建模和纹理映射过程，而且在处理复杂光照和材质时效果有限。2020年，来自UCBerkeley的研究团队提出了NeuralRadianceFields（NeRF），这一革命性的方法彻底改变了我们对三维场景表示和渲染的理解。NeRF的核心思想是将三维场
  • 字节跳动Java开发面试题及参考答案（综合篇） 大模型大数据攻城狮 java后端面试大厂面试大厂校招加密算法nacos线程池
    HTTP与HTTPS的区别？HTTP（超文本传输协议）和HTTPS（超文本传输安全协议）主要有以下区别。从安全性角度看，HTTP是明文传输协议，数据在网络中传输时是以原始文本的形式发送的。这就好比在信件传递过程中没有进行密封，任何中间节点（如路由器、代理服务器等）都可以查看信件内容。例如，用户登录一个网站时发送的用户名和密码信息，如果是通过HTTP协议传输，很容易被窃取。而HTTPS是加密的安全协
  • 道可云人工智能每日资讯｜江苏首个机器人训练中心在苏州吴江启动 道可云 道可云人工智能人工智能机器人arDeepSeekxr百度
    道可云人工智能&元宇宙每日简报（2025年6月26日）讯，今日人工智能&元宇宙新鲜事有：江苏首个机器人训练中心在苏州吴江启动近日，长三角一体化示范区智能机器人训练中心在东太湖度假区（太湖新城）正式启用，成为江苏省首个机器人智能训练中心。该中心占地1500平方米，设有8个训练场景和30个生产工位，涵盖智能制造、商业服务、特种应用三大领域，年产数据可超200万条，旨在加速机器人从实验室走向真实产业场景
  • pandas 优雅处理值类型为list的列的csv读写问题 Allocator Pythonpandaslistpython
    文章目录直接存储joinlist变成字符串存储json.dumps序列化存储以及json.loads反序列化读取总结之所以分析这个问题,是因为读者在跟第三方数据供应商对接数据的时候,老是会遇到数据加载都会出错的问题,其中一个原因就是list类型数据没有正确储存,于是笔者在这篇文章里面详细分析一下list数据怎么优雅的写入csv以及读取.直接存储第一种方法,直接存,不做任何转换defdirect_w
  • Python在自动驾驶中的多传感器融合——让智能汽车“看得更清楚” Echo_Wish Python！实战！python自动驾驶汽车
    Python在自动驾驶中的多传感器融合——让智能汽车“看得更清楚”在自动驾驶技术的演进过程中，多传感器融合（Multi-SensorFusion）是不可或缺的一环。单一传感器往往存在局限性，例如摄像头怕光线变化，激光雷达价格昂贵，毫米波雷达分辨率有限，但如果将它们结合起来，就能形成一个更全面、更可靠的环境感知系统。今天，我们就来聊聊如何用Python实现自动驾驶中的多传感器融合，并结合最新技术趋势
  • 算法 单链的创建与删除 换个号韩国红果果 c算法
    先创建结构体 struct student { int data; //int tag;//标记这是第几个 struct student *next; }; // addone 用于将一个数插入已从小到大排好序的链中 struct student *addone(struct student *h,int x){ if(h==NULL) //??????
  • 《大型网站系统与Java中间件实践》第2章读后感 白糖_ java中间件
           断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章，这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难，但每一个屏障都会有解决方案，最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。          看完整章内容，
  • zeus持久层spring事务单元测试 deng520159 javaDAOspringjdbc
    今天把zeus事务单元测试放出来,让大家指出他的毛病, 1.ZeusTransactionTest.java 单元测试   package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Test; import
  • Rss 订阅 开发 周凡杨 htmlxml订阅rss规范
                    RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Site Summary的缩写，1.0与2.0走的是两个体系）。   RSS
  • 分页查询实现 g21121 分页查询
    在查询列表时我们常常会用到分页，分页的好处就是减少数据交换，每次查询一定数量减少数据库压力等等。 按实现形式分前台分页和服务器分页： 前台分页就是一次查询出所有记录，在页面中用js进行虚拟分页，这种形式在数据量较小时优势比较明显，一次加载就不必再访问服务器了，但当数据量较大时会对页面造成压力，传输速度也会大幅下降。 服务器分页就是每次请求相同数量记录，按一定规则排序，每次取一定序号直接的数据
  • spring jms异步消息处理 510888780 jms
    spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器，常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量，以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理，进一步提高性能，减少侦听器的阻塞。具体配置如下：
  • highCharts柱状图 布衣凌宇 hightCharts柱图
    第一步：导入 exporting.js,grid.js,highcharts.js;第二步：写controller   @Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController {  private UserServi
  • 我的spring学习笔记2-IoC（反向控制 依赖注入） aijuans springmvcSpring 教程spring3 教程Spring 入门
    IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明： 如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
  • TLS java简单实现 antlove javasslkeystoretlssecure
      1. SSLServer.java package ssl; import java.io.FileInputStream; import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket; import java.security.KeyStore; import
  • Zip解压压缩文件 百合不是茶 Zip格式解压Zip流的使用文件解压
       ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件; ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName));     &n
  • underscore.js 学习（一） bijian1013 JavaScriptunderscore
            工作中需要用到underscore.js，发现这是一个包括了很多基本功能函数的js库，里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。       学
  • java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon) bijian1013 javajvmjstatd
    1.介绍         jstatd是一个基于RMI（Remove Method Invocation）的服务程序，它用于监控基于HotSpot的JVM中资源的创建及销毁，并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。         jstatd是基于RMI的，所以在运行jstatd的服务
  • 【Spring框架三】Spring常用注解之Transactional bit1129 transactional
    Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力，如下是@Transactional注解的定义：   /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version
  • 我(程序员)的前进方向 bitray 程序员
    作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful.....
  • nginx lua开发经验总结 ronin47
    使用nginx lua已经两三个月了，项目接开发完毕了，这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的，跟PHP的占比差不多持平了，因此在开发中遇到一些问题备忘一下 1：content_by_lua中代码容量有限制，一般不要写太多代码，正常编写代码一般在100行左右（具体容量没有细心测哈哈，在4kb左右），如果超出了则重启nginx的时候会报 too long pa
  • java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶 bylijinnan java
    import java.util.Stack; public class ReverseStackRecursive { /** * Q 66.颠倒栈。 * 题目：用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。 * 颠倒之后的栈为{5,4,3,2,1}，5处在栈顶。 *1. Pop the top element *2. Revers
  • 正确理解Linux内存占用过高的问题 cfyme linux
    Linux开机后，使用top命令查看，4G物理内存发现已使用的多大3.2G，占用率高达80%以上： Mem:   3889836k total,  3341868k used,   547968k free,   286044k buffers Swap:  6127608k total,&nb
  • [JWFD开源工作流]当前流程引擎设计的一个急需解决的问题 comsci 工作流
         当我们的流程引擎进入IRC阶段的时候，当循环反馈模型出现之后，每次循环都会导致一大堆节点内存数据残留在系统内存中，循环的次数越多，这些残留数据将导致系统内存溢出，并使得引擎崩溃。。。。。。       而解决办法就是利用汇编语言或者其它系统编程语言，在引擎运行时，把这些残留数据清除掉。
  • 自定义类的equals函数 dai_lm equals
    仅作笔记使用 public class VectorQueue { private final Vector<VectorItem> queue; private class VectorItem { private final Object item; private final int quantity; public VectorI
  • Linux下安装R语言 datageek R语言 linux
    命令如下：sudo gedit  /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke
  • 如何修改mysql 并发数(连接数)最大值 dcj3sjt126com mysql
    MySQL的连接数最大值跟MySQL没关系，主要看系统和业务逻辑了   方法一：进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可 　　方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppass
  • 单一功能原则 dcj3sjt126com 面向对象的程序设计软件设计编程原则
    单一功能原则[ 编辑]     SOLID 原则 单一功能原则 开闭原则 Liskov代换原则 接口隔离原则 依赖反转原则 查   论   编 在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有
  • POJO、VO和JavaBean区别和联系 fanmingxing VOPOJOjavabean
    POJO和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Plain Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比POJO复杂很多，JavaBean是一种组件技术，就好像你做了一个扳子，而这个扳子会在很多地方被
  • SpringSecurity3.X--LDAP：AD配置 hanqunfeng SpringSecurity
    前面介绍过基于本地数据库验证的方式，参考http://hanqunfeng.iteye.com/blog/1155226，这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证，权限依旧存储在本地数据库中】。   将配置文件中的如下部分删除： <!-- 认证管理器，使用自定义的UserDetailsService，并对密码采用md5加密-->
  • mac mysql 修改密码 IXHONG mysql
    $ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码（注意，这是第一次MySQL密码为空的时候的设置命令，如果是修改密码，还需在-
  • 设计模式--抽象工厂模式 kerryg 设计模式
    抽象工厂模式：     工厂模式有一个问题就是，类的创建依赖于工厂类，也就是说，如果想要拓展程序，必须对工厂类进行修改，这违背了闭包原则。我们采用抽象工厂模式，创建多个工厂类，这样一旦需要增加新的功能，直接增加新的工厂类就可以了，不需要修改之前的代码。     总结：这个模式的好处就是，如果想增加一个功能，就需要做一个实现类，
  • 评"高中女生军训期跳楼” nannan408
       首先，先抛出我的观点，各位看官少点砖头。那就是，中国的差异化教育必须做起来。    孔圣人有云：有教无类。不同类型的人，都应该有对应的教育方法。目前中国的一体化教育，不知道已经扼杀了多少创造性人才。我们出不了爱迪生，出不了爱因斯坦，很大原因，是我们的培养思路错了，我们是第一要“顺从”。如果不顺从，我们的学校，就会用各种方法，罚站，罚写作业，各种罚。军
  • scala如何读取和写入文件内容？ qindongliang1922 javajvmscala
    直接看如下代码： package file import java.io.RandomAccessFile import java.nio.charset.Charset import scala.io.Source import scala.reflect.io.{File, Path} /** * Created by qindongliang on 2015/
  • C语言算法之百元买百鸡 qiufeihu c算法
    中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”，鸡翁一，值钱五，鸡母一，值钱三，鸡雏三，值钱一，百钱买百鸡，问翁，母，雏各几何？ 代码如下： #include <stdio.h> int main() { int cock,hen,chick; /*定义变量为基本整型*/ for(coc
  • Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode wyz2009107220 NameNode
    正如大家所知，NameNode在Hadoop系统中存在单点故障问题，这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。 1. Secondary NameNode 原理：Secondary NN会定期的从NN中读取editlog，与自己存储的Image进行合并形成新的metadata image 优点：Hadoop较早的版本都自带，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他