显示下一条  |  关闭
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

导航

 
 
 
 
 
 

日志

 
 

· [置顶] css3实现有意思的效果

· [置顶] 实战中关于CSS的总结

· [置顶] javascript实战总结

· HTML5新属性DownLoad简介

· 关于Emmet的使用

· css rem相关

· photoshop安装host设置

· css animation库推荐

· javascript - 闭包

· 网页字体设置- 微软雅黑

· CSS3动画实践集合

· mac下安装使用phpmyadmin

· body的margin和padding

· IE9下浏览bug

· 常用实体代码（EntityCode）

[置顶] css3实现有意思的效果

2012-6-11 16:25:22 阅读169 评论1 112012/06 June11

这些有的是转发的效果，有的是参考其他页面完成的效果，如有涉及“版权”的问题，请各位亲，直接联系我哟~~ 鼠标移到图片上，实现图片的光照效果（纯属自定义） http://jsfiddle.net/hszy00232/VMEgc/

作者  | 2012-6-11 16:25:22 | 阅读(169) |评论(1) | 阅读全文>>

[置顶] 实战中关于CSS的总结

2009-1-5 19:39:43 阅读952 评论10 52009/01 Jan5

1.如果利用<img>标签把图片放进表格单元里面，并注意到在图片下方有不需要的空间，那么设置它的display属性为block.

2.text-align可以被继承，vertical-align属性不会被继承

3.html提供<colgroup>和<col>标签相应地表示列组合和独立的列。

表格中的每个列都包括一个<col>标签，可以用类或ID来识别它们。只有两组属性对这些标签起作用：width和background属性。

<colgroup>

    <col id="brand"/>

    <col id="price"/>

    <col id="power"/>

</colgroup>

4.IE6.0兼容支持透明背景

/* 以前的兼容 */ .transparent_class { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* ie8 */ filter:alpha(opacity=50); /* ie5-7 */ -moz-opacity:0.5; /* old mozilla browser like netscape */

作者  | 2009-1-5 19:39:43 | 阅读(952) |评论(10) | 阅读全文>>

[置顶] javascript实战总结

2010-5-31 16:08:05 阅读528 评论2 312010/05 May31

使用appendChild将<tr>元素直接增加到<table>中，则在IE中这一行并不出现，但在其他浏览器中却会显示出来。对此的解决之道是，将<tr>元素增加到表的<tbody>元素中，这种解决办法在所有浏览器中都能正确工作。 IE不能使用setAttribute正确地设置class属性。对此有一个跨浏览器的解决方法，即同时使用setAttribute("class", "new- ClassName") 和setAttribute("className","newClassName")。 在IE中不能使用setAttribute设置style属性。最能保证浏览器兼容的技术不是<element>.setAttribute("style, "font-weight:bold;")，而是<element>.style.cssText = "font- weight:bold;"。

XHR对象使用时对浏览器的判断

var xmlHTTP;

if(window.XMLHttpRequest){

xmlHTTP=new XMLHttpRequest();

}else{

try{xmlHTTP=new ActiveXObject("MSXML2.XMLHTTP.6.0")}catch(e){}

try{xmlHTTP=new ActiveXObject("MSXML2.XMLHTTP")}catch(e){}

作者  | 2010-5-31 16:08:05 | 阅读(528) |评论(2) | 阅读全文>>

HTML5新属性DownLoad简介

2013-5-3 11:40:55 阅读42 评论0 32013/05 May3

今天看到蒋捷宇的一篇文章是讲html5下载属性，原文地址：http://blog.csdn.net/hfahe/article/details/8877015 。正好项目中也有类似的场景，正好拿来用。^ - ^

HTML5这个DownLoad的属性使用很简单

1. 首先，download属性是专门用在a标签的，并且a标签要设置相应的href属性，指定要下载的链接地址。

<a href="test.mp3" download>下载</a>

浏览点击链接，你就可以把test.mp3文件保存到本地了，文件名称是test.mp3。

2. 这时如果想在下载时指定保存文件的名称，可以通过下面的方式实现

<a href="test.mp3" download="你好.mp3">下载</a>

这时需要注意的是：需要指定文件的类型，如：你不能写在download="你好"，否则下载时会保存成未指定格式的文件。应该写成download="你好.mp3"。

3. 你也可以通过脚本来设置链接的相应download属性

<a href="test.mp3">下载</a> $('a').attr('download','你好.mp3');

作者  | 2013-5-3 11:40:55 | 阅读(42) |评论(0) | 阅读全文>>

关于Emmet的使用

2013-3-29 13:49:34 阅读105 评论0 292013/03 Mar29

来源：http://coding.smashingmagazine.com/2013/03/26/goodbye-zen-coding-hello-emmet/

如果想更改默认模板：

可以在Preferences->Browse Packages..-> Emmet -> emmet -> snippets.json 进行修改

HTML Abbreviations(HTML缩写! or html:5

html:5 or ! for an HTML5 doctype

html:xt for an XHTML transitional doctype

html:4s for an HTML4 strict doctypeEASILY ADD CLASSES, IDS, TEXT AND ATTRIBUTES

p.bar#foo

<p class="bar" id="foo"></p>

h1{foo}

<h1>foo</h1>

a[href=#]

<a href="#"></a>

NESTING

作者  | 2013-3-29 13:49:34 | 阅读(105) |评论(0) | 阅读全文>>

css rem相关

2013-3-25 11:47:47 阅读122 评论1 252013/03 Mar25

rem和em区别：

em：依据最近父元素的font-size值来计算本身的大小

rem：依据root元素的font-size值来计算本身的大小（浏览器支持：IE8+，mobile和平板，chrome，FF等)

vm：1/100th of viewport width.

Demo1:根据不同的链接选择不同的显示文字大小 http://runjs.cn/detail/5sacmcac

Demo2:根据不同的浏览器大小调整页面元素大小 http://runjs.cn/detail/f5lw0mcs

来源：http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/

作者  | 2013-3-25 11:47:47 | 阅读(122) |评论(1) | 阅读全文>>

photoshop安装host设置

2013-3-4 12:29:59 阅读95 评论0 42013/03 Mar4

127.0.0.1 activate.adobe.com

127.0.0.1 practivate.adobe.com

127.0.0.1 ereg.adobe.com

127.0.0.1 activate.wip3.adobe.com

127.0.0.1 wip3.adobe.com

127.0.0.1 3dns-3.adobe.com

127.0.0.1 3dns-2.adobe.com

127.0.0.1 adobe-dns.adobe.com

127.0.0.1 adobe-dns-2.adobe.com

127.0.0.1 adobe-dns-3.adobe.com

127.0.0.1 ereg.wip3.adobe.com

127.0.0.1 activate-sea.adobe.com

127.0.0.1 wwis-dubc1-vip60.adobe.com

127.0.0.1 activate-sjc0.adobe.com

cs5,序列号：

1328-1898-5292-5951-8970-1350

1328-1312-2469-1233-5471-5415

1407-1774-6464-0961-5577-3797   对的！

1325-1558-5864-4422-1094-1126

1325-1958-5864-4422-1094-1178

作者  | 2013-3-4 12:29:59 | 阅读(95) |评论(0) | 阅读全文>>

css animation库推荐

2013-2-21 12:16:27 阅读131 评论0 212013/02 Feb21

github地址：https://github.com/daneden/animate.css/blob/master/animate.css

http://daneden.me/animate

应用案例：

http://jsfiddle.net/hszy00232/3MJAd/

作者  | 2013-2-21 12:16:27 | 阅读(131) |评论(0) | 阅读全文>>

javascript - 闭包

2013-2-18 11:35:19 阅读119 评论0 182013/02 Feb18

在学习javascript过程中，闭包是个很重要的概念，也是不容易说清的一个概念。在这里把自己关于闭包的理解整理下来。

何为闭包

闭包常见的形式，就是一个函数内部创建另一个函数，其中子函数可以访问父函数中定义的变量，传的参数等，而父函数则不能访问子函数其中的这些项。

如：

function parent(propertyname){

alert(obj1); // error

return function(obj1,obj2){

var value1 = obj1[propertyname];

var value2 = obj2[propertyname];

if(value1 < value2){

return -1;

}else if(value1 > value2){

return 1;

}else{

return 0;

}

};

}

在函数parent中包含一个匿名的子函数，在子函数中是可以访问propertyname的值，但是在parent中无法访问子函数中的obj1,obj2。

使用闭包时需要注意

1.闭包只能取得包含函数（即父函数）中变量的最后一个值

function ofun(){

作者  | 2013-2-18 11:35:19 | 阅读(119) |评论(0) | 阅读全文>>

网页字体设置- 微软雅黑

2012-12-26 17:12:18 阅读297 评论2 262012/12 Dec26

网页中我们在设置微软雅黑字体可以使用“Microsoft Yahei”或\5FAE\8F6F\96C5\9ED1;

Windows下各浏览器的效果：

MAC下safari的效果：使用\5FAE\8F6F\96C5\9ED1时MAC safari下不能识别，还是采用系统默认字体

作者  | 2012-12-26 17:12:18 | 阅读(297) |评论(2) | 阅读全文>>

CSS3动画实践集合

2012-12-21 13:45:59 阅读169 评论0 212012/12 Dec21

1.CSS3实现宝丽莱照片墙

来源：http://www.zurb.com/playground/css3-polaroids

效果：http://runjs.cn/detail/tjhnafmo

作者  | 2012-12-21 13:45:59 | 阅读(169) |评论(0) | 阅读全文>>

mac下安装使用phpmyadmin

2012-12-1 19:30:22 阅读301 评论0 12012/12 Dec1

每次使用xampp都因为phpmyadmin纠结半天，今天记录一下备注用；

1.下载安装xampp http://www.apachefriends.org/zh_cn/xampp-macosx.html

2.在终端下执行

sh-3.2# /Applications/XAMPP/xamppfiles/xampp start

Starting XAMPP for Mac OS X 1.7.3...

XAMPP: Starting Apache...ok.

XAMPP: Starting MySQL...ok.

XAMPP: Starting ProFTPD.../Applications/XAMPP/xamppfiles/xampp: line 184: /Applications/XAMPP/xamppfiles//var/proftpd/start.err: No such file or directory

fail.

Contents of "/Applications/XAMPP/xamppfiles//var/proftpd/start.err":

cat: /Applications/XAMPP/xamppfiles//var/proftpd/start.err: No such file or directory

解决这个问题：

在终端输入：

sudo mkdir /Applications/XAMPP/xamppfiles/var/proftpd/

作者  | 2012-12-1 19:30:22 | 阅读(301) |评论(0) | 阅读全文>>

body的margin和padding

2012-11-24 10:58:39 阅读298 评论1 242012/11 Nov24

昨天被同事问到可以设置body的margin吗，当时也没仔细考虑，就直接回答“应该可以吧”，～～对于不确定的事，偶往往这么回答，其实就是没有仔细考虑就轻率的回答别人，这种不负责的惯性该打。早上起来忽然想起这个问题，就简单整理一下。

<!doctype html>

<html>

<head>

<style type="text/css">

*{margin:0;padding:0;}

body{width:100%;margin:100px;}

</style>

</head>

<body>

<h1>1.body是可以添加margin,padding属性，因为浏览器本身就对body设置了这些属性，所以我们在使用时需要重置body的maring,padding为0</h1>

<div style="width:100%;height:200px;background:black;"></div>

<h1>2.body是可以添加margin,padding属性，设置margin,padding的展示效果没有差异，原理上一个是外边距，一个是内边距，其中子元素对于该值没有影响，即浏览器不会出现滚动条</h1>

<div

作者  | 2012-11-24 10:58:39 | 阅读(298) |评论(1) | 阅读全文>>

IE9下浏览bug

2012-11-12 17:04:00 阅读260 评论0 122012/11 Nov12

这种方式浏览时存在下面的问题

1.

2.

试了一下，发现跟字体设置相关，我们在做页面时通常设置为font:12px/1.5 arial,helvetica,sans-serif;如果把,sans-serif去掉就OK了

在网上搜索了一下，得出如下结果：

我们在IE9常常会遇见自己写的DIV CSS网页，文字有时不能垂直居中，究竟IE9 line-height设置文字不能垂直居中原因是什么？

IE9不支持line-height原因：中文ie9不支持英文字体

相信大家在IE9看见自己使用line-height设置垂直居中文字不能垂直居中，这是与你设置字体有关，通常大家习惯设置font-family:Arial, Helvetica, sans-serif;

ie9中line-height失效解决方法：

只需设置好字体，添加个宋体即可解决 如CSS代码font-family:Arial, "宋体",Helvetica, sans-serif;

设置字体时候注意，还需设置大家都默认系统自带字体，如黑体，宋体。

DIVCSS解释：

在中文IE9中不认英文字体，所以IE9找不到设置中文字体，所以对导致字体上下垂直失效。

试了一下改成：font:12px/1.5 arial,“Sim sun”,helvetica,sans-serif;也可以OK

补充：按着font:12px/1.5 arial,“Sim

作者  | 2012-11-12 17:04:00 | 阅读(260) |评论(0) | 阅读全文>>

常用实体代码（EntityCode）

2012-10-26 18:08:01 阅读150 评论0 262012/10 Oct26

来源：http://entitycode.com/

推荐：http://tool.chinaz.com/Tools/HtmlChar.aspx

CharacterEntity NameEntity NumberDescriptionWhy Is This Featured??&copy;&#169;CopyrightAlmost Every Website Uses The CopyrightSymbol|&#124;Vertical BarThe Vertical Bar Symbol Is Used To Separate Menu Items Or Navigation Links·&middot;&#183;Medium List DotSimilar To The Vertical Bar, The Medium List Dot Is Another Option To Separate Menu Items; Personally I Consider It More Stylish↑&uarr;&#8593;Up ArrowThe Up Arrow Can Be Used In The "Back To Top"Link In A Web Page?&euro;&#8364;Euro SymbolWe Often Find Ourselves

作者  | 2012-10-26 18:08:01 | 阅读(150) |评论(0) | 阅读全文>>

查看所有日志>>

 
 
 
 
 
 

关于我

 
 
  冰果

北京市 东城区 天蝎座

 发消息  写留言

 
前端技术：http://hszy00232.blog.163.com/ 前端设计：http://blog.sina.com.cn/hsjs00232 职业：web前端工程师 现居地：北京 My QQ：365246295 Mail:hszy00232@163.com
 
近期心愿能够快速尽其所知,学其所不能,从而完成事情并远超期望。
博客等级加载中...
今日访问加载中...
总访问量加载中...
最后登录加载中...
 
她的网易微博
 
 
 
 
 

天气

 
 
模块内容加载中...
 
 
 
 
 

日志分类

 
 
日志分类列表加载中...
 
 
 
 
 

友情链接

 
 
模块内容加载中...
 
 
 
 
 

网站UED

 
 
模块内容加载中...
 
 
 
 
 

新浪微博

 
 
模块内容加载中...
 
 
 
 
 

最近访客

 
 
列表加载中...
查看更多访客>>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

公司简介 - 联系方法 - 招聘信息 - 客户服务 - 隐私政策 - 博客风格 - 手机博客 - VIP博客 - 订阅此博客

网易公司版权所有 ©1997-2013

网易 
新闻 微博 邮箱 相册 阅读 有道 摄影 爱拍 优惠券 云笔记 闪电邮 手机邮 印像派 网易识字
 
更多
博客 
手机博客 博客搬家 博客VIP服务
 
LiveWriter写博 word写博 邮件写博 短信写博
 
群博客 博客油菜地 博客话题 博客热点 博客圈子 找朋友
发现
小组
风格
 
创建博客 登录  
 加关注