啵雨的博客
啵雨的博客

使用 HTML & CSS 制作左侧滑动导航条

使用 HTML & CSS 制作左侧滑动导航条

原视频连接

使用 HTML & CSS 制作左侧滑动导航条_第1张图片
使用 HTML & CSS 制作左侧滑动导航条_第2张图片

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slide Menu Bar</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.css">
</head>
<body>
    <input type="checkbox" id="check">
    <label for="check">
        <i class="fas fa-bars" id="btn"></i>
        <i class="fas fa-times" id="cancel"></i>
    </label>
    //用label和input的原因，在文章底部会说，也是此案例的关键
    <div class="sidebar">
        <header>My App</header>
        <ul>
            <li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
            <li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
            <li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
            <li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
            <li><a href="#"><i class="far fa-question-circle"></i>About</a></li>
            <li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
            <li><a href="#"><i class="far fa-envelope"></i>Contact</a></li>
        </ul>
    </div>
    <section></section>
</body>
</html>

CSS：

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
}

.sidebar {
    position: fixed;
    left: -250px;
    width: 250px;
    height: 100vh;
    background-color: #042331;
    transition: all 0.5s ease;
    //ease 开始和结束慢，中间快
}

.sidebar header {
    color: white;
    text-align: center;
    line-height: 70px;
    font-size: 22px;
    background: #063146;
    user-select: none;
    //用户不能选取
}

.sidebar ul a {
    display: block;
    padding-left: 50px;
    line-height: 70px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid black;
    color: white;
    transition: 0.3s linear;
}

.sidebar ul i {
    padding-right: 16px;
}

.sidebar ul a:hover {
    padding-left: 40px;
}

#check {
    display: none;
}

label #btn,
label #cancel {
    position: absolute;
    cursor: pointer;
    background-color: #042331;
    border-radius: 3px;
}

label #btn {
    left: 40px;
    top: 25px;
    color: white;
    font-size: 35px;
    padding: 6px 10px;
    transition: 0.3s;
}

label #cancel {
    z-index: 999;
    left: -197px;
    top: 17px;
    font-size: 30px;
    color: #0a5275;
    padding: 4px 9px;
    transition: 0.3s;
}

#check:checked~.sidebar {
    left: 0px;
}

#check:checked~label #btn {
    left: 250px;
    opacity: 0;
}

#check:checked~label #cancel {
    left: 197px;
}

section {
    background: url(bg.png) no-repeat;
    background-position: center;
    //定位背景图片在中间
    height: 100vh;
    background-size: cover;
    transition: all 0.5s;
}

#check:checked~section {
    margin-left: 250px;
}

--------------------------------------------------------------------------------------------------

#check:checked~label #btn{}

有人肯定这个地方不太明白是什么
我在这说一下：
1.了解一下 ‘~’这个符号，它其实是一个css选择器
具体内容转载一片文章，写的很详细
https://www.cnblogs.com/nyw1983/p/11628364.html

2.接下来说一下input和label两个标签之间的关系！！！！两个像亲兄弟一样
在html中，标签通常和标签一起使用，标签为input元素定义标注（标记）。

标签的作用是为鼠标用户改进了可用性，当用户点击标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；

标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的。

我们这回再看一下

#check:checked~label #btn{}

这个代码的原意是，点击复选框，选中状态下，兄弟标签label的 #btn 会执行xxx操作

但是从实际效果看，我们把复选款隐藏了，#check { display: none; }单击label标签的#btn #cancel
也可以达到效果，因为某种意义上，单击label标签的#btn #cancel就相当于单击复选框了！！！！

这就是input和label标签经常一起用的原因

    <input type="checkbox" id="check">
    <label for="check">
        <i class="fas fa-bars" id="btn"></i>
        <i class="fas fa-times" id="cancel"></i>
    </label>

使用的时候，一定要把label和input连接，此处就是label for 连接了 input的id

你可能感兴趣的:(HTML+CSS,小demo效果练习)

  • 汽车蓝牙钥匙定位仿真小程序 程序员石磊 基于深度学习的室内定位室内定位蓝牙钥匙蓝牙钥匙定位
    此需求来自于粉丝的真实需求，假期没事，牛刀小试。一、项目背景如今，智能车钥匙和移动端定位技术已经相当普及。为了探索蓝牙Beacon在短距离定位场景下的可行性，我们搭建了一个简易原型：利用UniApp在移动端采集蓝牙信标的RSSI（信号强度），通过三边定位算法估算钥匙在车内或车周围的坐标，并使用FastAPI+Redis实现数据存储与可视化接口，最后在Leaflet地图中模拟车辆俯视效果，实时展示定
  • 团体程序设计天梯赛-练习集——L1-028 判断素数 SY师弟 GPLT天梯赛算法c语言数据结构c++GPLTc#
    前言一道10分的题目，相对来说比较简单，思考的时候要仔细且活跃，有时候在写代码的时候一些代码的出现很多余，并且会影响最后的结果L1-028判断素数本题的目标很简单，就是判断一个给定的正整数是否素数。输入格式：输入在第一行给出一个正整数N（≤10），随后N行，每行给出一个小于231次方的需要判断的正整数。输出格式：对每个需要判断的正整数，如果它是素数，则在一行中输出Yes，否则输出No。输入样例：2
  • python实现调用腾讯云翻译API qq_32474521 腾讯云python自动翻译
    时长两月半程序员练习生为了完成导师的翻译任务，查询了一下腾讯云翻译的API使用方式大佬轻喷，主要以记录为准主要参考：机器翻译文本翻译-API接口-API中心-腾讯云(tencent.com)【玩转腾讯云】【腾讯云机器翻译TMT】机器翻译入门-腾讯云开发者社区-腾讯云(tencent.com)主要实现了文本翻译的部分，代码可以直接使用使用前提：1、注册腾讯云https://cloud.tencent
  • 打造你的专属英文打字练习软件：从零开始的C#实战教程 工控_谭校长 c#开发语言visualstudio
    在当今数字化时代，打字已经成为一项必不可少的技能。无论是工作、学习还是日常沟通，快速而准确的打字能力都能极大地提高效率。为了帮助大家提升英文打字水平，本文将带你从零开始，使用C#开发一款功能完善的英文打字练习软件。通过这个项目，你不仅能学习到C#编程的核心技术，还能掌握如何设计一个用户友好的桌面应用程序。项目概述我们的英文打字练习软件将具备以下核心功能：多篇文章选择：用户可以从多篇英文文章中选择练
  • 机器学习强基计划7-6：图文详解层次聚类AGNES算法(附Python实现)_agnes聚类算法python代码 软件开发Java 2024年程序员学习机器学习算法聚类
    先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年最新Python全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课
  • python-docx 设置页眉、页眉字体、页眉对齐方式 布啦啦李 python-docx使用教程pythonpython-docxdocxdocx设置页眉python-docx页眉
    本文目录前言一、docx设置页眉1、完整代码2、实际效果图3、常见问题二、docx设置页眉及对齐方式1、完整代码2、实际效果图3、常见问题①、对齐方式讲解②、字体号与Pt的对应关系三、docx设置页眉，两段文本，两端对齐1、完整代码2、实际效果图3、需要注意的问题①、为什么使用表格添加页眉？②、这样的页眉怎样处理字体呢？③、如果页眉有三段文字怎么办？④、表格宽度为什么是14.64呢？四、docx设
  • Python代码实现图像增强（线性变换、对数变换(1)，Python高级开发面试题 2401_84181911 2024年程序员学习pythonopencv计算机视觉
    效果：2.对比度拉伸代码：importcv2importimutilsimportnumpyasnpimage=cv2.imread(‘E:/city.PNG’)image=cv2.imread(‘E:/city.PNG’)gray_img=cv2.cvtColor(image,cv2.COLOR_BGR2GRAY)在灰度图进行分段线性对比度拉伸此种方式变换函数把灰度级由原来的线性拉伸到整个范围[
  • startViewTransition的简单示例
    用途实现视图过渡效果示例1实现两张图片之间的过渡效果import{ref}from"vue"constvisible=ref(false)consttoggle=()=>{//关键代码，把扭转状态的代码用startViewTransition包起来document.startViewTransition(()=>{visible.value=!visible.value})}.small-img{
  • 图像超分，提高图像分辨率的方法和工具 风暴之零 python图像处理深度学习
    图像超分是一种图像处理技术，旨在提高图像的分辨率，使其具有更高的清晰度和细节。这一技术通常用于图像重建、图像恢复、图像增强等领域，可以帮助我们更好地理解和利用图像信息。图像超分技术可以通过多种方法实现，包括插值算法、深度学习等。其中，深度学习的方法在近年来得到了广泛的关注和应用。基于深度学习的图像超分技术，可以利用深度神经网络学习图像的高频部分，从而提高了图像的分辨率和清晰度。总结：传统方法效果不
  • 设计模式-创建型模式-原型模式 NorthCastle 设计模式设计模式原型模式
    概念原型模式：PrototypePattern:是一种创建型设计模式。作用：通过复制现有的对象来创建新对象，无需通过new来实例化新对象，从而达到简化对象创建的效果。原型：prototype:定义用于复制自身以生成新对象的方法。通常称为clone()【Object类中，提供了一个clone()方法，该方法可以将一个Java对象复制一份，但是需要实现Cloneable接口】具体原型：Concrete
  • 基于Bootstrap 3可预览的HTML5文件上传插件 �时过境迁，物是人非 bootstraphtml5okhttp
    bootstrap-fileinput是一款基于Bootstrap3.x的HTML5文件上传插件。该文件上传插件带有预览图效果，可同时选择多个文件。该插件使用bootstrapCSS3样式来制作文件上传界面，美观大方。并且它提供了多国语言，你可以选择使用中文。在线预览下载该文件上传插件比普通的文件上传插件功能更强大，它可以对图片、文本文件、HTML文件、视频文件、音频文件、flash文件生成预览图
  • [JS+CSS+HTML]实现图片拖拽放大缩小功能 神似彭于晏的男人 前端开发功能库csshtml前端
    实现效果：JS(核心代码)1.定义全局缩放值letscale=1;2.获取img标签以及盒子的实例letscale=1;//+++++++++++constimgBox=document.getElementById("imgBox");constimg=document.getElementById("img");3.实现图片的缩放效果//缩放效果(wheel--鼠标滚轮事件)img.addEv
  • Pyecharts之特殊图表的独特展示 抱抱宝 Python数据分析与可视化信息可视化数据分析python
    在数据可视化的世界里，除了常见的柱状图、折线图、饼图等，还有一些特殊的图表可以为我们带来独特的展示效果，帮助我们以更有趣、更直观的方式呈现数据。Pyecharts为我们提供了多种特殊图表的绘制功能，本文将介绍象形图、水球图和日历图的定制方法，让你能够创建出与众不同的数据可视化作品。一、象形图自定义图形象形图是一种使用自定义图形来表示数据的图表，比普通的柱状图更加形象生动。下面是pictorialb
  • (持续更新中~~)3、原来可以这样理解C语言_分⽀和循环上(3)条件操作符 do_you_want_ C语言逐步拆解c语言算法数据结构
    目录3.条件操作符3.条件操作符条件操作符也叫三⽬操作符，需要接受三个操作数的，形式如下：exp1?exp2:exp3条件操作符的计算逻辑是：如果exp1为真，exp2计算，计算的结果是整个表达式的结果；如果exp1为假，exp3计算，计算的结果是整个表达式的结果。练习1：使⽤条件操作符表⽰下⾯代码的逻辑#includeintmain(){inta=0;intb=0;scanf("%d",&a);
  • JavaScript电子网页时钟效果（canvas版） 李游Leo 前端javascriptecmascript前端
    先上代码：分部翻页电子时钟body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#333;margin:0;}canvas{background-color:#000;border:5pxsolid#555;}constcanvas=document.getElementB
  • CSS特效 —— 蛇形左右扭动的效果 DTcode7 HTML网站开发#前端基础入门三大核心之CSSHTMLCSSwebcss3网页开发
    CSS特效——蛇形左右扭动的效果引言基础概念示例一：基本的蛇形动画HTML结构CSS样式代码解释示例二：增加动画的复杂度CSS样式代码解释示例三：多条蛇形元素HTML结构CSS样式代码解释示例四：改变蛇形元素的形状CSS样式代码解释示例五：加入碰撞效果CSS样式代码解释功能使用思路思路一：控制动画的重复次数思路二：调整动画方向思路三：使用JavaScript控制动画实际开发中的使用技巧自行拓展内容
  • 使用HTML和CSS制作爱心特效 WbhsOcaml htmlcss前端Css
    在本文中，我们将详细介绍如何使用HTML和CSS来制作一个漂亮的爱心特效。我们将使用CSS的伪元素和过渡效果来实现这个效果。让我们开始吧！首先，我们需要创建一个HTML文件，并在其中添加一个div元素来容纳我们的爱心特效。在div元素内部，我们将添加一个span元素，用于创建爱心形状。
  • 新版Pycharm找不到在anaconda已创建的虚拟环境(成功解决) 给我一个接口 pycharmpythonideyoloconda
    在使用pycharm导入已经创建配置好的环境时找不到对应的文件路径，或者显示不出来处理方法也很简单只需要在如下红色框内输入如下的文件路径名注意，要改成你自己创建好的对应的路径名，下面是在我电脑上的例子D:\Anaconda\Scripts\conda.exe接下来就成功的添加上已经创建好的环境了！最后效果如图所示
  • html、js、css实现爱心效果 学不完了是吧 HTMLcsscss3前端
    好的！我们可以进一步美化这个爱心效果，增加更多动态和视觉吸引力。以下是改进后的代码，包括以下功能：1.背景渐变：添加动态背景渐变效果。2.爱心阴影：为爱心添加阴影，使其更具立体感。3.随机颜色：点击时随机切换颜色，而不是固定顺序。4.文字提示：在爱心下方添加文字提示，告诉用户可以点击切换颜色。---###美化后的代码```html跳动爱心body{display:flex;justify-cont
  • 数据结构&算法-力扣-01数组和字符串python 亓官贝 数据结构算法pythonleetcode
    数据结构&算法-数组和字符串练习先占一个标题刷题链接：数组和字符串1.寻找数组的中心索引2.搜索插入位置3.合并区间python解法4.旋转矩阵python解法5.零矩阵python常用方法（见菜鸟教程）1.enumerateli=[a,b,c,d]list(enumerate(li))[(0,a),(1,b),(2,c),3,d]list(enumerate(li,start=1))2.zip
  • 双线性函数的紧凑超平面散列（Compact Hyperplane Hashing with Bilinear Functions）阅读笔记 Legend105CC 机器学习主动学习机器学习
    Abstract超平面散列（Hyperplanehashing）的目的是快速搜索到离超平面最近的点，并在使用支持向量机（SVM）扩大主动学习方面显示出实际效果。存在问题：不幸的是，现有的随机方法需要长哈希码才能达到合理的搜索精度，因此会降低搜索速度和内存开销。解决方法：为此，论文（CompactHyperplaneHashingwithBilinearFunctions）提出了一种新的超平面哈希技
  • 一文带你了解Linux中部署Redis主从复制，主从复制原理 小满只想睡觉 linuxredis后端
    本文谈到的内容主要是以下几点：如何部署Redis主从复制（一主二从）一些关于主从的问题模拟和思考主从复制原理和工作流程前文所谓主从复制，就是以其中一台机器作为master，并且以写为主，其他从服务器（Slave）则是以读为主，达到读写分离的效果，以来提高系统性能。从服务器的数据全部从主服务中复制同步而来。当master数据变化的时候，自动将新的数据异步同步到其他Slave数据库redis官方文档：
  • 微信小程序-绘制仪表盘 学习者+1 微信小程序微信小程序小程序
    参考文章1、微信小程序Canvas自绘图表之仪表图（表盘）2、canvas实现环形渐变进度条效果展示前言完整代码可移至参考文章1，若有需要，敬请移步。在此根据需要对样式进行了些修改，在此仅记录绘制表盘的代码。代码functiondrawCircle(item,that){//定义画图大小letwidth=windowWidth*0.6;letheight=windowWidth*0.6;//获取中
  • AIGC产品数字人 –【字形绘梦】之绘声 拉达曼迪斯II AI创业WebRTCAIGC学习人工智能音视频AIGCSD数字人微信小程序字形绘梦
    最近开始发一些AIGC相关的学习博客，期间用到的RamendeusStudio公司的一款免费图文生成微信小程序【字形绘梦】还是不错。关键是免费。最近貌似它们新增了一个语音还是视频的能力叫【绘声】，简单的试用之后觉得还行，给大家分享下先上效果：PT3-11绘文模块使用方法：打开主界面，点选角色或者自定义图片，选择默认文案或者字形输入，点击生成。完成后微信会自动通知你制作完成，点击过去查看即可。它的绘
  • 「分块」数列分块入门1 – 9 by hzwer 解题记录 GA_PK
    出处学习蓝书的时候感觉书上关于分块的题目太少了.而且都是难度较大的一些分块题目,想巩固一下分块方面的知识,就找到了hzwer大佬的分块入门知识介绍.用这篇博客记录一下.从树状数组到线段树再到分块.都是对区间信息的快速处理来达到想要的效果.树状数组效率最优,可是拓展性实在不高.线段树效率稍微差一点但是拓展性较好,可是在信息不满足区间可加性的情况下代码难度会高很多.而分块效率上最差但是可以接受,且拓展
  • GNU编译优化级别-O -O1 -O2 -O3 hemmingway C++Linux
    最近做一个算法的GPU加速，发现实际上使用gcc的-O3(最高级编译优化)选项，可以获得很高的加速比，我的程序里达到了3倍的样子，有时效果甚至比GPU加速好。因此小小学习了下GNU的编译优化。附言一句，在进行调试的时候，最好关闭编译优化，不然程序自动优化，执行的步骤可能稍有变化。GNU编译器提供-O选项供程序优化使用:-O提供基础级别的优化-O2提供更加高级的代码优化,会占用更长的编译时间-O3提
  • C语言小练习-打印字母倒三角 don't_be_bald C语言练习c语言算法数据结构
    编写一个程序，在用户输入某个大写字母后，产生一个金字塔图案。#includeintmain(intargc,char*argv[]){charch;loop:printf("请输入大写字母！\n");scanf("%c",&ch);getchar();if(ch'Z'){gotoloop;}intlen=ch-'A'+1;inti,j;for(i=1;i=0;j--){printf("%c",'A
  • 12.udp 就很对 udp网络协议网络
    12.udp**1.UDP特性****2.UDP编程框架（C/S模式）****3.UDP发送接收函数****4.UDP编程练习**1.UDP特性连接特性：无链接，通信前无需像TCP那样建立连接。可靠性：不可靠，不保证数据按序到达、不保证数据无丢失或重复。数据传输：适合传输大数据，但实际传输受网络MTU等因素限制。2.UDP编程框架（C/S模式）服务器端流程：创建套接字：调用socket()函数，参
  • 深度学习（DL/ML）学习路径 jackl的科研日常 深度学习学习人工智能
    最近几年，尤其是自从2016年AlphaGo打败李世石事件后，人工智能技术受到了各行业极大关注。其中以机器学习技术中深度学习最受瞩目。主要原因是这些技术在科研领域和工业界的应用效果非常好，大幅提升了算法效率、降低了成本。因而市场对相关技术有了如此大的需求。我在思考传统行业与这些新兴技术结合并转型的过程中，亦系统的回顾了深度学习及其相关技术。本文正是我在学习过程中所作的总结。我将按照我所理解的学习路
  • 基于深度学习的行人检测识别系统：YOLOv8 + UI界面 + 数据集完整实现 2025年数学建模美赛 深度学习YOLOui人工智能分类
    1.引言行人检测与识别是计算机视觉中的一个重要领域，广泛应用于安防监控、智能交通、自动驾驶等多个领域。传统的行人检测方法面临着许多挑战，如低光照、复杂背景、遮挡等问题。随着深度学习技术的迅猛发展，基于卷积神经网络（CNN）的方法，尤其是YOLO（YouOnlyLookOnce）系列算法，在行人检测中取得了显著的效果。YOLOv8作为YOLO系列的最新版本，继承了YOLO一贯的高效性和准确性，在速度
  • ASM系列六 利用TreeApi 添加和移除类成员 lijingyao8206 jvm动态代理ASM字节码技术TreeAPI
        同生成的做法一样，添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子，下面这个Task类，我们来移除isNeedRemove方法，并且添加一个int 类型的addedField属性。   package asm.core; /** * Created by yunshen.ljy on 2015/6/
  • Springmvc-权限设计 bee1314 springWebjsp
    万丈高楼平地起。 权限管理对于管理系统而言已经是标配中的标配了吧，对于我等俗人更是不能免俗。同时就目前的项目状况而言，我们还不需要那么高大上的开源的解决方案，如Spring Security，Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 目标： 1.实现权限的管理（CRUD） 2.实现部门管理 （CRUD) 3.实现人员的管理 （CRUD） 4.实现部门和权限
  • 算法竞赛入门经典（第二版）第2章习题 CrazyMizzz c算法
    2.4.1 输出技巧 #include <stdio.h> int main() { int i, n; scanf("%d", &n); for (i = 1; i <= n; i++) printf("%d\n", i); return 0; } 习题2-2 水仙花数(daffodil
  • struts2中jsp自动跳转到Action 麦田的设计者 jspwebxmlstruts2自动跳转
    1、在struts2的开发中，经常需要用户点击网页后就直接跳转到一个Action，执行Action里面的方法，利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action（不是专业人士）   2、＜jsp:forward page="xxx.action" /＞ ，这个标签可以实现跳转，page的路径是相对地址,不同与jsp和j
  • php 操作webservice实例 IT独行者 PHPwebservice
    首先大家要简单了解了何谓webservice，接下来就做两个非常简单的例子，webservice还是逃不开server端与client端。我测试的环境为：apache2.2.11 php5.2.10做这个测试之前，要确认你的php配置文件中已经将soap扩展打开，即extension=php_soap.dll; OK 现在我们来体验webservice //server端 serve
  • Windows下使用Vagrant安装linux系统 _wy_ windowsvagrant
    准备工作： 下载安装 VirtualBox ：https://www.virtualbox.org/ 下载安装 Vagrant ：http://www.vagrantup.com/ 下载需要使用的 box ： 官方提供的范例：http://files.vagrantup.com/precise32.box 还可以在 http://www.vagrantbox.es/ 
  • 更改linux的文件拥有者及用户组(chown和chgrp) 无量 clinuxchgrpchown
    本文（转） http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.com/blog/1435157 一、基本使用： 使用chown命令可以修改文件或目录所属的用户：        命令
  • linux下抓包工具 矮蛋蛋 linux
    原文地址： http://blog.chinaunix.net/uid-23670869-id-2610683.html tcpdump -nn -vv -X udp port 8888 上面命令是抓取udp包、端口为8888 netstat -tln 命令是用来查看linux的端口使用情况 13 . 列出所有的网络连接 lsof -i 14. 列出所有tcp 网络连接信息 l
  • 我觉得mybatis是垃圾！：“每一个用mybatis的男纸，你伤不起” alafqq mybatis
    最近看了  每一个用mybatis的男纸，你伤不起 原文地址 ：http://www.iteye.com/topic/1073938 发表一下个人看法。欢迎大神拍砖； 个人一直使用的是Ibatis框架，公司对其进行过小小的改良； 最近换了公司，要使用新的框架。听说mybatis不错；就对其进行了部分的研究； 发现多了一个mapper层；个人感觉就是个dao；
  • 解决java数据交换之谜 百合不是茶 数据交换
    交换两个数字的方法有以下三种 ，其中第一种最常用   /* 输出最小的一个数 */ public class jiaohuan1 { public static void main(String[] args) { int a =4; int b = 3; if(a<b){ // 第一种交换方式 int tmep =
  • 渐变显示 bijian1013 JavaScript
    <style type="text/css"> #wxf { FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98); height: 25px; } </style>
  • 探索JUnit4扩展：断言语法assertThat bijian1013 java单元测试assertThat
    一.概述         JUnit 设计的目的就是有效地抓住编程人员写代码的意图，然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今，版本不停的翻新，但是所有版本都一致致力于解决一个问题，那就是如何发现编程人员的代码意图，并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够
  • 【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}} bit1129 gson
      如何把如下简单的JSON字符串反序列化为Java的POJO对象? {"data":{"IM":["MSN","QQ","Gtalk"]}}   下面的POJO类Model无法完成正确的解析：   import com.google.gson.Gson;
  • 【Kafka九】Kafka High Level API vs. Low Level API bit1129 kafka
    1. Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API，实际上非常复杂) 在选用哪种Consumer API时，首先要弄清楚这两种API的工作原理，能做什么不能做什么，能做的话怎么做的以及用的时候，有哪些可能的问题  
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-归并排序 bylijinnan java
    import java.util.Arrays; public class MergeSort { public static void main(String[] args) { int[] a={20,1,3,8,5,9,4,25}; mergeSort(a,0,a.length-1); System.out.println(Arrays.to
  • Netty源码学习-CompositeChannelBuffer bylijinnan javanetty
    CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 查看API（ http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description） 可以看到，所谓“Transparent Zero Copy”是通
  • Android中给Activity添加返回键 hotsunshine Activity
    // this need android:minSdkVersion="11" getActionBar().setDisplayHomeAsUpEnabled(true); @Override public boolean onOptionsItemSelected(MenuItem item) {
  • 静态页面传参 ctrain 静态
    $(document).ready(function () { var request = { QueryString : function (val) { var uri = window.location.search; var re = new RegExp("" + val + "=([^&?]*)", &
  • Windows中查找某个目录下的所有文件中包含某个字符串的命令 daizj windows查找某个目录下的所有文件包含某个字符串
    findstr可以完成这个工作。   [html]  view plain copy   >findstr /s /i "string" *.*   上面的命令表示，当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu
  • 改善程序代码质量的一些技巧 dcj3sjt126com 编程PHP重构
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：    尽量保持方法简短    尽管很多人都遵
  • SharedPreferences对数据的存储 dcj3sjt126com
    SharedPreferences简介：                                                   &nbs
  • linux复习笔记之bash shell (2) bash基础 eksliang bashbash shell
    转载请出自出处： http://eksliang.iteye.com/blog/2104329 1.影响显示结果的语系变量（locale）  1.1locale这个命令就是查看当前系统支持多少种语系，命令使用如下： [root@localhost shell]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8"
  • Android零碎知识总结 gqdy365 android
    1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 所以最后得出结论：CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里，比如缓存。发生修改时候做copy，新老版本分离，保证读的高
  • HoverTree.Model.ArticleSelect类的作用 hvt Web.netC#hovertreeasp.net
    ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类，用于存放查询文章时的条件，例如HvtId就是文章的id。HvtIsShow就是文章的显示属性，当为-1是，该条件不产生作用，当为0时，查询不公开显示的文章，当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放，开发环境为Visual Studio 2013
  • PHP 判断是否使用代理 PHP Proxy Detector 天梯梦 proxy
    1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to
  • apache的math库中的回归——regression（翻译） lvdccyb Mathapache
    这个Math库，虽然不向weka那样专业的ML库，但是用户友好，易用。 多元线性回归，协方差和相关性（皮尔逊和斯皮尔曼），分布测试（假设检验，t，卡方，G），统计。   数学库中还包含，Cholesky，LU，SVD，QR，特征根分解，真不错。   基本覆盖了：线代，统计，矩阵， 最优化理论 曲线拟合 常微分方程 遗传算法（GA）， 还有3维的运算。。。
  • 基础数据结构和算法十三：Undirected Graphs (2) sunwinner Algorithm
      Design pattern for graph processing. Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation
  • 云计算平台最重要的五项技术 sumapp 云计算云平台智城云
    云计算平台最重要的五项技术 1、云服务器 云服务器提供简单高效，处理能力可弹性伸缩的计算服务，支持国内领先的云计算技术和大规模分布存储技术，使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 特性 机型丰富 通过高性能服务器虚拟化为云服务器，提供丰富配置类型虚拟机，极大简化数据存储、数据库搭建、web服务器搭建等工作； 仅需要几分钟，根据CP
  • 《京东技术解密》有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。  12月试读活动回顾： http://webmaster.iteye.com/blog/2164754 本次技术图书试读活动获奖名单及相应作品如下： 一等奖（两名） Microhardest：http://microhardest.ite
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他