7月
13
2011

ZZ 常用CSS缩写语法总结

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。

css缩写的主要规则如下:

颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:

  • #000000可以缩写为#000;
  • #336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

  • property:value1; 表示所有边都是一个值value1;
  • property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  • property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  • property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下:

  • border-width:1px;
  • border-style:solid;
  • border-color:#000;

可以缩写为一句:border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下:

  • background-color:#f00;
  • background-image:url(background.gif);
  • background-repeat:no-repeat;
  • background-attachment:fixed;
  • background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

  • color: transparent
  • image: none
  • repeat: repeat
  • attachment: scroll
  • position: 0% 0%

字体(fonts)

字体的属性如下:

  • font-style:italic;
  • font-variant:small-caps;
  • font-weight:bold;
  • font-size:1em;
  • line-height:140%;
  • font-family:”Lucida Grande”,sans-serif;

可以缩写为一句:font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

  • list-style-type:square;
  • list-style-position:inside;
  • list-style-image:url(image.gif);

可以缩写为一句:list-style:square inside url(image.gif);

转自:随网之舞

7月
13
2011

爆笑东北话 打架叫人

实在太搞了,必须贴一下

7月
12
2011

Photoshop无法拷贝文字的解决办法

Photoshop的某些版本,(我用的是CS2精简版),会有无法从psd中拷贝文件出来的问题,

具体现象是,选中文字图层中文字,按Ctrl+c或者右键->拷贝的时候,文字选中被取消,剪贴板中是空的。

问题出在ACE.dll上面了,某些版本的ACE.dll有问题

 

我用Everything搜索了一下本地,ACE.dll还挺多,包括Dreamweaver CS4 Photoshop CS2 CS5 Flash CS5等等,总之Adobe的软件目录下都会有,备份不好用的ACE.dll,从其他地方拷贝过来一个大小不一样的,重启Photoshop,应该就可以了

我就是拷贝的Dreamweaver CS4的

假如没有其他Adobe的软件,可以在这里下载ACE.dll

7月
12
2011

ZZ DIV布局常见错误汇总

在2003年开始接触网页设计,一直到今年十一才开始深入学习DIV布局模式。在这个需要转变思维的过程中,使用DIV布局时还带有不少操作表格时的思想和习惯,以至于出了不少的错误,在此把容易出错的一些细节整理出来,希望对初学的朋友能有所帮助。

1.最常见的DIV嵌套错误

因为xhtml 语法比较严格,诸如Firefox 之类的浏览器如果检查发现Xhtml里面有语法错误,那页面是不能正常显示的。刚刚开始学习DIV布局的时候经常会弄错DIV的嵌套关系。我们可以用Dreamweaver的验证功能检查一下有无这方面的错误。

2.由于粗心造成的标点错误
开始一味追求速度,在标点方面不太注意,到最后发现有些属性不起作用。最容易出错的例如:
正确:class=” “,错误:class=“ ”(标点的中英文切换)
正确:font-size: 12px;,错误:font-size: 12px;(标点的中英文切换)
正确:text-decoration: underline;,错误:text_decoration: underline;(是中划线而非下划线)
正确:img {border: 0;}错误:img {border: 0; (注意后边的”}”符号)
正确:<br /><img /><hr />错误:<br><img><hr>(这个错误只是个不好的习惯,不符合标准的写法,这种单标签一定要闭合) (更多…)

7月
12
2011

ZZ符合标准的表单设计

下午客户让我给他们帮忙设计一个客户反馈表,我找到了以前做的源码想直接发过去,打开源码后无意间看了一下之前写的一些表单结构和语法,发现好多都不符合WEB标准,于是就想写一下关于表单标准的设计思路。

  1. 使用fieldset和legend标签
    在form中,我们经常会对form中的信息进行分组,比如注册form,我们可能会将注册信息分组成基本信息(一般为必填),详细信息(一般为可选),那我们如何更好的来实现呢?我们可考虑在form中加入下面两个标签:
    fieldset:对表单进行分组,一个表单可以有多个fieldset
    legend:说明每组的内容描述
    例如:
    <form id=”demoform” class=”democss” action=””>
    <fieldset>
    <legend>Basic Register</legend>
    <p>First name: <input type=”text” name=”fname” value=”” /></p>

    </fieldset>
    <fieldset>
    <legend>Detailed Register</legend>
    <p>Interest: <input type=”text” name=”interest” value=”” /></p>

    </fieldset>

    </form>
    fieldset默认是带边框的,而legend默认一般显示在左上角。但在某些场合或许不愿意让fieldset和legend的默认样式或默认布局影响设计方案中的美观。
    解决方法:css中将fieldset的border设置为0,legend的display设置为none即可。 (更多…)
7月
11
2011

ZZ CSS布局命名规则

近半年来园子一直试着遵循WEB标准设计和制作网页,今天花些时间整理一下在布局过程中会频繁用到的一些命名规则,当然,这些命名并不是绝对的,只是园子认为有个良好的命名习惯无论是对网站后期维护还是团队协作方面都会有很大的帮助。

网站一般布局命名

  • 页头:header
  • 登录条:loginBar
  • 标志:logo
  • 侧栏:sideBar
  • 广告:banner
  • 导航:nav
  • 子导航:subNav
  • 菜单:menu
  • 子菜单:subMenu
  • 搜索:search
  • 滚动:scroll
  • 页面主体:main
  • 内容:content
  • 指南:guild
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 注册:regsiter
  • 状态:status
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 按钮:btn
  • 投票:vote
  • 合作伙伴:partner
  • 友情链接:friendLink
  • 页脚:footer
  • 版权:copyRight (更多…)
7月
7
2011

ZZ关于Google+你不得不知道的50件事

Google+项目负责人从官方角度非常详细地介绍了Google+,但旁观者清,局外人是如何看待Google+的呢?Chris Brogan分享了自己的50个看法。

  1. Google+的目的是让你离开Twitter或Facebook,或者同时离开两者,并且这事很快就会发生。
  2. 看上去像FriendFeed?担心很快会死掉?要知道Newt Gingrich已经加入G+。
  3. 有了Google+账户,Picasa用户可获得无限免费图片空间。(Flickr和Facebook图片是否感到威胁?)
  4. 有了Circles「圈子」,你可以一目了然地控制隐私。
  5. 「关于」部分很强大,支持链接、图片、二维码。营销者欢呼吧。
  6. 如果Google+开始影响Page Rank「网页排名」的话,那么对SEO/SEM也有用。
  7. 如果Google Music和YouTube那样也和这个平台整合的话,Google+立刻会成为一个强大的娱乐媒体平台。
  8. Android版Google+「下载地址」早期已经取得一定成功,如果这个平台成功的话,这将改变人们对移动操作系统和支出的选择。
  9. 如果你在Google+上问问题然后和「圈子」共享的话,它可以取代Quora。
  10. 视频聊天功能对协作和轮班来说是一把利器。 (更多…)
7月
5
2011

备案号下来了

真不容易啊

7月
5
2011

zz电子书反编工具合集(exe2txt)

1、unEbookWorkshop下载
unEbookWorkShop V1.42注册版
软件大小:   817 KB
软件语言:   简体中文
应用平台:   Win9x/NT/2000/XP
软件介绍:
unEbookWorkshop是专门用来反编译 ebook Workshop( e书工场 )制作的EXE电子书源文件的工具软件(E书反编译工具),可以迅速地反编译包括在EXE电子书里面的全部源文件,并且完美地恢复源文件的全部目录结构及文件名,以便帮助用户得到源文件进行资料恢复或二次编辑。unEbookWorkshop支持批量操作,您只需指定一个包括EXE电子书的目录,unEbookWorkshop会自动把指定目录下符合条件的文件一次性反编译

2、unEbookWorkShop V2.20注册版 下载
软件大小:   894 KB
软件语言:   简体中文
软件类别:   国产软件 / 注册版 / 反编译工具
应用平台:   Win9x/NT/2000/XP/2003
软件介绍:   同上V1.42 (更多…)