![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 52
ganen_qian
积极、认真、负责
展开
-
页面缩放布局控制
页面缩放影响到布局有很多种情况,在此仅记录我遇到过的一种情况:自己在做业面过程总,经常遇到一个问题:页面控件需要与背景图片对应上,例如下图所示: 图中显示为背景图片,现欲把text框与图片中的text位置对应。这是一个登录页面,因此开始的时候我设置了该图片为登录页面的背景图,另外用图片边缘色做页面的背景色。输入框控件则放置在div中,通过设置m原创 2012-04-13 22:46:56 · 2533 阅读 · 0 评论 -
自定义时间线插件
入职已有两个月了,从以前的后台均开发到目前的专向做前端,最大的感触便是更加有耐心了,不管什么样的效果及布局,都能静下心来从解决方案到观摩别人解决方案,进而实现。然而写着写着会越加意识到自己该提高下代码质量,特别是对于日渐庞大的工程及需要不断维护和拓展的实现来说,代码规范、高质量是至关重要的一个环节,这是自己接下来需要提高和注意的地方。在此以自己近期遇到的一个开发任务:时间线的开发过程,来记录下原创 2016-05-04 17:02:20 · 4430 阅读 · 1 评论 -
多选下拉控件multiselect使用小结
项目开发中,需要用到多选下拉列表插件,由于项目前端框架采用了bootstrap,因此自然选择了bootstrap的组件。经了解其有两组插件:1、第一个组件是写bootstrap table的主人公 wenzhixin 封装的一个组件—— multiple-select 。这个组件风格简单、文档全、功能强大。Multiple-Select源码主页: https://github.原创 2016-03-24 16:30:35 · 102158 阅读 · 11 评论 -
联想输入
最近遇到了一个小需求:根据输入模糊匹配,并快速选择。即联想输入,如下图效果:抛开词库,分词等这些逻辑,只管前端实现,初步构思了以下思路:1、监控输入变化事件:onkeyup或onchange;2、匹配结果容器位置定位;3、匹配结果容器显示隐藏;4、匹配结果容器按键响应,方向键及enter:onkeydown;5、输入内容截取并替换;按照上面思路尝试demo,遇到原创 2016-04-13 18:30:09 · 718 阅读 · 0 评论 -
<meta>标签用法
http-equivMETA标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。★HTTP-EQUIVHTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。常用的HTTP-EQUIV类型有:1、Content-Type和Content-Language (显示字符集的设定)说明:设定页面使用的字符集,用以说明主页转载 2016-03-25 19:42:45 · 789 阅读 · 0 评论 -
专业Web前端路--启程
仔细算算自己投入到IT行业工作中也有近四年的时间了(包括读研期间的实习),不得不感叹时光如箭。人的一生中总要有一个又一个的目标,由小到大,循序渐进,制定目标也要量体裁衣,正所谓知己知彼,百战不殆。我喜用目标来驱动自己做出合理的人生规划,精神上感觉良好,生活中自然也会有拼搏的动力,然而计划再合理也不能保证一切都按部就班,总有些自认为不难却又延期很久都未能如愿的目标,这个时候我希望自己停下来,总结总结原创 2016-03-19 19:32:26 · 679 阅读 · 1 评论 -
:link,:visited,:focus,:hover,:active详解
CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究。 :link 与 :visited 在样式文件中的顺序可以随便放置。而focus, hover,active这几个,如果你设置的顺序不同,会直接影响样式的显示效果,下面会详细解释。:focus -> :hover -> :active 有些人可能会困惑,为什么必须要转载 2016-03-18 10:32:16 · 455 阅读 · 0 评论 -
纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧。1、正方形代码如下:#square { widt转载 2016-03-18 10:26:09 · 1618 阅读 · 1 评论 -
Web前端规范
本规范总结了前端开发中普遍涉及到的html、css、js、及其他相关资源的命名及可提取公共规范。主要包含两方面:1、命名规范;命名规范避免开发人员命名过程天马行空;便于团队合作过程中代码风格统一;新手上手快;后期维护有清晰条理。2、开发规范;开发规范为编码过程中普遍更优、更规范、更标准的代码用法;易排错;提高代码质量。一、代码存储结构:images--存放图片资源文件,原创 2016-03-29 18:52:45 · 849 阅读 · 0 评论 -
Google Map Api 谷歌地图接口整理
一:基本知识: 1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点: 1.假如使用 API 的页面还没有发布,只是在本地调试,可以不用密钥,随便用个字符串代替就可以了。 2.API 密钥只对网站目录或者域有效。对不同域的网页,需要用这些域分别注册不同的密钥2.页面引用javascript文件 URL(http://ditu.goo转载 2014-03-20 13:25:34 · 12027 阅读 · 0 评论 -
js、jquery插件记录
时间紧~忙里偷闲记录一下自己最近用过的不错的js、jquery插件:以时间轴形式展现记录:TimeLider;以日历形式展现记录:fullcalendar;图表插件:HighChart;原创 2013-11-06 14:49:08 · 598 阅读 · 0 评论 -
跨frame显示下拉菜单
方案一(js):参考文章:http://msdn2.microsoft.com/en-us/library/ms533025.aspx-------------------------------可以用window.createPopup()实现网页跨框架菜单 from MSDN////////////////////转载 2013-05-05 15:08:33 · 4734 阅读 · 0 评论 -
c#正则表达式
"^\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\d+)|(0+))$" //非正整数(负整数 + 0) "^-[0-9]*[1-9][0-9]*$" //负整数 "^-?\d+$" //整数 "^\d+(\.\d+)?$" //非负浮点数(正浮点数 + 0) "^(([0-9]+\.[0-9]*[1-9][原创 2012-11-01 11:47:55 · 315 阅读 · 0 评论 -
数字正则表达式
验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$验证非零的正整数:^\+?[1-9][0-9]*$转载 2012-10-09 16:18:10 · 959 阅读 · 0 评论 -
html常用代码大全
1.结构性定义文件类型 (放在档案的开头与结尾)文件主题 (必须放在「文头」区块内)文头 (描述性资料,像是「主题」)文体 (文件本体)(由浏览器控制的显示风格)标题 (从1到6,有六层选择)标题的对齐 区分 区分的对齐 引文区块 (通常会内缩)强调 (通常会以斜体显示)特别强调 (通常会以加粗显示)引文 (通常会以斜体显示)转载 2012-04-17 21:53:38 · 5399 阅读 · 2 评论 -
水平垂直居中控制方法
部分可行方案:1、样式:.tb-p-c{display: table-cell;vertical-align:middle;width:140px;height:140px;text-align:center;*display: block;*font-size: 122px;background:red;}.tb-p-c img {ve原创 2012-04-18 11:28:02 · 487 阅读 · 0 评论 -
id 与 class
如果要说两者的区别与联系,不同方面有相应不同这里从css样式类方面说明,记录困扰我的一个问题:如果div 同时应用了id和class,且样式类中,均有名为其id和class的样式类,这种情况下div会呈现出怎样的样式呢?首先,介绍id和class的区别: 1、id是一个标签,用于区分不同的结构和内容;id是先找到结构/内容,再给它定义样式;class是一个样式,可以套在任何结构和原创 2012-04-16 22:38:53 · 758 阅读 · 0 评论 -
Grunt+bower 环境搭建
当前负责的官网采用Grunt+bower+swig技术方案开发Grunt:管理node下NPM模块插件,插件包汇总体现在pakage.json文件中,插件最终下载到node-modules文件夹下;bower:js插件包管理,前端模块,插件包汇总体现在bower.json文件中,插件最终下载到vendors文件夹下;swig:模板引擎,页面模板实现;环境搭建:一、Gru原创 2016-05-04 17:45:28 · 2027 阅读 · 0 评论