fooooooood
fooooooood

input checkbox样式美化

input checkbox样式美化

最近在学校做自己的学习实践项目中，用到了checkbox，想实现的是，在登陆界面的中的那个记住我的选框。我们都知道，原生的checkbox样式不能满足咱们的需求。所以接下来，让我们一起动动手，换种方式美化一下吧。

以下我们将会学到的知识技巧吧：

  • div居中于页面
  • checkbox样式美化
  • label for属性的使用

话不多说，用图说话：

【原生样式】
[美化后样式]
【用到的icon】这里写图片描述（可右键保存本地）
这里的icon可以自己去找，我这里用的像素尺寸是32的，大家也可以到iconfont-阿里巴巴矢量图标库网下载：http://www.iconfont.cn

思路

  • div居中于页面
    首先是给div一个宽高，这个为了后面的居中定位，继续，给个绝对定位absolute，其次就是把top和left都设置成50%，这里可能会有的同学说，这样不就可以居中了，其实你仔细的瞅一眼，它并没有居中，我们都知道原点坐标为屏幕的左上角，div定位也是根据自身的左上角来定位，所以我们还需要加上margin-top:-12px ;和margin-left:-40px ;这里的数值就是div宽高的一半，这样，我们就可以看到它居中啦。不过最后还有一个需要注意的地方，假如说我加了一个padding,然后就不居中了。放心一样的道理，假如说我给div加了一个padding: 10px; ，这时需要为margin-top 和 margin-left 在原来的值的绝对值基础上加10 ，如margin-top:-12px ;和margin-left:-40px ; 变成margin-top:-22px ;和margin-left:-50px ; ,这个相加的值是上下和左右padding的各一半。
div {
        width: 80px;
        height: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin:-12px 0 0 -40px ;
        text-align: center;
        }

拿本次例子来演示效果图：
input checkbox样式美化_第1张图片
- checkbox样式美化
首先，我们需要把checkbox的透明度设置为0： opacity: 0; 然后我们需要用到span，作为checkbox的选中状态显示。接着span一个背景icon，然后根据icon的分辨率尺寸大小设置背景图片的一些属性，关键是它: background-position-y: 20px;，目的是：当checkbox 未选中的时候，让背景图片挪到一个我们看不见的地方去，当checkbox 选中的时候，让背景图片再挪回来，也就是重置为0：background-position-y: 0px;，剩下的就是给它一个过渡效果，用户体验就更好啦，最后这样就达到我们的目的啦，具体代码如下：

input[type=checkbox]{
    width: 16px;
    height: 16px;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
span {
    position: absolute;
    top: 4px;
    width: 14px;
    height: 14px;
    border: 1px solid #d6d6d6;
    border-radius: 3px;
    background: url(img/fork_green.png);
    background-size: 14px;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: 20px;
    -webkit-transition: background-position-y 0.1s linear;
    -o-transition: background-position-y 0.1s linear;
    transition: background-position-y 0.1s linear;
}
input[type=checkbox]:checked+span {
    background-position-y: 0px;
}
  • label for属性的使用
    大家有没有发现，在上面代码中，单击记住我的文字没有效果！！！有些同学会问，这是为啥，那我们这里就是解决这个问题，而我又不想用JS去写，这么麻烦，还得if else弄来弄去，对吧。
    - HTML for 属性
    for 属性规定 label 绑定的表单元素，element_id为label 绑定的元素的 id。使用方法如下：
<label for="element_id">

/*例如*/
type="checkbox" id="remember-me-checkbox">
<label for="remember-me-checkbox">记住我 label>

该说的说完了，上代码吧


<html>
    <head>
        <meta charset="UTF-8">
        <title>checkbox美化title>
    head>
    <style type="text/css">
        #remember-password-container {
            width: 80px;
            height: 24px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin:-12px 0 0 -40px ;
            text-align: center;
        }
        #remember-password-container .remember-password-content {
            position: relative;
        }

        #remember-password-container input[type=checkbox]{
            width: 16px;
            height: 16px;
            position: absolute;
            opacity: 0;
            cursor: pointer;
            z-index: 2;
            font-size: initial;
        }

        #remember-password-container .remember-me-label {
            color: #000;
            margin-left: 25px;
            cursor: pointer;
        }
        #remember-password-container .remember-me-label::selection{
            background: rgba(0,0,0,0);
        }
        #remember-password-container span {
            position: absolute;
            top: 4px;
            width: 14px;
            height: 14px;
            border: 1px solid #d6d6d6;
            border-radius: 3px;
            background: url(img/fork_green.png);
            background-size: 14px;
            background-repeat: no-repeat;
            background-position-x: 0px;
            background-position-y: 20px;
            -webkit-transition: background-position-y 0.1s linear;
            -o-transition: background-position-y 0.1s linear;
            transition: background-position-y 0.1s linear;
        }

        #remember-password-container input[type=checkbox]:checked+span {
            background-position-y: 0px;
        }
    style>

    <body>
        <div id="remember-password-container">
            <div class="remember-password-content">
                <input type="checkbox" id="remember-me-checkbox">
                <span>span>
                <label class="remember-me-label" for="remember-me-checkbox">记住我 label>
            div>
        div>
    body>
html>

结束语

这个编辑工具使用不是很顺手，大家凑活着看吧，请多多谅解，同时有哪些错误点误导大家的，也请大家留言多多吐槽一起学习。这次笔记就写到这里啦！谢谢大家(^_^)。

你可能感兴趣的:(Html+CSS)

  • HTML+CSS案例展示(CSS3D效果旋转相册) hacalili htmlcss前端css3
    参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili效果展示：总结：transform：translate(x,y)rotate(180deg)scale()...顺序对最后的效果有影响，需要根据需求安排位移和其他属性的顺序；实现暂停动画效果：animation-play-state:paused;经常和鼠标经过等其
  • 【Html+CSS】3D旋转相册 小木荣 web前端csshtml3d
    3D旋转木马相册&3D盒子相册因为代码大部分相同，就放一起了注释一下就是另一个相册3D旋转木马相册body{background-color:#000;/*视距，使子元素获得视距效果*/perspective:900px;}section{margin:20vhauto;position:relative;width:200px;height:200px;/*开启3D空间*/transform-s
  • 基于讯飞星火的语音问答 哎呦☞ᨐ 语音识别人工智能语言模型文心一言opencv
    一.简介项目基于讯飞星火api作为核心能力并在其中搭载了WebSpeechAPI中的webkitSpeechRecognition对象来实现语音转文字的功能和TTS(Text-to-Speech)：通过调用百度TTSAPI将文本转换成语音，使机器人能够“说话”。实现了语音输入，语音输出的对话形式。实现方法：后端基于python的flask框架，前端使用了html+css并用AJAX通过XMLHtt
  • 可狱可囚的爬虫系列课程 19：静态页面和动态页面之分 HerrFu@灵思智行科技 爬虫python爬虫
    在爬虫开发中，静态页面和动态页面的核心区别在于数据的生成和加载方式，理解两者的差异直接影响爬虫技术选型和数据抓取策略；掌握静态/动态页面的区别，可显著提升爬虫效率和成功率。一、静态页面（StaticPage）静态页面的内容（1）在服务器预先生成，以.html文件形式存储，用户每次访问时返回相同的HTML代码。（2）数据直接嵌入在HTML中（如文本、表格、链接等）。（3）纯HTML+CSS，无复杂交
  • 329.大学生HTML期末大作业 —【纪念鲁迅文化主题网页】 Web前端网页制作 html+css 一只小小的眠羊 大学生期末大作业文化前端html课程设计javascripthtml5cssjquery
    目录一、更多推荐二、网页简介三、网页文件四、网页效果五、代码展示1.html2.CSS六、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强一、更多推荐欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客5000+
  • HTML+CSS面试试题（部分） 四分十七 前端学习htmlhtmlcss大数据
    目录1:主流浏览器的内核分别是什么？2:每个HTML文件开头都有，它的作用是什么3:div+css的布局较table布局有什么优点？4:img的alt属性与title属性有何异同5:strong标签与em标签的异同6:渐进增强和优雅降级之间的不同7:为什么利用多个域名来存储网站资源8:网页标准和标准制定机构的意义9:简述一下src与href的区别10:网页制作会用的图片格式有哪些11:微格式，前端
  • HTML静态网页成品作业(HTML+CSS)——电影肖申克的救赎介绍设计制作(1个页面) 爱码网页成品 学生网页HTML网页成品静态网页成品htmlcss前端
    不定期分享源码，关注不丢失哦文章目录一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码五、源码获取一、作品介绍️本套采用HTML+CSS，未使用Javacsript代码，共有1个页面。二、作品演示三、代码目录四、网站代码HTML部分代码肖申克的救赎剧情简介1947年，银行家安迪·杜佛兰（蒂姆·罗宾斯饰）被指控枪杀了妻子及其情人，安迪被判无期徒刑，这意味着他将在肖申克监狱中渡过余生。埃
  • 从零开始设计一个完整的网站：HTML、CSS、PHP、MySQL 和 JavaScript 实战教程 web13093320398 面试学习路线阿里巴巴htmlcssphp
    前言本文将从实战角度出发，带你一步步设计一个完整的网站。我们将从静态网页开始，然后加入动态功能（使用PHP），连接数据库，最后加入JavaScript实现交互功能。通过这个教程，你将掌握一个网站的真正设计过程！目录网站功能设计准备工具设计静态网页（HTML+CSS）设计动态网页（PHP）创建数据库（MySQL）加入JavaScript实现交互测试与发布总结与扩展1.网站功能设计我们的网站将包含以下
  • HTML+CSS学习笔记 潘越越 学习笔记
    目录一、emmet语法二、常用html标签使用方法：三、常用CSS样式css样式设计具体引入方式1.关于border边框的设计2.关于text文本内容的管理3.关于盒模型的分类以及position属性：4.background属性的使用5.实现样式转变持续更新……首先，整体了解有关HTML和CSS的使用，主要是为了搭建静态页面有关HTML5所需要掌握的框架：React+Reactnativeuni
  • 探索前端开发的无限可能：30个HTML+CSS案例集锦 唐红娉Trevor
    探索前端开发的无限可能：30个HTML+CSS案例集锦30个HTMLCSS前端开发案例完结篇项目地址:https://gitcode.com/Resource-Bundle-Collection/a6ecb项目介绍在快速发展的前端开发领域，掌握HTML和CSS是每一位开发者的基本功。为了帮助开发者从入门到精通，我们精心打造了一个包含30个案例的HTML+CSS前端开发案例集锦。这个项目不仅涵盖了从
  • HTML静态网页成品作业(HTML+CSS)——西点蛋糕介绍(5个页面) 爱码网页成品 HTML网页成品静态网页成品学生网页htmlcss前端
    不定期分享源码，关注不丢失哦文章目录一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码五、源码获取一、作品介绍️本套采用HTML+CSS，未使用Javacsript代码，共有5个页面。二、作品演示三、代码目录四、网站代码HTML部分代码首页西点简介西点分类西点展示西点做法SWEETYSWEET提拉米苏布丁芝士蛋糕泡芙马卡龙西式的甜品花团锦簇，尤以意、法为盛。提拉米苏（Tiramisu
  • html+css 实现发光倒影按钮 宝码香车 #html+css+js绚丽按钮htmlcss前端
    效果html+css鼠标悬停，发光倒影按钮原理解析通过a元素的hover效果实现的过渡动画:给a元素定义一个初始值，当hover时，改变这个值。这里是给a元素定义一个css3的过渡动画。当hover时改变这个过渡动画的参数。
  • Html+CSS中子选择器 若节 Html+CSShtmlCSS子选择器
    子选择符.food>li{border:1pxsolidred;}/*添加边框样式（粗细为1px，颜色为红色的实线）*/.first>span{border:1pxsolidred;}三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。食物水果香蕉苹果梨蔬菜白菜油菜卷心菜这里就可以在外
  • html+css网页设计，我的网站 软件技术NINI html/css笔记javascripthtmlcss
    一、技术简介HTML：超文本标记语言（HyperTextMarkupLanguage），用于创建网页的基本结构和内容。CSS：层叠样式表（CascadingStyleSheets），用于设置网页的样式和布局，包括字体、颜色、边距、对齐方式等。JavaScript：一种用于创建动态和交互式网页的脚本语言。通过JavaScript，可以实现网页的动画效果、表单验证、数据交互等功能。二、创建多页网站的基
  • 后端学习前端-html+css 想要变瘦的小码头 后端学前端前端学习html
    第一章.HTML与CSSHTML是什么：即HyperTextMarkuplanguage超文本标记语言，咱们熟知的网页就是用它编写的，HTML的作用是定义网页的内容和结构。HyperText是指用超链接的方式组织网页，把网页联系起来Markup是指用的方式赋予内容不同的功能和含义CSS是什么：即CascadingStyleSheets级联（层叠）样式表，它描述了网页的表现与展示效果1.HTML元素
  • 从零开始设计一个完整的网站：HTML、CSS、PHP、MySQL 和 JavaScript 实战教程 Aishenyanying33 htmlcssphpjavascriptmysql网络
    前言本文将从实战角度出发，带你一步步设计一个完整的网站。我们将从静态网页开始，然后加入动态功能（使用PHP），连接数据库，最后加入JavaScript实现交互功能。通过这个教程，你将掌握一个网站的真正设计过程！目录网站功能设计准备工具设计静态网页（HTML+CSS）设计动态网页（PHP）创建数据库（MySQL）加入JavaScript实现交互测试与发布总结与扩展1.网站功能设计我们的网站将包含以下
  • HTML+CSS进阶用法 (下)——移动端适配、媒体查询和响应式布局 天下无贼！ 前端必备技能htmlcss媒体
    欢迎来到移动端适配方案的介绍！随着移动互联网的快速发展，越来越多的用户通过手机和平板电脑访问网站。为了确保网站能够在各种设备上呈现出最佳的视觉效果和用户体验，我们需要采取有效的适配策略。本篇文章将带你了解几种常用的适配方法，包括宽度适配、等比适配、媒体查询以及使用flexible.js和vw布局。让我们一起探索如何构建响应式网页，使其能够完美适应不同屏幕尺寸！文章目录移动端适配方案宽度适配百分之布
  • 电影网站(7页) 琪源图文 电影javascripthtml5css开发语言visualstudio
    电影网站(7页)无js,带登录表单,注册表单,带表格,table布局,内嵌css,源码简单,合适【HTML+CSS】初学者
  • HTML+CSS面试题 KangJinXuan htmlcsschrome
    1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言最主要的不同XHTML元素必须被正确地嵌套。XHTML元素必须被关闭标签名必须用小写字母XHTMl文档必须拥有根元素2.什么是语义化的HTML？直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！HTML语义化就是让页面的内容结构化，便于对浏览器，搜索引擎解析；在没有样式cs
  • HTML+CSS初学 （day3） 灵封～ html前端css
    HTML，全称为超文本标记语言（HyperTextMarkupLanguage），是一种用于创建网页的标准标记语言。HTML是构建Web页面的基础，它使用一系列称为标签的关键字来定义页面的结构。一、HTML的基本概念定义：HTML通过标签来描述网页中的各个元素，如标题、段落、图片、链接等。这些标签告诉浏览器如何显示内容，包括文字、图片、视频等。作用：定义网页的结构和内容，使网页内容能够按照预定的格
  • 前端——Html+CSS 逆风局？ css前端html5
    目录CSS引入方式颜色表达方式CSS选择器去掉超链接的下划线路径表示行高和首行缩进常见标签布局标签flex布局表单标签表单项标签改变鼠标指针的样式表格标签div{box-sizing:border-box;}CSS引入方式具体有3种引入方式，语法如下表格所示：名称语法描述示例行内样式在标签内使用style属性，属性值是css属性键值对。中国新闻网内部样式定义标签，在标签内部定义css样式。h1{.
  • 纯HTML+CSS网页设计期末作业（个人网站） m0_67403143 前端htmlvue.jstypescriptjavascript
    目录纯HTML+CSS网页设计期末作业（个人网站）源码链接效果展示index页面about页面hobbies页面书籍介绍页面元曲介绍页面源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.cssyuanqu.htmlyuanqu.css缺陷纯HTML+CSS网页设计期末作业（个人网站）源
  • HTML静态网页作业(HTML+CSS)——外卖平台主题网页设计制作(8个页面) 2501_90365653 htmlcss学生网页htmlcss前端
    不定期分享源码，关注不丢失哦文章目录一、作品介绍二、作品演示1、首页2、商家列表页3、商家详情页4、商家图片页三、代码目录四、网站代码五、源码获取一、作品介绍️本套采用DIV+CSS布局，未使用Javacsript代码，共有8个页面。二、作品演示1、首页2、商家列表页3、商家详情页4、商家图片页三、代码目录四、网站代码北京[更换]你好，请登录/注册全部分类全部商家商家入驻关于我们常见问题我要登录用
  • JavaWeb 前端基础 html + CSS 快速入门 | 018 菜鸟阿康学习编程 前端前端htmlcss
    今日推荐语指望别人的救赎，势必走向毁灭——波伏娃日期学习内容打卡编号2025年01月17日JavaWeb前端基础html+CSS018前言哈喽，我是菜鸟阿康。今天正式进入JavaWeb的学习，简单学习html+CSS这2各前端基础部分，以下是我的重点总结，希望对你有所帮助。（建议先看左侧目录，先了解文章结构）（请忽略错误的大纲编号，我直接从笔记中粘贴过来的，就没严格纠正了，重点在内容！）文末和主页
  • html+css 实现仿3D地球旋转效果 web网页精选 htmlcss3d
    demo:root{--stars:5vw15vh2pxwhite,1vw33vh0pxwhite,2vw25vh2pxwhite,10vw10vh2pxwhite,12vw20vh0pxwhite,30vw15vh2pxwhite,16vw5vh2pxwhite,24vw10vh0pxwhite,32vw40vh0pxwhite,33vw35vh2pxwhite,12vw38vh2pxwhite
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • 【html+css网站设计】 小翔很开心 htmlcss前端
    学习笔记：HTML基础概念1.vscode常用设置1.1打开文件1.2新建文件1.3自动保存(ctrl+S)1.4文件重命名1.5删除文件2.vscode常用快捷键2.1自动补全HTML基本结构2.2标签自动补全2.3复制当前行|复制多行2.4删除当前行|删除多行2.5单行注释|取消单行注释2.6多行注释|取消多行注释2.7统一编辑2.8生成多个2.9文字2.10打开浏览器2.11快捷键可以组合使
  • CSS实现“鼠标悬浮按钮_闪过光泽”效果 SOLDIER_76
    创建按钮创建按钮样式创建渐变光创建什么时候渐变光出现创建渐变光的动画效果动画开始执行HTML+CSS，一共6个步骤实现效果代码效果：（用灵者GIF录制工具录下来的，效果不怎么好）HTML：（先随便写一个按钮，a或者button都为所谓。写两个类名，第一个显示按钮的样式，第二个控制按钮的动画，就写一个类名也无所谓，写两个是便于维护）CSS：（给按钮添加一些基础的样式，没什么说的，这里需要写个posi
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他