zerlinda_c
zerlinda_c

CSS伪元素选择器:before与:after

　　在css标签中有这样子的标签div:before、div:after，对于before、after来说有部分人是相当陌生的，那么这两个标签是什么呢？有什么用处？
　　:befor、:after是CSS的伪元素，用CSS手册可以查询到其基本的用法：

E::before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::after 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 Ie6-7 不支持

　　说到before、after，必须要提一下content，content用来和:after及:before伪元素一起使用，在对象前或后显示内容。基本的用法如下：

content: normal|string|attr()|url()|counter()|none

1
　　其中，normal为默认值，表示不做任何指定内容或改动；string表示指定添加的文本内容；attr()表示插入轩泽的元素的属性值；url()表示插入一个外部资源，如图像，音频等；counter()指定一个计算器作为添加内容；none表示无任何内容。
　　
　　举个例子，在其中插入图片，就可以写 content： url(img/pic.png);

　　引用一个demo:　利用before和after制作的一个创意的时尚焦点图相框。效果:
　　　　　　　　　　　　CSS伪元素选择器:before与:after_第1张图片
　　　　　　　　　　　　

制作思路以及方法：

  1. 在图片外层加多一层div，设置1像素的边框线，这样图片看起来是有了边框，而我们想要的只是每两条边框线组成的类似小三角形的形状，那么我们只要把四条边框线的中间部分去掉，就实现了我们的效果。before和after伪元素可以在元素之前或者之后添加新的内容，那我们就利用这两个伪元素来盖住四条边框线的中间部分。

  2. 先去掉水平方向多余的边框线，在边框层，利用before伪元素，使用绝对定位，设置白色边框，因为要把之前的左右边框中间部分遮掉，颜色设置成和背景色（本例的背景为白色背景）一致，这样子看起来就相当于中间部分被裁剪掉了。

  3. 继续去掉垂直方向多余的边框线，方法同上，利用after伪元素，使用绝对定位，设置为白色边框，遮掉上下边框线的中间部分。这样，基本的形状就出现了.

  4. 美化步骤，调整细节，边框线调整为虚线。

HTML代码：

<div class="content">
<ul>
  <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_1.jpg" />
  <p class="focus">p>a>li>
  <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_2.jpg" />
  <p class="focus">p>a>li>
  <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_3.jpg" />
  <p class="focus">p>a>li>
  <li id="noborder"><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_4.jpg" />
  <p class="focus">p>a>li>
ul>
div>

CSS样式代码

.content {
    width:788px; 
    margin:auto; 
    height:auto; 
    overflow:hidden; 
    padding:30px; 
}
.content ul li {
    float:left; 
    height:176px; 
    border-right:1px solid #DDDDDD; 
    position:relative; 
    padding:10px;
}
.focus {
    background:rgba(250,250,250,0.25); 
    width:174px; 
    height:174px; 
    border:1px dashed #666; 
    position:absolute; 
    left:10px; 
    top:10px; 
    display:none;
}
.focus:before {
    width:174px; 
    height:134px; 
    border-left:1px solid #fff; 
    border-right:1px solid #fff; 
    content:''; 
    position:absolute; 
    left:-1px; 
    top:20px;
}
.focus:after {
    width:134px; 
    height:174px; 
    border-top:1px solid #fff; 
    border-bottom:1px solid #fff; 
    content:''; 
    position:absolute; 
    top:-1px; 
    left:20px;
}
.content ul li:hover .focus {
    display:block;
}
#noborder {
    border-right:0 none;
}

利用:before :after还可以做出其他奇妙的样式，比如空心三角.
　　　　　　　　　　　　CSS伪元素选择器:before与:after_第2张图片

效果图：
　　　　　　　　　　　　CSS伪元素选择器:before与:after_第3张图片
代码如下 

<body>
    <div id = "demo">div>
body>

只简要说一下步骤：
　　第一步 画出大体的框，即demo;
　　第二步 绘制小三角形
　　　　想要有空心三角形效果这里需要绘制两个三角形，一个大一个小，用内层三角形覆盖外层三角形，直观上只有一个边框。
　　　　绘制小三角形有一个技巧，这里需要讲一下border属性，当元素border很大而元素的宽和高为零的时候，border实际显示的是一个矩形，而如果只显示其中一条边，那么看起来的形状就是一个三角形。
　　　　所以将：after和：before定位到元素的最右边。父元素position定位为relative，伪元素定位为absolute，将其整体移到父元素的最右面，设定top值。具体的细节，就有关于css盒模型了，注意一下border，当伪元素left设为100%时，元素正好处于父元素border-right并且覆盖在上面。 所以当两个小三角形实际显示的效果，看起来就是在大框的右边凸出来的三角边框了。
　　
css代码

#demo {
    width: 100px;
    height: 100px;
    background: #fff;
    position: relative;
    border: 2px solid #000;
}
#demo:after, #demo:before {
    width: 0;
    height: 0;
    content: "";
    border: solid transparent;
    position: absolute;
    left: 100%;
}
#demo:after {
    border-width: 10px;
    border-left-color: #fff;
    top: 20px;
}
#demo:before {
    border-width: 12px;
    border-left-color: #000;
    top: 18px;
}

你可能感兴趣的:(css随笔)

  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的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：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 祭坛随笔 阿门不热
    街角右拐，便是北宋的祠堂。平日里冉冉的佛香被雨水打湿了，一地枯黄的银杏显得平静哀伤，如同一地被踩碎的阳光。我喜欢在这样的阴暗里吞噬古代的讯息，那遥远的来自过去的历史风潮。谢却茶扉，轻轻地抚上墙壁，寒风不御，无数深浅的纹路交织在心底，如同一把古琴不堪重负的尾音。寂寞锁朱门，香客们已是三三两两，巨大的雨帘让天空失掉了颜色，灰蒙蒙掉在阁楼一角，沉稳不惊地暗下去，再暗下去......古树上红色的挂牌像一块
  • 《吹牛大王历险记》读书随笔 赵炳森
    这本书的作者是埃·拉斯伯戈·毕尔格。（没查到相关内容，好像他只写过《吹牛大王历险记》。）最让人百思不得其解的是他居然能自己拉自己的辫子出泥潭？！我觉得自己拉自己的辫子只会把自己的辫子拉断，而不会飞出泥潭。（问:图片中底下的屁股为什么插了一根钢针？）屁股底下居然有根钢针？在泥潭应该是滑滑的吧，可是他怎么能夹紧马肚呢？马肚子应该是在马的下方。还有如果能从泥潭里把连人带马都给拽出来的话，他力气肯定很大，
  • 樵夫随笔 NO.1146吓了公交司机一大跳 痴信不改一书生
    傍晚，我把公交司机吓了一大跳！下班回家路上，先在公交车上读了会儿书，又写了篇文章，还有大约10分钟才到站，于是，靠在座椅上小眯一会儿。这一眯不要紧，直接眯到了终点站！而且，除我以外的所有人都下车后，司机直接关掉车厢内的灯，紧接着下车，关门儿，准备去厕所。这时，我被惊醒，拍打着玻璃，大喊“师傅……师傅……”司机师傅打开车门后的第一句话就是：“你可把我吓得够呛！”说说当时的情景：终点站设在一破旧的小院
  • 随笔（探悟） 杰语唱响
    亲兄弟姐妹之间不来往，其实不就是吃亏的人不想吃亏了，或者是占便宜的人占不到便宜了，从此就断绝了来往，互不搭理了。那些极度自私的人，是最不讲道理的，无论他们遇到什么事，都要让他占到便宜。顺着他的心情才行。否则那就是别人的不对。有这种想法的人，一看就是个穷命，那些个处处想着占便宜的人，老是想多要点，原因就是我没有吗，什么都没有，德行也没有，财富也没有，你说他的命怎么可能会好。家庭不和，兄弟姐妹断绝来往
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 【新教育-教师随笔】读《做最好的英语老师》有感 164c5aca7b79
    伊川县直中学王素平《做最好的英语老师》这本书是作者这些年在他教学中得与失的总结。里面给我们提供了听力，单词，句子，阅读，作文等模块的教学方法，让我受益匪浅，现总结如下：一.语文教学给了我们什么启示？（1）：现有的英语教材内容简单，枯燥，与学生的心智发展水平严重脱节。我们要给学生补中一些贴近学生生活，能感动和影响他们的经典作品。让学生学习知识的同时，有所感悟和思考，同时享受审美的乐趣！如AWiseO
  • 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，点击
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • 夏日随笔日记夏天的夜 住在城里的庄户孩子
    浅聊微信朋友圈及其它文/王立虎（一）又是一个深夜了，夏天的夜显得有些浮躁有些闷热，透过窗户外面街道上街灯依旧明亮，照着匆忙的车与人回家。关上电脑，打开，还是先完成日更，一直坚持着努力着写着，虽没有什么优秀的大作出现，但有时候还是佩服自己对文学的执着和爱好，佩服自己的自律。写点吧，在这夜深人静的时候，独处着，习惯着，随笔写下自己一天的心情，有感悟，有事件，有温度，我想写下总是好的。也有人喜欢这个点来
  • 随笔 Csar_NFBC
    别再奋战在凌晨四点半不断留存的我们的遗憾一般流汗不呐喊的伪善到了虚荣心的年纪都眼馋那么多浮夸的浮华都摞在每个人的肩头献丑般的伎俩扩大了每个人的心愁个个都能说会道到最后却难免想上帝苦苦的祷告，越光鲜的就越阴险着，人血馒头吃在嘴里拿在手里从不做冒险者谁又想阴暗呢，现实多残酷，上班族碌碌，面对现实谁又是无辜的？那天空气有些浑浊，办公室中气氛紧张影响脉搏，明明有些事情很清楚还要说上三遍到处传达着加班到凌晨
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 来时空 去时空 如是万般皆空 一航文学与艺术
    关注一航文学与艺术每一天都与众不同更漏子文/宁静致远（阑珊）北风寒，梅蕊落，陌上花开花落。观世间，月儿圆，来回皆是缘。来时空，去时空，如是万般皆空。花儿落，水东流，落花人长留。2018.2.4给我一支笔文／宁静致远（阑珊）给我一支笔绘一幅水墨丹青绿水青山给我一支笔写一曲岁月如歌曲水流觞给我一支笔写下风花雪月前世今生给我一支笔写下灿烂的诗篇吟古诵今2018.2.3游无为寺随笔文/宁静致远光阴一去不复
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 只生欢喜不生愁 花间星事
    《只生欢喜不生愁》是我很喜欢的一本书，挺适合当下的环境阅读。作者林曦老师是位水墨画家，设计师。她1983年生于重庆，毕业于中央美术学院，年少成名，以手艺人自居。在她的这本艺术生活随笔集里，用自己的切身实践解析艺术美育的本质内涵。分享了艺术学习，写字的乐趣，专注心力的法门与修炼，用中式文人的视角观照当代生活的审美情趣及路径，讨论艺术之道与无用之美，让传统美学回归到现实生活践行中。林曦少年时办过不少画
  • 【随笔】我 依梦澈何
    崖上的雄鹰不会眷恋地上的鸡因为他愿意向着蓝天一飞冲天为此经历了无数苦难与蜕变成就了掌控蓝天的一代天骄这就是我蓝天，未来，俯视尽收眼底！图片发自App
  • HTML中"bgcolor"与"background-color"的区别 Sardar_ html
    bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
  • 宋真宗御笔书名的“岳麓书院”，历经千年魅力永续 博物馆学文化
    中国古代书院，兴起于唐，清代诗人袁枚在《随园随笔》中记载：“书院之名起唐玄宗时，丽正书院、集贤书院皆建于朝省，为修书之地，非士子肄业之所也。”在《新唐书·百官志》中记载：“唐开元六年，将乾元院改为丽正修书院，十三年又改丽正修书院为集贤殿书院。”这是史料中有关书院最早的记载。是唐代为了搜集图书、校刊经籍，撰写文章的场所，而非教育机构，也非朝廷的正式办事机构。最早具有教育功能的书院是白鹿洞书院，与它一
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • 随笔——老友记 天秤座的O小姐（二） 盐鱼仔
    在我眼里的O小姐简直是把天秤座的性格表现得淋漓尽致，又爱美，喜欢各种尝试新事物，但是又优柔寡断，真的像个天秤一样，左右摇摆，最大的爱好就是逛街，逛各种服装店。老家是一座小县城，对街上店铺的熟悉如数家珍，也是让我敬佩不已，她逛得开心，而我更多数时候敬责的当个帮忙提包的工具人。在其他朋友或是同学看来，O小姐与我完全是180°的对立面，像我们俩这种完全相反性格的人是如何能凑到一块，并坚持了十几年的友谊不
  • redis学习笔记——不仅仅是存取数据 Everyday都不同 returnSourceexpire/delincr/lpush数据库分区redis
    最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷）   1、关于JedisPool.returnSource(Jedis jeids)   这个方法是从red
  • SQL性能优化-持续更新中。。。。。。 atongyeye oraclesql
    1 通过ROWID访问表--索引 你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 2 共享SQL语句--相同的sql放入缓存 3 选择最有效率的表
  • [JAVA语言]JAVA虚拟机对底层硬件的操控还不完善 comsci JAVA虚拟机
         如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？ 那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ &n
  • lvs- real 男人50 LVS
    #!/bin/bash # # Script to start LVS DR real server. # description: LVS DR real server # #.  /etc/rc.d/init.d/functions VIP=10.10.6.252 host='/bin/hostname' case "$1" in sta
  • 生成公钥和私钥 oloz DSA安全加密
    package com.msserver.core.util; import java.security.KeyPair; import java.security.PrivateKey; import java.security.PublicKey; import java.security.SecureRandom; public class SecurityUtil {
  • UIView 中加入的cocos2d，背景透明 374016526 cocos2dglClearColor
    要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
  • mysql常用命令 香水浓 mysql
    连接数据库 mysql -u troy -ptroy 备份表 mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 恢复表（与恢复数据库命令相同） mysql -u troy -ptroy mm_database < user.sql 备份数据库 mysqldump -u troy -ptroy
  • 我的架构经验系列文章 - 后端架构 - 系统层面 agevs JavaScriptjquerycsshtml5
    系统层面： 高可用性 所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速
  • 利用ant进行远程tomcat部署 aijuans tomcat
    在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 1.配置tomcat的用户角色
  • 获取复利总收入 baalwolf 获取
           public static void main(String args[]){         int money=200;         int year=1;         double rate=0.1; &
  • eclipse.ini解释 BigBird2012 eclipse
    大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 Overview 1、Eclipse.ini的作用 Eclipse startup is controlled by th
  • AngularJS实现分页功能 bijian1013 JavaScriptAngularJS分页
            对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。   &nbs
  • [Maven学习笔记三]Maven archetype bit1129 ArcheType
    archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等.   mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式，   mvn archetype   1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener
  • 【Java命令三】jps bit1129 Java命令
    jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看   [hadoop@hadoop bin]$ jps -help usage: jps [-help] jps [-q] [-mlvV] [<hostid>] Definitions: <hostid>: <hostname>[:
  • ZABBIX2.2 2.4 等各版本之间的兼容性 ronin47
    zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点 客户端AGENT兼容 zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p
  • unity 3d还是cocos2dx哪个适合游戏？ brotherlamp unity自学unity教程unity视频unity资料unity
    unity 3d还是cocos2dx哪个适合游戏？ 问：unity 3d还是cocos2dx哪个适合游戏？ 答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2，
  • 百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序 bylijinnan java算法面试百度招聘
    import java.util.Arrays; /** * 最早是在陈利人老师的微博看到这道题： * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K * 设计一个排序算法。It should be faster than O(n*lgn)。
  • 获取checkbox复选框的值 chiangfai checkbox
    <title>CheckBox</title> <script type = "text/javascript"> doGetVal: function doGetVal() { //var fruitName = document.getElementById("apple").value;//根据
  • MySQLdb用户指南 chenchao051 mysqldb
    原网页被墙，放这里备用。 MySQLdb User's Guide Contents Introduction Installation _mysql MySQL C API translation MySQL C API function mapping Some _mysql examples MySQLdb
  • HIVE 窗口及分析函数 daizj hive窗口函数分析函数
    窗口函数应用场景： （1）用于分区排序 （2）动态Group By （3）Top N （4）累计计算 （5）层次查询 一、分析函数 用于等级、百分点、n分片等。 函数             说明 RANK()     &nbs
  • PHP ZipArchive 实现压缩解压Zip文件 dcj3sjt126com PHPzip
    PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。 一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11
  • 精彩英语贺词 dcj3sjt126com 英语
    I'm always here              我会一直在这里支持你                &nb
  • 基于Java注解的Spring的IoC功能 e200702084 javaspringbeanIOCOffice
                                      
  • java模拟post请求 geeksun java
    一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。 此处用HttpComponents的httpclient来完成使命。 import org.apache.http.HttpEntity ; import org.apache.http.HttpRespon
  • Swift语法之 ---- ?和!区别 hongtoushizi ?swift!
    转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html   Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错： var stringValue : String //
  • centos7安装jdk1.7 jisonami jdkcentos
    安装JDK1.7 步骤1、解压tar包在当前目录 [root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 步骤2：配置环境变量 在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1.7.0_75 export CLASSPATH=/usr/java/jdk1.7.0_75/lib
  • 数据源架构模式之数据映射器 home198979 PHP架构数据映射器datamapper
    前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。   一、概念 数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 &nb
  • 在Python中使用MYSQL pda158 mysqlpython
    缘由 　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到 数据库中。 　　了解到 Python在这方面有优势，便选用之。 　　由于我有台 server上面安装有 mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里 记录一下，大家共勉。 　　 python中mysql的调用 　　 百度之后能够通过MySQLdb进行数据库操作。
  • 单例模式 hxl1988_0311 java单例设计模式单件
    package com.sosop.designpattern.singleton; /* * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点 * * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件 * * 必须考虑到并发情况下创建了多个实例对象 * */ /** * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率
  • 27种迹象显示你应该辞掉程序员的工作 vipshichg 工作
    1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他