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 ······
阅读全文

JS和CSS优化工具Minify

Minify 是一个 PHP5 的应用,可让网站更加符合 Yahoo 的:Rules for High Performance Web Sites.  Minify可以按需对JavaScript以及CSS文件进行合并、压缩以及缓存,以加快页面的载入速度。安装minify极其简单,只需在网站根 ······
阅读全文

页面字体度量单位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是根据根元素的字体大小 ······
阅读全文

bootstrap使用

简单使用教程:http://www.minwt.com/html/9966.html ie8兼容问题: 必须声明html5的Doctype头 meta标签使用可用的ie内核最高版本渲染 指定双核浏 ······
阅读全文

响应式页面布局,css3,加载不同尺寸对应样式表

意思是当屏幕的宽度大于600小于800时,应用styleB.css 另一种方式,即是直接写在标签里: @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ .class { backgrou ······
阅读全文

手机端CSS Sprite图标定位

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

让IE6/7/8支持CSS伪元素:before与:after

网上资料中说IE8不支持CSS伪元素(:before)和(:after),不过在我刚刚测试过的IE8中都支持该元素,无可否的是IE6/7是不支持的。 与伪元素结合使用的content属性:IE8及以上支持,须声明 以下是本人的测试代码: ······
阅读全文

css3 描边无缝衔接图片背景

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

css3 基本使用

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

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增加一些编程的特性,无需考虑 ······
阅读全文

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;来隐藏默认的上传图片按钮效果。  ······
阅读全文

css写形状

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

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

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

让IE6/7支持css的inline-block属性

IE6和IE7不支持行内块级属性display:inline-block; 可以先让块元素变为内联,再使用(zoom:1 或float属性等)触发块元素layout: display: inline-block; _zoom:1; *display: inline; ······
阅读全文

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: ······
阅读全文

table中关于ie8 兼容

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

弹出层&&背景半透明

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

网页元素间距离、文档高度、宽度

网页元素间距离解析(原生与jQuery):注:整个文档的根是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。 body是子节点,要访问到body标签,在脚本中应该写:document.body。 $(document).ready(fn): ······
阅读全文

文字/单词换行

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;设置字体时候注意 ······
阅读全文

浏览器模式

浏览器模式:切换文本/档模式: 改变浏览器渲染引擎(js/css)默认情况下,IE8的浏览器模式为IE8。用户可以通过单击地址栏旁边的兼容性视图按钮( )来手动切换到不同的浏览器模式。在IE8中,IE8兼容性视图会以IE7文档模式来显示网页,同时会向服务器发送IE7的用户代理字符串。“文档模式”用于 ······
阅读全文

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

需求:在一个容器内,左侧宽度给固定值,右侧占满剩余空间。解决:左侧使用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: ······
阅读全文

块级元素&行内元素

块级元素和行内元素都是html规范中的概念。 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。 span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。 行内元素通过设置css属性可以转为块级框,即可设置高 ······
阅读全文

CSS中的三种定位机制

CSS 的可视化格式模型 (Visual Formatting Model) 中有控制元素的布局的定位方案。该方案共有三种。 CSS中有三种定位机制,来控制元素显示位置布局方式。三种定位机制分别为:普通流(默认为普通流)、浮动、绝对定位。 普通流(normal flow) ······
阅读全文

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 ······
阅读全文

点击文本标记(不选圆按钮radio),可以触发相关控件

点文字即可选中,按钮时选中状态 男人  女人 ······
阅读全文

样式重置

/* 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: ······
阅读全文