CSS
文章平均质量分 71
蓝色水
一个在海边拾贝壳的大男孩
2002年毕业于上海市交通大学上中路校区,曾参与微软ALL-IN-ONE-CODE FRAMEWORK项目并对WPF,C++,C#,Winform的MSDN论坛支持多年,专注于net的技术体系十多年,对DDD领域设计net的部署实施有独到见解和经验,并对JAVA的架构体系的数据持久化,AOP,分布式事务,单点登录,多业态权限设计,分布式日志系统有实际项目运用案例,致力于传统行业的HR,OA,费控,业绩,移动平台化整合,ERP改造以及云部署。
展开
-
提升HTML5的性能体验系列之一 避免切页白屏
系列文章目录导航:- [提升HTML5的性能体验系列之一 避免切页白屏]- 提升HTML5的性能体验系列之二 列表流畅滑动- 提升HTML5的性能体验系列之三 流畅下拉刷新- 提升HTML5的性能体验系列之四 使用原生UI(nativeUI)- 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析窗体切换白屏的现实问题HTML5的性能比原生转载 2016-03-28 13:44:06 · 3088 阅读 · 0 评论 -
css的分割线
.splitline{ height:1px; width:100%; background:#d9d9da; overflow:hidden;}原创 2015-11-18 16:52:12 · 489 阅读 · 0 评论 -
Css中实现两个DIV左右并排摆放,且自动按比例伸缩(示例)
Div0为最大的,Div1和Div2为左右分割的DIV #Div0 { float:left; background-color:Blue; width:100%; height:180px; } #Div1 { float:left; backgro转载 2015-11-18 12:37:06 · 2836 阅读 · 0 评论 -
android原生系统老系统不支持localstorage
android原生系统老系统不支持localstorage原创 2015-11-24 11:05:11 · 3057 阅读 · 0 评论 -
position和float的结合运用
刚做的帮助中心还没有明白里面的奥妙,这里又碰到了,absolute让relative的可以不按照float的div约束。 #content { width:780px; margin:0 auto; position:relative; left:0;原创 2015-11-18 16:50:38 · 662 阅读 · 0 评论 -
如何去掉网页中的图片添加超链接的蓝色边框的方法
解决的方法很简单,设边框为0就可以。在中加入代码border="0"如:授人以鱼不如授人以渔,超链接样式延伸学习用CSS语法来控制超链接的形式、颜色变化。例子:链接:未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色。实现方法很简单,在源代码的和之间加上如下的CSS语法控制:转载 2015-11-26 12:33:02 · 3652 阅读 · 0 评论 -
jquery 弹出浮层(div) + 遮蔽层 方法一
http://www.w3.org/1999/xhtml" > test .pop-box { z-index: 9999; /*这个数值要足够大,才能够显示在最上层*/ margin-bottom: 3px; display: none;转载 2015-12-16 12:55:58 · 5802 阅读 · 0 评论 -
JQuery 弹出层以及遮罩层,始终显示在屏幕正中间 方法二
上一篇是关于遮罩层的展示: 链接地址为:http://xutao5641745.iteye.com/blog/1310955 样式代码:.model{ position: absolute; z-index: 1003; width:320px; height:320px; text-align:center; back转载 2015-12-16 12:57:41 · 3835 阅读 · 0 评论 -
移动前端开发之viewport的深入理解
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个a转载 2015-12-17 10:57:19 · 480 阅读 · 0 评论 -
手机页面上面 按钮点击的时候有阴影 如何除去
尝试了很多办法,改动label标签为UL li后效果依旧,就是切换有个阴影,后来加了个全局样式解决了 *{ -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */ }原创 2015-11-02 09:58:25 · 7314 阅读 · 0 评论 -
CSS background属性之背景设置详解
CSS background属性之主要背景属性在CSS中,关于background属性,主要有5个相关的背景属性。如下所示:background-color属性:设置背景颜色。background-image属性:设置背景图片。background-repeat属性:是否重复背景图片。background-attachment属性:设置背景图片是否随页面滚动。background-转载 2015-11-18 17:49:07 · 3202 阅读 · 0 评论 -
如何去设计一个自适应的网页设计或HTMl5
如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战!移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768)转载 2015-10-15 14:52:55 · 717 阅读 · 0 评论 -
深入了解css的行高Line Height属性
什么是行间距?古时候我们使用印刷机来出来文字。印刷出来的每个字,都位于独立的一个块中。行间距,即传说中控制两行文字垂直距离的东东。在CSS中,line-height被用来控制行与行之间垂直距离。不过,行间距与半行间距,还是取决于CSS中的line-height。那么,如何来使用line-height呢?默认状态,浏览器使用1.0-1.2 line-height, 这转载 2015-10-15 19:41:48 · 410 阅读 · 0 评论 -
JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 无间断滚动scrollLeft套用模板 #外层div的id值{width:px; height:px; overflow:hidden;border:0px solid #ccc;}/*外层div 宽度为显示宽度*/#内层div的id值{width:px;}/*内层转载 2015-10-30 13:14:11 · 2930 阅读 · 0 评论 -
CSS行高——line-height
初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下。所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识:顶线、中线、基线、底线DOCTYPE html>html> head>转载 2015-10-16 09:33:26 · 512 阅读 · 0 评论 -
CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。 下面讲解 padding和margin常用的用法一、padding1、语法结构(1)padding-left:10px; 左内边距(2)padding-right:10px; 右内转载 2015-10-16 09:42:59 · 375 阅读 · 0 评论 -
图片水平居中
增加margin:0 auto;来使图片水平居中原创 2015-11-17 15:11:16 · 542 阅读 · 0 评论 -
用ul、li标签创建css横向导航菜单示例
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以,为了避免所有的链接都挤在一起,你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔,让这些文字分离开来,不至于混在一起。 现在我们正常的做法是应用ul、li标签把链接作为无序列表(unordered转载 2015-11-17 15:15:46 · 1037 阅读 · 0 评论 -
在aspx包含另一个aspx
//.aspxserver.execute(*.aspx) //.vb|.cs---------------用vs.net开发程式分为 .aspx和(.aspx.vb或.aspx.cs)在.aspx中 在.vb|.cs中 server.execute("*.*")原创 2015-11-17 15:51:46 · 1559 阅读 · 0 评论 -
CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性。在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小。这四个单位哪一种最适合Web? 这个问题引起了广泛的争论。找到一个确定的答案是困难的, 因为这个问题,本身就是如此难以回答。 接触这些单位 1. “Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展示。一个em等于当转载 2015-12-18 14:50:46 · 2117 阅读 · 0 评论 -
-webkit-tap-highlight-color
概述:-webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度转载 2015-12-21 09:23:55 · 581 阅读 · 0 评论 -
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
这篇文章主要介绍了JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法,涉及javascript针对页面元素样式及属性的相关操作技巧,需要的朋友可以参考下:这个是html代码: 下面是js代码: (function () { var id = document.getElementById('search_cont原创 2016-03-04 14:13:11 · 991 阅读 · 0 评论 -
CSS制作表格式按钮
仿照新手理财专题做新发基金专题的筛选的时候学会了用table和tablecell的样式来制作表格样式的图层,其实外面是两个div,里面分左中右来区分样式,css如下: #filter { position: relative; right: 20px; float: right; top:原创 2016-03-30 10:13:56 · 859 阅读 · 0 评论 -
分享朋友圈提示使用app分享功能
这边如果无法使用类似 location.href = "http://ttjj-huodong-weixin-share/";来调用app分享的话,可以使用提供一个图片来导引用户。 .guide{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color:原创 2016-03-31 16:12:15 · 1508 阅读 · 0 评论 -
移动h5自适应布局
问题一,分辨率Resolution适配:不同屏幕宽度,html元素宽高比和字体大小,元素之间的距离自适应,使用rem单位。问题二,单位英寸像素数PPI适配:使用rem单位,文字会发虚。段落文字,使用px单位,用media query或js来适配。标题文字可以直接使用rem单位。问题三,设备像素比例DPR适配:1物理像素在显示效果不合需求。要根据devic转载 2016-04-05 13:08:25 · 1544 阅读 · 0 评论 -
解决position:fix中的固底定位在跳转后返回的抖动
相信不少人做移动端项目的时候都会遇到position:fixed 的坑。下面提供一个解决方法,不用引入任何其他的js库,纯css解决。 解决问题的关键就是:fixed元素内部必须嵌套一个position:absolute元素,用来装载内容,目的就是为了让内容脱离fixed文档流,屏蔽一些fixed的坑。我这边参考的是http://www.bubuko.com/inf原创 2016-03-24 13:26:59 · 3498 阅读 · 0 评论 -
avascript判断图片是否加载完成方法整理
有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相结合进行解释与说明。onload方法通过向img标签添加onload属性,并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元转载 2016-03-24 15:11:28 · 442 阅读 · 0 评论 -
如何使用swiper
大家都知道如何运用swiper,我只是罗列我在做项目时候的流程,当然大家可以去http://www.swiper.com.cn/看具体例子和一些特殊式样。 我这里涉及两个page,测一测和摇一摇,所以这边定义两个div而且带轮播底部。 看看自己适合买基金吗?"> 看看自己适合买基金吗?原创 2016-03-15 13:07:38 · 1526 阅读 · 0 评论 -
手机移动端WEB资源整合
meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />忽略将页面中的数字识别为电话号码 name="format-detect转载 2016-03-25 19:25:38 · 912 阅读 · 0 评论 -
input标签的获得焦点和失去焦点的样式
获得焦点的四周边框:style='border-left:0px;border-top:0px;border-right:0px;border-bottom:1px '失去焦点如果去掉边框只要: outline:none;原创 2016-03-04 13:31:29 · 5793 阅读 · 0 评论 -
CSS中边框使用负边距值的奇技淫巧
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。(It’s like an online taboo—everyone’s doing it, yet no one wants to talk转载 2016-02-18 09:43:25 · 938 阅读 · 0 评论 -
float:right原来是从右到左排列的
原来是从右到左排列的,先上html代码 @ViewBag.Title @*@Html.Partial("ViewSearchwithnav")*@ 红色的两行一个是放大镜,一个是app下载,但是放在前面的先排列在右边。 header .icon .ico原创 2015-12-04 09:58:04 · 4703 阅读 · 0 评论 -
利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值1280分辨率以上(大于1200px)@media screen and (min-width:1200px){ #page{ width: 1100px; }#c转载 2015-12-23 13:14:19 · 1162 阅读 · 0 评论 -
div里面的div垂直居中
转载 2016-02-16 17:32:58 · 312 阅读 · 0 评论 -
CSS3 Animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,今天我们趁着这个热劲继续第三个动画属性Animation的学习,单从Animation字面上的意思,我们就知道是“动画”的意思。但CSS3中的Animation与HTML转载 2016-03-03 14:18:59 · 470 阅读 · 0 评论 -
发觉前一个项目需求很好玩的两个CSS animation
首先js在这里: function addAnimation(argument) { $('.plane-outer').addClass('plane-outer-animation'); $('.plane').addClass('plane-animation'); $('.text').addClass('tex原创 2016-03-03 14:23:47 · 442 阅读 · 0 评论 -
css 如何让背景图片拉伸填充避免重复显示
何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类: 1转载 2016-03-03 15:17:13 · 1981 阅读 · 0 评论 -
扣去ul li中的指定标签里的文字
现在需求越来越变态,但是做代码只能尽量满足,这里先是扣去ul和li中的超链接里的文字 PromptHtml = GetData.GetHTTPInfo(Config.Prompt_Url, "utf-8"); PromptHtml = PromptHtml.Replace("", ""); PromptHtml=Promp原创 2016-02-17 15:34:53 · 1212 阅读 · 0 评论 -
css设置各种中文字体如雅黑、黑体、宋体、楷体等等
复制代码代码如下:.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 说明: 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中转载 2016-02-18 09:23:47 · 29069 阅读 · 0 评论 -
背景文字或者背景图片右对齐
.demo,.demo2{width:300px;height:100px;background:#EEE; position:relative;margin:5px; } .demo h1{position:absolute;right:10px;top:10px;} .demo2{background:#EEE url("http://static.blueidea.com/转载 2015-10-15 09:40:13 · 2736 阅读 · 0 评论