SS'Blog - SS'Blog

PHP THAT DOESN'T HURT. CODE HAPPY & ENJOY THE FRESH AIR.

HAPPY NEW YEAR !

Laravel
StudyScript.com

@font-face 字体图标

@font-face语句是css中的一个功能模块,用于实现网页字体多样性的模块(设计者可随意指定字体,不需要考虑浏览者电脑上是否安装)。而由于网页中使用的字体类型,也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类:TrueType、Embedded Open Type 、Ope ······
阅读全文

页面字体度量单位rem、em、px

rem的计算是基于根元素(root element,html)的字体大小(注: IE6/7/8/9...等谷歌、火狐浏览器根元素默认的 font-size 都是 16px)。设置字体时只需考虑根元素html字体大小来设置当前字体,例:html{ font-size:62.5%;//浏览器默认为16 ······
阅读全文

移动端前端

附注:设计稿640px宽,高不限制~京东移动端参考 body的class为.mhome {   padding: 0;   min-width: 300px;   max-width: 640px;   margin: 0 auto; }淘宝移动端参考宽度是em,em是根据根元素的字体大小 ······
阅读全文

手机端CSS Sprite图标定位

在手机端我都很少用雪碧图合并定位图标,用的比较多就是用字体图标来代替,有些图标不多的时候就自己单个的切出来控制了。看了下携程的手机端的网站这些图标是用了雪碧图来合并的,因为一直以来手机端的屏幕大小不一,所以通常都会把设计图等比例缩放的形式展现,百分比的方式来布局,达到自适应。下面我们就来说说这个携程 ······
阅读全文

css3 描边无缝衔接图片背景

容器四边为border图片做背景,如下效果图:无缝衔接图片border_bg.png:无缝衔接背景图psd下载:无缝衔接border背景.zipcss3:border:4px solid transparent; border-image: url(images/border_bg.png) 10 ······
阅读全文

瀑布流思路与源码

瀑布流:          Jquery瀑布流布局              body, ul, li, h3 {             margin: 0;             padding: 0;             list-style: none;     ······
阅读全文

css3 基本使用

px是相对与显示器分辨率:屏幕1366px*768px,字体设置12px. 因此用px来定义字体,就无法用浏览器字体放大的功能。 em是相对当前对象内文本的尺寸,任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px;未调整的0.75em=12px (12px/16px) ······
阅读全文

js控制把元素放在屏幕中心,可视屏幕区域中元素居中

如何把一个元素放在屏幕的中心位置:jQuery.fn.center = function () {     this.css('position','absolute');     this.css('top', ( $(window).heigh ······
阅读全文

css3基本效果实例

css3加载动画,圆圈动画效果                      #preloader-1{ position: relative;}         #preloader-1 span{position: absolute;  border:8px solid #fff ······
阅读全文

清除浮动

推荐清除浮动代码:   .clearfix:after {content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;  }   /*“\0020”空格,unicode的16进制表示*/ .clearf ······
阅读全文

sass compress

安装:~~新文件使用:http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.htmlCSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。 CSS预处理器为CSS增加一些编程的特性,无需考虑 ······
阅读全文

移动WEB前端开发资源整合

1.视窗宽度其中 width=device-width 是设置视窗宽度为设备视窗宽度,还可以固定宽度,例如: width=640 则是640px的宽度(常见于微信);initial-scale=1.0 :设置缩放比例为1.0;minimum-scale=1.0 和 maximum-scale=1.0 ······
阅读全文

Media媒体查询支持参数参考

width:浏览器可视宽度。 height:浏览器可视高度。 device-width:设备屏幕的宽度。 device-height:设备屏幕的高度。 orientation:检测设备目前处于横向还是纵向状态。 aspect-ratio:检测浏览器可视宽度和高度的比例。 ······
阅读全文

IE8、7、6圆角图形生成—VML

淘宝IE8浏览器下(不支持css3浏览器)圆角生成代码示例: 搜索发现该圆角由VML生成,VML详细介绍 ······
阅读全文

自定义 上传文件 按钮样式

input的type是file时,hidden属性在IE中不起作用,可用display:none;来隐藏默认的上传图片按钮效果。  ······
阅读全文

调试面板设置table的td宽度等不起作用

由于table的渲染机制,所以调试面板修改样式,视图中并不能展示修改的. 要重新加载才可以! 即去改变文件样式,而不是在调试面板改,之后重新加载 ······
阅读全文

css写形状

纯css写几何形状,不在用图片,css即可写出一般的形状。 三角形 Document .popup_triangle { width: 400px; posi ······
阅读全文

DOM操作,代码优化

文档对象模型(DOM)是一个独立于特定语言的应用程序接口。在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得DOM成为了JavaScript中重要的组成部分。在富客户端网页应用中,界面上UI的更改都是通过DOM操作实现的,并不是通 ······
阅读全文

google谷歌浏览器中td宽度不起作用解决办法

若要google谷歌浏览器中所有td宽超出屏幕需加:table-layout:fixed; word-break:break-all; word-wrap:break-word; width:100%;否则设置td宽度不起作用  table td{width: 600px;}      ······
阅读全文

IE6、7、8兼容到IE9,IE6、7、8支持css3

支持圆角  http://www.divcss5.com/css-texiao/texiao571.shtml   css3pie支持css3新属性:http://css3pie.com/ HTML5 Shiv 支持html5新标签:http://html5shiv.googlecode ······
阅读全文

iFrame自适应高度,透明,默认高度等属性操作

                                       iFrame现在用较多: 用iframe去模拟一些特效。例如我现在要求当前页面执行某个操作,而操作后肯定要有一个跳转的动作。 但是一旦跳转,原始页面就没了,这个时候可以让iframe内部做跳转,这样页面不动,而执行的内 ······
阅读全文

div+css常见

空div默认是有高度的,去除div默认高度---font-size:0; 清除浮动: .clearfix{ display:block;} .clearfix:after{     clear:both;content:".";display:block;height:0;visibility: ······
阅读全文

获取盒子模型里面的值(padding/margin/…)

后跟属性值是设置其值,不跟则返回它的值: 联想:height()、css('padding-top')、offset()…… var $img = $('img'); var paddT = $img.css('padding-top') + & ······
阅读全文

table中关于ie8 兼容

IE8与其他浏览器不同处:tr默认分配table/tbody的高度:当有一个tr时,tr高度为table/tbody的高度 ; 当两个tr时,评分table/tbody高度; 所以:table/tbody高度不能设置死,可以设置max-height给table设置滚动条:table设置高度,超出后不 ······
阅读全文

自定义滚动条

一下火狐不支持,仅google浏览器支持,其它浏览器令设 div { width: 200px; height: 200px; overflow: auto; border: 1px solid #007aff; }  ::-webkit-scrollbar { width: 14px; heig ······
阅读全文

弹出层&&背景半透明

通过rgba模式设置透明度标签内内容文本节点不透明(兼容IE各版本浏览器与谷歌火狐等主流浏览器):.test{             position: fixed;             width: 100%;             height: 500px;           ······
阅读全文

class标签操作

原生JavaScript来操作DOM(文档对象)js通过class名称获取DOM对象html部分:按钮 按钮02     111111111     111111111     111111111 给获取到的标签添加class名称://onclick事件,给id为lala的id添加cl ······
阅读全文

文字/单词换行

word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行。 它们的区别就在于:word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratul ······
阅读全文

css打印设置

一、添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: 用于打印的css:2. import方式:       @import url("css/printstylesheet.css") print;  3. 直接把屏幕显示样式和打印样式写在一个cs ······
阅读全文

IE9 字体不居中

在IE9看见自己使用line-height设置垂直居中文字不能垂直居中,这是与你设置字体有关,通常大家习惯设置font-family:Arial, Helvetica, sans-serif;font-family:Arial, "宋体",Helvetica, sans-serif;设置字体时候注意 ······
阅读全文

左侧固定,右侧占满剩余空间

需求:在一个容器内,左侧宽度给固定值,右侧占满剩余空间。解决:左侧使用float:left;左浮动,右侧使用块级元素(宽度缺省是它容器减去设置固定兄弟节点宽度,容器剩余宽度的100%)并设置overflow:hidden;延伸阅读:块级元素&行内元素深度解析 overflow:hidden属性 ······
阅读全文

ie8等统一自定义input按钮样式

样式部分(需继续调整)body{ font-size:14px;}input{ vertical-align:middle; margin:0; padding:0}.file-box{ position:relative;width:340px}.txt{ height:22px; border: ······
阅读全文

css2通过border-width和border-color写三角形

效果图如下: 样式: .popup {             width: 400px;             position: absolute;             background: #ccc;             margin: 50px;         } ······
阅读全文

div+css命名规范

(二)注释的写法:   /* Footer */   内容区   /* End Footer */   (三)id的命名:   (1)页面结构   容器: container   页头:header   内容:content/container   页面主体:main   页尾: ······
阅读全文

JS中的CSS Style属性标签对照表

盒子标签和属性对照css语法 (不区分大小写) JavaScript语法 (区分大小写)border                                                                                                     ······
阅读全文

CSS伪类---待更新

:active向被激活的元素添加样式。focus向拥有键盘输入焦点的元素添加样式。hover当鼠标悬浮在元素上方时,向元素添加样式。link向未被访问的链接添加样式。visited向已被访问的链接添加样式。first-child向元素的第一个子元素添加样式。lang向带有指定 lang 属性的元素添 ······
阅读全文

返回顶部

                                       ie6?---------> http://www.cnblogs.com/yukaizhao/archive/2012/12/02/js-go-top-function.html兼容IE6版本:-------->http ······
阅读全文

样式表-公共

/* global-公共样式 */body{font-size:12px; font-family:"宋体", arial;line-height:180%;margin:0;padding:0;color:#303030;}  body,ul,ol,li,p,h1,h2,h3,h4,h5,h6, ······
阅读全文

字体

LION终端的默认字体就是helvetica,Helvetica Neue在MAC里也有 苹果默认的中文字体是“华文黑体”  Windows自带字体 新細明體:PMingLiU 細明體:MingLiU 標楷體:DFKai-SB 黑体:SimHei 宋体:SimSun 新宋体:NSi ······
阅读全文

css Reset样式重置/样式初始化设置

无衬线字体字体(win7/mac):font-family:arial,helvetica,clean,sans-serif;01:body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,bl ······
阅读全文

CSS sprites 图片精灵

工具1:http://www.cn.spritegen.website-performance.org/工具2:http://spritegen.website-performance.org/oldsites/spritegen/htdocs/使用tips:CSS Prefix (optional ······
阅读全文

样式重置

/* CSS Document */ * { outline:none; margin:0; padding:0;} html { overflow-y:scroll;-webkit-text-size-adjust:none;} ul {list-style:none outside; /* 清除 ······
阅读全文

浏览器中图片下默认间距

浏览器默认情况下,图片下会有间距空白,处理方法:将img定义为display:block定义父容器为font-size:0推荐使用vertical-align的方式,它的值可以是text-top | text-bottom | middle等 ······
阅读全文

图片始终居中不拉伸不变小

img标签图片始终剧中切不拉伸,根据屏幕变小逐步隐藏两边:     Title              .bannerbox {             width:100%;             position:relative;             overflow: ······
阅读全文

table布局

合并相邻border border-collapse:collapsetable的td合并: colspan是横向合并;rowspan是纵向合并。 例子:colspan="3"---->合并横向相邻的3个 例子:rowspan="3"---->合并纵向相邻的3个 ······
阅读全文

input-checked 全选/取消全选思路

点击全选input元素,判断其checked属性值(true/false), 根据其状态改变其它input的checked状态, 注:checked=“checked”等价于checked=“true”----(只有两种状态--有或无) 语法:$( all ).click(function(){  ······
阅读全文