
结构与样式
文章平均质量分 52
trace332
我就是我的作品!
展开
-
精通CSS--高级WEB标准解决方案(第一章)-------读书笔记
精通CSS--高级WEB标准解决方案(第一章) Andy Budd ,Cameron Moll ,Simon Collison 著 第一章 基础知识 1.1 设计代码的结构 WYSIWYG(所见即所得)工具会添加更多复杂标记. 有意义的页面:容易处理,搜索;可以被程序及设备理解 有意义的标记:为文档原创 2007-09-08 22:39:00 · 530 阅读 · 0 评论 -
CSS_png图片格式
虽然也不太懂,但只记住切片的时候,切成PNG8的透明图片是可以被IE6支持的。 PNG8 - 支持透明,无损格式,体积最小,但最多只支持256色。栅格影像最好不要选择这种格式做cache。PNG24 - 除了png8的有点,理论上可以存储2的24次方种颜色。但ie6之前的版本对此格式兼容有问题。PNG32 - 除了上述的优点,可以被所有的浏览器很好的支持,但产生的文件体积相对较大。原创 2009-06-03 16:20:00 · 709 阅读 · 0 评论 -
CSS_input 垂直居中
input 垂直居中总是有问题,查了资料,好像说是按照里面文字的底线对齐来居中的。网上的解决方法是:对input 使用vertical-align:middle;原创 2009-06-03 17:15:00 · 4305 阅读 · 0 评论 -
CSS HACK汇总速查
转自:52CSS 屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) select {font:12px !important;} select:empty {font:12px !important;} 这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。 仅IE7与IE5.0可以识别 *+html select {…} 当面转载 2009-06-21 15:53:00 · 2151 阅读 · 0 评论 -
CSS_代码规范_书写顺序
52CSS中有提到团队协作与代码规范的内容,如下: 一、显示属性 Example Source Code [www.52css.com]* display* list-style* position* float* clear 二、自身属性 Example Source Code [www.52css.com]* width* height* margi原创 2009-06-21 15:59:00 · 530 阅读 · 0 评论 -
CSS_自适应按钮
看了别人的自适应按钮,感觉这不就是滑动门么?呵呵 ,算了,记下来方便以后查阅 CSS: body { font-family:Verdana,sans-serif; font-size:12px; } a{ background:url(img/call_button_right.jpg) no-repeat right top; display:原创 2009-09-15 13:49:00 · 1217 阅读 · 0 评论 -
CSS_圆角_无图片圆角代码
一个无图片圆角代码例子 /* 块级元素 */.c_title, .c_title h2 {font-size:14px;}.c_title {background-color:#D5F1FF;color:#00527B;height:100%;line-height:23px;overflow:hidden;padding:2px 10px 0;原创 2009-11-05 12:59:00 · 759 阅读 · 0 评论 -
CSS_Layout三分栏__左右两栏宽度固定,中间自适应
来源URL : http://playgoogle.com/?p=108 没有来及仔细看,但摘出来应该挺好用的. body{min-width:800px;}h1,h2,div p{margin:0;padding:10px;}#wrapper{width:90%;margin:0 auto;background:#ddd;}转载 2010-03-17 14:40:00 · 4925 阅读 · 0 评论 -
读ghost的页面模块化设计
模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能,所有的模块按某种方法组装起来,成为一个整体,完成整个系统所要求的功能。模块具有以下几种基本属性:接口、功能、逻辑、状态,功能、状态与接口反映模块的外部特性,逻辑反映它的内部特性。在软件的体系结构中,模块是可组合、分解和更换的单元。原创 2010-06-14 21:13:00 · 610 阅读 · 0 评论 -
CSS_一个常用分页样式
<br /><br /> <br />直接上代码:<br /> <br /> <br /> <br /> <ul class="pager"> <li class="page prev"> <a href="#" mce_href="#"> < </a> </li> <li class="page cur"> <a href="#" mce_href="#">1</a> </li> <li class="page"> <a href="#" mce_hr原创 2010-09-19 11:53:00 · 806 阅读 · 0 评论 -
HTMLCSS_form表单
最常用的表单结构:用户名请输入用户名密码性别 男原创 2011-03-28 17:30:00 · 1796 阅读 · 1 评论 -
CSS_淘宝页面上一些圆角的做法
看了看淘宝一些页面上的圆角是如何制作的.发现有一部分是直接做成完整的图片(固定宽度),有些则是多余标签+四个角的图片来做. 从FF中边查看边摘出第二种方法的代码 h4h4h4 bdbdbdbd h4h4h4 bdbd原创 2009-05-30 21:50:00 · 1555 阅读 · 0 评论 -
CSS_em与strong的区别
看了"岁月如歌"的文章,自己总结一下: EM: Indicates emphasis. //表明重点STRONG: Indicates stronger emphasis. //表明更加重视 em更突显句意,而strong则更突显重要性(突出视觉效果,表明和别的词不一样哦).em会改变句意,strong则不会. 文章中的例子不错,可以看一下.Cats are cu原创 2009-05-30 16:57:00 · 1006 阅读 · 0 评论 -
制作1PX高的DIV
在蓝色上看到过这个教程,淘宝的面试题也有这一题.所以开始感兴趣了. 原理如下:默认层的最小高度是字体高度,所以一般情况下是无法制作出1PX高的DIV的.(为什么要做1PX的DIV?闲的吧?晕)既然如此,就可以修改字体大小font-size,CSS如下:.aaa{ height:1px;width:300px;background:#CC0000;margin:0;padding:0原创 2007-10-20 10:28:00 · 552 阅读 · 0 评论 -
解决未知大小图片在已知容器中垂直居中的三种方法
方法一:简单有效,但额外添加了一个P元素. 未知大小图片在已知大小容器水平/垂直居中 <!-- div {border:1px solid #000; width:300px; height:300px; text-align:center; /*设置水平居中*/position:relative; display:table-cell; v转载 2009-02-10 20:05:00 · 2692 阅读 · 0 评论 -
文本垂直居中的方法
一、如果是单行文本,可以用行距来解决问题。 <!--#MrJin { width:500px; height:200px; border:1px solid #03c; text-align:center; line-height:200px;}-->#MrJin { width:500px; height:200px; border:1px转载 2009-02-10 20:39:00 · 2038 阅读 · 0 评论 -
CSS_贴在底部的布局
先看代码: content side footer <!--div { border:1px solid #CCCCCC;}html, body, #wrap {height: 100%;}body > #wrap {h转载 2009-02-16 20:04:00 · 1288 阅读 · 0 评论 -
CSS_水平导航条
首 页 走进中科创 投资中心 担保中心 政策法规 新闻动态 人才招聘 联系我们 #mainNav ul{ float:left;/*alert:添加浮动后,IE/FF中导航条长短不一致的BUG消失*/ margin:0; padding:0; list-style-type:none; wid原创 2009-03-21 10:57:00 · 671 阅读 · 0 评论 -
CSS_解决IE6中min-width问题
参考资料:http://www.webreference.com/programming/min-width/index.html IE6中的min-width无效,而实际上,这是一个很好很有用的属性. 怎么解决呢? 参考资料中的方法其实也很麻烦,需要添加两个空div标签. 一个是设置一个大的边框宽度[ border-left: 300px solid #fff;原创 2009-05-05 21:02:00 · 4481 阅读 · 0 评论 -
CSS_td标签中的colspan
最近做了一些表单,内容很多,在td标签中使用了不少的colspan,测试后发现有些问题. 比如在CSS中定义好td { width:80px;},这样一个的格子width应该是240px.填写一些内容,在FF中是正常的,浏览器会智能地把这个td当成三个打通了的格子.但IE中就惨了,浏览器把这个colspan = 3的格子依旧认作一个格子,文字到了80px的地方就会自动换行了.原创 2009-05-05 21:15:00 · 5769 阅读 · 0 评论 -
CSS_居中_图片垂直居中
摘自 怿飞的空间 http://www.planabc.net/2008/05/26/img_vertical_center_solution/ 奇怪的是在针对IE的HACK中,font-size我试验的无效,不知道这个黄金比例是否有依据?自己改成了line-height反而有效果。。。 CSS:.all { width:696px; height:200px; c转载 2009-07-28 14:44:00 · 455 阅读 · 0 评论 -
CSS_IE6边框残缺BUG
表现状况:窗口的边框时隐时现。。。发生情况: 网上说是在一个容器中有元素浮动时容易出现,自己感觉有时内部元素把容器撑开时也会看不到边框。 解决办法: 如果按网上说的是因为浮动的原因的话,那么添加清除浮动则应试可以正常解决。 另外网上的解决办法是:给窗口设置{zoom:1} or { width:100%; height:100%}使其拥有布局即可原创 2009-05-22 10:33:00 · 734 阅读 · 0 评论 -
CSS_常用图片格式
我们最理想的图片是容量小质量高清晰的,这得根据不同图片的性质选择不同的输出格式。网上现今常用的图片格式有jpg、gif、png,至于bmp、svg、tif等格式由于文件大或浏览器不支持等原因不建议使用。常用图片格式的特点:jpg 有损、文件小是一种有损压缩格式,能够将图像压缩在很小的储存空间,图像中重复或不重要的资料会被丢失,因此容易造成图像数据的损伤。gif 无损、≤256色、动画、转载 2009-05-22 10:46:00 · 906 阅读 · 0 评论 -
一个Web IM的UI练习
一个Demo。只完成了html+css部分,还没来及添加交互的js以及更多想法是用websocket做个后台 html - 云起原创 2011-07-08 14:30:24 · 2877 阅读 · 1 评论