自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(30)
  • 收藏
  • 关注

转载 一种让超大banner图片不拉伸、全屏宽、居中显示的方法

<html><head> <title>Title</title> <style> .bannerbox { width:100%; position:relative; overflow:hidden; height:200...

2018-03-22 15:01:11 1141

转载 移动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 294

转载 UI设计切图规范指南

设计切图的原则设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中,首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求。其次,切图输出应该尽可能降低工程师的开发工作量,避免因切图输出而导致不必要的工作量。最后,输出的切图应当尽可能的压缩大小,以降低APP的总大小,提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和压缩大小。1

2017-07-28 09:35:43 755

转载 为什么375×667是移动端原型的最佳分辨率

部分PM在设计移动端产品的时候,往往是随意画了个原型尺寸或者上网找个模板套进去,当然也有部分知道用375x667比较好,但是不知其所以然。接下来我来讲清楚为什么以及前世今生。一、原型尺寸的历史既然是设计移动端原型,理论上来说最佳的原型尺寸最好是和你的目标用户手机尺寸保持完全一致。好比iPhone刚出来的时候,设计iOS APP原型使用iPhone自身分辨率320x4

2017-07-28 09:20:00 3644

转载 移动端web及app设计尺寸

移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点:首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×

2017-07-27 22:48:16 31974 2

转载 网页自动识别移动端js,百度的,感觉挺好用的,兼容比较广

在做好手机站后,如何让网页自动识别移动端并作出跳转,这是个问题。现在各种移动设备太多了,要想全部涵盖挺麻烦的。其实这些问题各大网络平台早已考虑好了,这里就借用百度平台的js识别移动端,感觉还不错,兼容的设备挺广的。在pc主页面标签里添加代码[html] view plain copyscript src="http://siteapp

2017-07-12 15:03:40 211

转载 CSS布局技巧之--各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1. 把margin设为auto具体来说就是把要居中的元素的margin-left和m

2017-01-11 15:18:41 217

转载 移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个a

2017-01-11 15:16:52 230

转载 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式

使用 iPhone 浏览器去浏览网页,按钮显示超大圆角的样式,自己定义 border-radius也不起作用, webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式。input {-webkit-appearance:none; /*去除input默认样式*/}

2016-11-17 15:11:08 285

转载 @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 2816 1

转载 跨浏览器的placeholder-jQuery版(jQuery插件EnPlaceholder) 兼容ie8浏览器

案例:整搜索框,需要默认占位符为“请输入关键词”,获取焦点时,占位符消失或不可用(不影响正常输入),丢失焦点后,若用户无内容输入,占位符继续出现,继续占位。这种代码我想前端们已经很容易就写出来了吧,现在HTML5原生就有这个“placeholder”属性,效果与上边案例描述的一样(各支持的浏览器内部表现可能不一致,但是作用是一致的),那么这一属性该怎么优雅降级到支持所有现代浏览器呢?答案还是脚本即

2016-08-29 10:31:28 1172

原创 当div属性有 position: fixed 属性时,flash文件显示在最顶层遮挡div层级解决方法

当div属性有 position: fixed 属性时,flash文件显示在最顶层遮挡div层级解决方法 同时加才有效果

2015-10-23 17:03:31 2547

转载 jQuery搜索子元素的方法教程

1. children()方法用于获取一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,语法格式如下:代码如下:children([selector])$("#menu_ul").children().css("color", "blue");2. find()方法用于从每个匹配元素中查找符合指定选择器表达式的后代元素,格

2015-10-20 15:54:00 464

转载 jQuery搜索同辈元素方法

1. next()方法用于搜索紧跟在每个匹配元素之后的单个同辈元素,根据需要还可以指定一个选择器对同辈元素进行筛选,语法格式如下:代码如下:next([selector])$("p").next("p").css("color", "#FCF");2. nextAll()方法用于搜索紧跟在每个匹配元素之后的所有同辈元素,根据需要还可以指定一个

2015-10-20 15:53:02 1246

转载 Jquery搜索父元素操作方法

1. parents()方法格式:代码如下:parents([selector])用于获取当前匹配元素集合中每个元素的祖先元素,根据需要还可以使用一个选择器进行筛选。如:代码如下:$("p").parents().css("border", "1px solid blue);2. cloest方法格式:代码如下:

2015-10-20 15:52:06 400

转载 jQuery内容过滤选择器

1. :contains()选择器用于选择包含给定文本的所有元素,格式:代码如下:$("selector1:contains(text)")如:代码如下:$("p:contains('text')").css("background", "#FCF");2. :has()选择器用于筛选含有给定子元素的元素,格式:

2015-10-20 15:50:51 263

转载 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 367

转载 jQuery过滤选择器

1. :first选择器格式:代码如下:$("selector: first")用于对当前jQuery集合进行过滤并选择出第一个匹配元素实例:代码如下:$("td:first").css("border", "2px solid blue");2. :last选择器格式:代码如下:$("select

2015-10-20 15:46:52 280

转载 jQuery层级选择器

1. 子元素选择器用于查找在给定的父元素下查找 这个父元素下的所有子元素,语法格式:代码如下:$("parent->chilid");2. 后代元素选择器用于在给定的祖先元素下匹配所有的后代元素,语法格式:代码如下:$("ancestor descendant");3. 紧邻同辈元素选择器用于匹配所有紧邻在pr

2015-10-20 15:44:32 323

转载 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 616

转载 清除浮动

清除浮动 .clearfix:before, .container:after { content: “”; display: table; } .clearfix:after { clear: both; } /* IE 6/7 */ .clearfix { zoom: 1; }

2015-04-01 16:55:12 220

转载 Table固定宽度

1.可以设置style中的“table-layout”为“fixed” 和“word-break”为“break-all” TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest 2.如果要求不要换行,则只能隐藏一部分内容了,设置table的

2015-04-01 16:54:39 369

转载 html页面嵌入flash 下拉菜单显示在底层被flash挡住问题

注:要加上allowscriptaccess=”always” allowfullscreen=”true” wmode=”transparent” 问题解决 设置embed的透明度

2015-04-01 16:53:47 466

原创 【css规范】正文页图片居中css样式代码

参考例子: css样式:

2015-04-01 16:51:50 333

转载 [转]数字及英文字之间如果没有空格,不换行问题

原因: 数字及英文字之间如果没有空格,系统认为这是一个单词,就不会自动换行。 解决方法: 在样式中增加word-break:break-all , style属性中的语法 break-all: 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任  意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 相关语法: Html代码   word-break  :  norma

2015-04-01 16:48:56 646

原创 my dreamweaver html代码颜色设置

my dreamweaver html代码颜色设置

2015-04-01 16:47:43 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 1992

转载 [转]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 483

原创 欢迎使用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 264

原创 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 1269

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除