- 博客(30)
- 收藏
- 关注
转载 一种让超大banner图片不拉伸、全屏宽、居中显示的方法
<html><head> <title>Title</title> <style> .bannerbox { width:100%; position:relative; overflow:hidden; height:200...
2018-03-22 15:01:11
1228
转载 移动web 1像素边框
transform: scale(0.5) 实现 推荐相当灵活其实我们刚才列举了那么多例子,无非就是把1px缩放都0.5px的状态下,而0.5px并不是所有都支持,再根据媒体查询设置不同的缩放比例就可以了,那么我们就开始玩儿缩放吧。1.用height:1px的div,然后根据媒体查询设置transform: scaleY(0.5);,div{ height:1px;
2017-08-16 13:23:35
351
转载 UI设计切图规范指南
设计切图的原则设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中,首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求。其次,切图输出应该尽可能降低工程师的开发工作量,避免因切图输出而导致不必要的工作量。最后,输出的切图应当尽可能的压缩大小,以降低APP的总大小,提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和压缩大小。1
2017-07-28 09:35:43
946
转载 为什么375×667是移动端原型的最佳分辨率
部分PM在设计移动端产品的时候,往往是随意画了个原型尺寸或者上网找个模板套进去,当然也有部分知道用375x667比较好,但是不知其所以然。接下来我来讲清楚为什么以及前世今生。一、原型尺寸的历史既然是设计移动端原型,理论上来说最佳的原型尺寸最好是和你的目标用户手机尺寸保持完全一致。好比iPhone刚出来的时候,设计iOS APP原型使用iPhone自身分辨率320x4
2017-07-28 09:20:00
4102
转载 移动端web及app设计尺寸
移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点:首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×
2017-07-27 22:48:16
32094
2
转载 网页自动识别移动端js,百度的,感觉挺好用的,兼容比较广
在做好手机站后,如何让网页自动识别移动端并作出跳转,这是个问题。现在各种移动设备太多了,要想全部涵盖挺麻烦的。其实这些问题各大网络平台早已考虑好了,这里就借用百度平台的js识别移动端,感觉还不错,兼容的设备挺广的。在pc主页面标签里添加代码[html] view plain copyscript src="http://siteapp
2017-07-12 15:03:40
239
转载 CSS布局技巧之--各种居中
居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1. 把margin设为auto具体来说就是把要居中的元素的margin-left和m
2017-01-11 15:18:41
248
转载 移动前端开发之viewport的深入理解
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个a
2017-01-11 15:16:52
268
转载 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式
使用 iPhone 浏览器去浏览网页,按钮显示超大圆角的样式,自己定义 border-radius也不起作用, webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式。input {-webkit-appearance:none; /*去除input默认样式*/}
2016-11-17 15:11:08
332
转载 @media scree 手机移动端屏幕自适应
@media scree 手机移动端屏幕自适应加入 @media screen and (min-width:1200px){}@media screen and (min-width: 960px) and (max-width: 1199px) {}@media screen and (min-width: 768px) and (max-width: 9
2016-11-17 15:01:48
2921
转载 跨浏览器的placeholder-jQuery版(jQuery插件EnPlaceholder) 兼容ie8浏览器
案例:整搜索框,需要默认占位符为“请输入关键词”,获取焦点时,占位符消失或不可用(不影响正常输入),丢失焦点后,若用户无内容输入,占位符继续出现,继续占位。这种代码我想前端们已经很容易就写出来了吧,现在HTML5原生就有这个“placeholder”属性,效果与上边案例描述的一样(各支持的浏览器内部表现可能不一致,但是作用是一致的),那么这一属性该怎么优雅降级到支持所有现代浏览器呢?答案还是脚本即
2016-08-29 10:31:28
1210
原创 当div属性有 position: fixed 属性时,flash文件显示在最顶层遮挡div层级解决方法
当div属性有 position: fixed 属性时,flash文件显示在最顶层遮挡div层级解决方法 同时加才有效果
2015-10-23 17:03:31
2606
转载 jQuery搜索子元素的方法教程
1. children()方法用于获取一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,语法格式如下:代码如下:children([selector])$("#menu_ul").children().css("color", "blue");2. find()方法用于从每个匹配元素中查找符合指定选择器表达式的后代元素,格
2015-10-20 15:54:00
527
转载 jQuery搜索同辈元素方法
1. next()方法用于搜索紧跟在每个匹配元素之后的单个同辈元素,根据需要还可以指定一个选择器对同辈元素进行筛选,语法格式如下:代码如下:next([selector])$("p").next("p").css("color", "#FCF");2. nextAll()方法用于搜索紧跟在每个匹配元素之后的所有同辈元素,根据需要还可以指定一个
2015-10-20 15:53:02
1325
转载 Jquery搜索父元素操作方法
1. parents()方法格式:代码如下:parents([selector])用于获取当前匹配元素集合中每个元素的祖先元素,根据需要还可以使用一个选择器进行筛选。如:代码如下:$("p").parents().css("border", "1px solid blue);2. cloest方法格式:代码如下:
2015-10-20 15:52:06
501
转载 jQuery内容过滤选择器
1. :contains()选择器用于选择包含给定文本的所有元素,格式:代码如下:$("selector1:contains(text)")如:代码如下:$("p:contains('text')").css("background", "#FCF");2. :has()选择器用于筛选含有给定子元素的元素,格式:
2015-10-20 15:50:51
293
转载 jQuery子属性过滤选择器
1. :first-child选择器用于选择其父级的第一个子元素的所有元素,格式:代码如下:$("selector:first-child")如:代码如下:$("ul:first-child").css("text-decoration", "underline").css("color", "blue");2. :last-
2015-10-20 15:50:06
415
转载 jQuery过滤选择器
1. :first选择器格式:代码如下:$("selector: first")用于对当前jQuery集合进行过滤并选择出第一个匹配元素实例:代码如下:$("td:first").css("border", "2px solid blue");2. :last选择器格式:代码如下:$("select
2015-10-20 15:46:52
313
转载 jQuery层级选择器
1. 子元素选择器用于查找在给定的父元素下查找 这个父元素下的所有子元素,语法格式:代码如下:$("parent->chilid");2. 后代元素选择器用于在给定的祖先元素下匹配所有的后代元素,语法格式:代码如下:$("ancestor descendant");3. 紧邻同辈元素选择器用于匹配所有紧邻在pr
2015-10-20 15:44:32
367
转载 DIV自动适应屏幕高度的方法
无标题页 window.onload=function () { function setheight() { var sidebar=document.getElementById('myDIV'); sidebar.style.height=document.documentElement.clientHeight-65+'p
2015-10-16 14:41:45
675
转载 清除浮动
清除浮动 .clearfix:before, .container:after { content: “”; display: table; } .clearfix:after { clear: both; } /* IE 6/7 */ .clearfix { zoom: 1; }
2015-04-01 16:55:12
235
转载 Table固定宽度
1.可以设置style中的“table-layout”为“fixed” 和“word-break”为“break-all” TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest 2.如果要求不要换行,则只能隐藏一部分内容了,设置table的
2015-04-01 16:54:39
450
转载 html页面嵌入flash 下拉菜单显示在底层被flash挡住问题
注:要加上allowscriptaccess=”always” allowfullscreen=”true” wmode=”transparent” 问题解决 设置embed的透明度
2015-04-01 16:53:47
512
转载 [转]数字及英文字之间如果没有空格,不换行问题
原因: 数字及英文字之间如果没有空格,系统认为这是一个单词,就不会自动换行。 解决方法: 在样式中增加word-break:break-all , style属性中的语法 break-all: 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任 意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 相关语法: Html代码 word-break : norma
2015-04-01 16:48:56
736
转载 [转]容易被忽略的html标签之——<fieldset>
在实际制作网页中,我们有时会要这样的效果: 或许我们可以通过图片实现,但是在html中有一个标签会很轻松的帮我们实现,他就是标签。HTML元素 fieldset方框Draws a box around the text and other elements that the field set contains. 在字段集包含的文本和其它元素外面画一个方框。fieldset元素用于对表单中的元
2015-04-01 16:46:24
2092
转载 [转]css中position:fixed实现div居中
上下左右 居中 代码如下复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可 如果
2015-04-01 16:44:51
521
原创 欢迎使用CSDN-markdown编辑器
自定义li图标样式利用background-image .zc_movie_con li{ line-height:28px; background:url(../images/orange_li_style.png ) no-repeat left center; padding-left:10px;
2015-04-01 16:43:13
293
原创 html 标签匹配检测/检验---------tidy
html 标签匹配检测/检验---------tidy第一种方法:在线工具地址:http://infohound.net/tidy/tidy.pl把.html文件上传后点击“tidy”按钮第二种方法:以桌面的方式检测 工具说明地址:http://west-penwith.org.uk/misc/tidy.html下载t
2015-04-01 16:39:40
1396
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人