
HTML5.CSS3
文章平均质量分 87
飞向Hadoop
这个作者很懒,什么都没留下…
展开
-
移动端web开发技巧
这是一个最好的时代,因为我们站在潮流中;但也是一个最坏的时代,因为我们站在潮头上。META相关1. 添加到主屏后的标题(IOS) 2. 启用 WebApp 全屏模式(IOS)当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) 3. 百度禁止转码通过百度手机打开网页时,百度可能会对你的网页进转载 2017-05-08 09:31:58 · 1046 阅读 · 0 评论 -
实现frame框架窗口间的关联及超链接的target属性的使用
要实现框架窗口的关联,关键在于设置超链接的"target"目标窗口的属性,如下所示: 您的浏览器无法处理框架!一、为右侧框架窗口添加"name"标识,如下 二、在左侧窗口中,设置"target"属性显示的窗口名,如下: 这样点击就会将right.html的内容显原创 2016-03-07 17:08:09 · 3903 阅读 · 0 评论 -
css3 calc()自适应布局属性
我们想要实现页面自适应布局时,通常因为margin的存在,而比较麻烦;有时候想要实现宽度自适应的输入框时,也因为padding或margin的存在,而相当繁琐,同时由于浏览器兼容性而导致最终效果不一致。css3新添加属性box-sizing,在一定程度上解决了上面的问题,而在今天的文章中我们来通过css3新增加的另外一个属性calc()来实现适应布局。calc()是css3新添转载 2016-03-05 15:37:54 · 652 阅读 · 0 评论 -
html5实现正在加载中样式
css:.sk-fading-circle { width: 40px; height: 40px; position: relative; }.sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0;原创 2016-03-04 10:33:58 · 5699 阅读 · 0 评论 -
webapp font-size解决问题的方案
最近在微博上看到流云诸葛总结的一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》,其中介绍到的几种Web App适配方案,我们现在的做法恰好是跟某招聘网站类似的方案,当然就会有上面我提到的一些问题,最后经过预研和demo测试,我们采取了网易跟淘宝的方案,其实这两者的方案是大同小异,都是基于rem的适配方案。 2、解决问题的方案 网易跟淘宝的方转载 2016-02-18 11:53:52 · 750 阅读 · 0 评论 -
CSS3动画属性animation的基本用法
CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点。animation基本用法是:animation: name keeping-time animate-function delay times iteration final;第一个参数转载 2016-03-03 17:22:22 · 836 阅读 · 0 评论 -
word-break与word-wrap
一、浏览器自带的自动换行各浏览器自身都带有自动换行功能,当浏览器显示文本的时候会让文本在浏览器或者div元素的右端自动换行。换行情况如下:1.non-CJK:会在半角空格或者连字符(-)位置自动换行,不会在长单词的中间换行2.CJK(中日韩):可以在任何一个CJK字体后换行3.CJK中包含non-CJK:non-CJK部分按 non-CJK情况处理进行换行处理4转载 2016-03-03 09:38:53 · 517 阅读 · 0 评论 -
iframe引入百度地图显示企业位置
步骤一:打开下面这个地址:http://api.map.baidu.com/lbsapi/creatmap/index.html 步骤二:定位中心点 在打开的页面左侧,输入企业的详细地址,然后点查找,即可在右侧的地图中显示企业的具体位置。 步骤三:设置地图 主要是设置地图的尺寸大小,其它的按照默认即可,比如我们要调用的地图大小宽度为600像素,高度原创 2015-10-20 15:53:04 · 1102 阅读 · 0 评论 -
随笔分类 - 控件
原文链接:http://www.cnblogs.com/shenliang123/category/372687.html报表开发之iReport的使用摘要: iReport主页:http://community.jaspersoft.com/project/ireport-designeriReport下载页面:http://sourceforge.net/projects/转载 2015-05-22 14:50:14 · 385 阅读 · 0 评论 -
marguee实现最新公告动态轮播效果
最新公告动态轮播效果 测试数据第一条 测试数据第二条 测试数据第三条 测试数据第四条 测试数据第五条 测试数据第六条 测试数据第一条 测试原创 2015-10-08 10:07:30 · 720 阅读 · 0 评论 -
前端web开发的MVC模式 - 从一个简单实例讲起
前端web开发的MVC模式 - 从一个简单实例讲起MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view为发送给客服端的内容;control为servlet程序控制跳转和工作流。随着前端Ajax兴起、前端开发工作进一步划分:js程序员和ue页面制作、另外从整个前端项目的清晰明朗以可扩展性转载 2015-11-18 16:31:08 · 386 阅读 · 0 评论 -
网页制作中完美解决IE兼容模式问题
经测试后完美解决了兼容模式问题,这样设置后IE中设置兼容模式的按钮也会消失,可以按F12打开“开发人员工具”来检查浏览器模式。原创 2015-10-12 15:23:47 · 565 阅读 · 0 评论 -
position:absolute;怎么样随分辨率改变而改变
1.如果要随分辨率大小改变尺寸,把position中的left和top改为百分比,不要设固定像素px具体值2.把菜单容器的父级容器加上position:relative,比如父级 子级 自己测试(各浏览器下)下看看,理解了的话对于定位问题就迎刃而解...(个人倾向于使用第二种方法)原创 2015-10-12 16:44:26 · 2455 阅读 · 0 评论 -
史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况。今天,结合自己的经转载 2015-12-03 14:44:01 · 315 阅读 · 0 评论 -
史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况。今天,结合自己的经转载 2015-12-03 14:47:41 · 377 阅读 · 0 评论 -
用Meta标签代码让360双核浏览器默认极速模式打开网站不是兼容模式
我开发了一个网站,大量采用了html5和css3,希望用户都以webkit内核打开页面,但是测试却发现360的以ie内核打开为推荐模式,不知原因为何。其实360给网站开发者设计了一种选择的方法,只要加入一段Meta标签代码就可以解决。以下信息摘自360官方网站:浏览模式极速模式、兼容模式及IE9高速模式是360浏览器显示网页时使用的三种模式:表示极速模式表示转载 2015-07-25 09:50:45 · 710 阅读 · 0 评论 -
clearfix:after 清除css浮动
在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:TEST DIVCSSBBSTEST DIVTEST DIVTEST DIV运行这段代码,大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因转载 2016-03-31 11:50:40 · 366 阅读 · 0 评论 -
你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。Creative Button Styles转载 2016-03-31 13:35:16 · 2633 阅读 · 0 评论 -
手机端页面自适应解决方案—常见问题
1.问:为啥手机网页效果图宽度是要640或者750的,我非得弄个666的不行咩?答:老实说当然可以,不过为了规范,640或者750是相对合适的。拿Iphone 5s 举例,它的css像素宽度是320px,由于它的dpr=2,所以它的物理像素宽度为320 × 2 = 640px,这也就是为什么,你在5s上截了一张图,在电脑上打开,它的原始宽度是640px的原因。那 iphone 6转载 2017-05-08 09:18:35 · 2262 阅读 · 0 评论 -
移动端一些问题
移动端rem参考配置 html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){h转载 2017-03-17 08:35:35 · 656 阅读 · 0 评论 -
移动设备显示尺寸大全 CSS3媒体查询
@media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}@media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}@media screen and ( min-width: 359px){/*360px显示屏样式 索转载 2017-03-15 16:37:29 · 2428 阅读 · 0 评论 -
icomoon生成字体图标的方法并应用
1.从阿里巴巴矢量图标库(http://www.iconfont.cn/)下载svg格式的小图标2.借助在线生成工具:https://icomoon.io/app/#/select 生成font字体的文件原创 2017-02-25 10:57:32 · 1473 阅读 · 0 评论 -
textarea如何实现高度自适应?
转自:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框。然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时,输入框的转载 2016-12-22 18:20:46 · 607 阅读 · 0 评论 -
解决nth-child(n)属性在IE8浏览器中兼容性问题
因为在项目中用到了nth-child(n)属性,如下所示.level1 span:nth-child(2) { margin-left: 24px !important;}而该属性却在IE8浏览器中出现兼容性问题,后面参考相关资料得知,可以使用以下方式处理在IE8中兼容性.level1>span + span { margin-left: 24px !important原创 2016-07-20 14:35:25 · 5623 阅读 · 0 评论 -
html-中文字体在CSS中的显示(Unicode编码)
在CSS中使用中文字体通常直接设置字体名称,比如设置字体为宋体:font-family:’宋体’。但因此产生的一个问题是,如果CSS编码有误,会导致页面加载后CSS中的中文字体乱码直接使用中文字体,有时候在ie6下会出现样式丢失问题。而使用英文代替中文如:“font-family:SimSun”也不推荐,Firefox的部分版本与Opera在处理SimSun时会有问题。转载 2016-05-06 11:40:52 · 1469 阅读 · 0 评论 -
手机移动端可滚动的导航代码--css解决方案
/*滚动水平导航栏 start*/ .lr_nb{border-bottom:1px solid #E8E8E8;border-top:1px solid #E8E8E8;height:40px;line-height:40px;width:100%;position:absolute;background:#fff;padding: 0px 10px;box-sizing:border-bo原创 2016-05-05 16:25:24 · 9882 阅读 · 3 评论 -
手机页面创建自定义弹出窗
html:css:#popshadow { display: none; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: #000 none原创 2016-01-27 11:30:00 · 1208 阅读 · 0 评论 -
CSS样式层叠权重值
根据CSS规范,具体性越明确的样式规则,权重值越高。计算权重值的依据,并不是许多文章所描述的那样“class是10,标签是1,ID是100”之类——虽然这样在大多数情况下能够得到正确的结果。首先来看一个便于记忆的顺序”important>内联 >ID>类 >标签 |伪类|属性选择 >伪对象 >继承 >通配符”选择器权重值的计算A:如果规则是写在标签的style属性中(内联样转载 2016-05-10 10:23:47 · 456 阅读 · 0 评论 -
css去掉iPhone、iPad默认按钮样式
最近用HTML5写了个手机站,在测试的时候发现在苹果手机上的一个问题。所有的按钮都被了苹果自带的样式给替换了。效果如下: 但是正确的应该是酱紫滴!~ 只要在样式里面加一句去掉css去掉iPhone、iPad的默认按钮样式就可以了!~input[type="button"], input[type="submit"], input[type="转载 2016-04-13 16:24:51 · 405 阅读 · 0 评论 -
垂直居中
.outer{ display:table; height:300px; width: 200px; #position:relative; overflow:hidden; background-color: #ddd; } .middle{转载 2016-04-04 22:29:46 · 334 阅读 · 0 评论 -
移动设备自定义面板切换
js:$(function(){$(".lt_btll input").click(function(){ $(this).addClass("bt_active").siblings().removeClass("bt_active"); var idName = $(this).attr("id"); $("#" + idName + "_" + "con").s原创 2016-03-08 20:23:20 · 492 阅读 · 0 评论 -
使用CSS3的appearance属性改变元素的外观
前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果。大转载 2016-02-23 14:03:32 · 511 阅读 · 0 评论 -
Web开发者不可不知的15条编码原则
1、善用DIV来布局当开发一个Web页面时,要考虑第一件事就是区分页面重点。将这些内容用DIV标签包含起来,页面的代码会呈现出整洁、缩进良好的风格。 2、将HTML标签和CSS样式表分割开来好的页面应该将HTML标签和CSS样式表分割开来。这是每一个Web开发者在首次接触Web开发时就应该知道的一翻译 2015-07-25 09:46:12 · 349 阅读 · 0 评论 -
边线设置为阴影效果
box-shadow: 0px 0px 10px #ddd;原创 2015-08-29 17:05:10 · 485 阅读 · 0 评论 -
CSS overflow 属性
浏览器支持所有主流浏览器都支持 overflow 属性。注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。定义和用法overflow 属性规定当内容溢出元素框时发生的事情。说明这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动原创 2015-05-13 14:55:56 · 364 阅读 · 0 评论 -
css 两个table td表格合并
可以使用:xxxxxx原创 2015-05-27 11:31:06 · 7687 阅读 · 0 评论 -
CSS3 text-shadow 属性
实例基础的文本阴影效果:h1{text-shadow: 5px 5px 5px #FF0000;}h1{text-shadow: 5px 5px 5px #FF0000;}浏览器支持IEFirefoxChromeSafariOpera原创 2015-05-23 09:19:35 · 735 阅读 · 0 评论 -
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。语法:$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。原创 2015-05-29 12:05:56 · 579 阅读 · 0 评论 -
以下DIVCSS5总结了几点用于清除浮动的经验教程
一般情况下可以使用:clear:both;以下DIVCSS5总结了几点用于清除浮动的经验教程1、对父级设置适合CSS高度对父级设置适合高度样式清除浮动,这里对“.divcss5”设置一定高度即可,一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px,这样具体父级高度为102pxCSS代码:.divcss5{ width:40原创 2015-05-22 17:16:07 · 637 阅读 · 0 评论 -
跨平台移动开发实战(三)------HTML5开发环境搭建
跨平台移动开发实际上就是基于HTML5开发软件界面和主要的业务逻辑,因此一套完善的基于移动平台的HTML5开发环境是非常有必要的。这里我主要的关注点是以下四点:Javascript和Jquery mobile的编辑器HTML5的各个元素的InspectorJavascript远程断点debug移动平台Javascript开发模式1)Javascript和Jquery mobile的转载 2015-12-21 10:37:13 · 454 阅读 · 0 评论