随笔分类 -  html&css

css圆角的多种实现方法
摘要：一.css script背景图片法现在我想把如下图片的粉色部分当做背景图片插入到页面里：最终效果如图：实现的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=" 阅读全文
posted @ 2013-01-17 19:17 -禅意花园- 阅读(317) 评论(0) 推荐(0)
CSS中alt属性和title属性用法
摘要：alt属性为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。 CSS中Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。比如：<inputtype="image"src="image.gif"alt="Submit"/>.使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那 阅读全文
posted @ 2012-10-25 21:04 -禅意花园- 阅读(1398) 评论(0) 推荐(1)
纯css实现下拉菜单
摘要：图示效果：代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; cha 阅读全文
posted @ 2012-09-20 19:08 -禅意花园- 阅读(287) 评论(0) 推荐(0)
CSS网页布局中字体样式
摘要：解CSS网页布局中默认字体样式浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在WindowsXP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。样式优先级通常用户看到的页面的样式会受到三层控制:第一层是浏览器的默认样式第二层 阅读全文
posted @ 2012-09-15 17:21 -禅意花园- 阅读(595) 评论(0) 推荐(0)
!important
摘要：“‘!important’ 在同一条样式定义中即大括号{}中，firefox、opera优先认领，ie不认得即忽略’!important’字符串。在非同一条样式中即不同的大括号中{}标有‘!important’的样式对所有浏览器均属优先认领。网上有说ie不认‘!important’的，大错特错了。”难怪今天改css的时候，我只想针对firefox来做一个padding-bottom，就写了个.class{padding-bottom:6px !important;}可是却没有效果呢。原来css在同一个大括号内是让firefox优先认领，也就是说只有在同一括号内定下两个样式的时候ie不得不忽略掉 阅读全文
posted @ 2012-06-15 11:22 -禅意花园- 阅读(207) 评论(0) 推荐(0)
利用CSS设置缩进效果
摘要：前几种方法都是在段落开头加入一些东西，利用占位法设置缩进效果，而使用CSS设置缩进效果则更容易，也便于修改。 text-indenet属性就是缩进元素中的首行文本，它可以取正值或负值。比如我们想让所有的段落首行都缩进两个字符的宽度就可以设置段落的CSS属性，举例：p {text-indent:2em;} 这里我设置的值为2em，em是一个相对单位，2em就是页面字体的两倍大小，当页面字体为12像素时，首行缩进就是24像素，当页面字体为14像素时，首行缩进就成了28像素。 阅读全文
posted @ 2012-05-29 20:16 -禅意花园- 阅读(472) 评论(0) 推荐(0)
font-weight
摘要：可能的值值描述normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。100200300400500600700800900定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。inherit规定应该从父元素继承字体的粗细。 阅读全文
posted @ 2012-05-29 20:02 -禅意花园- 阅读(167) 评论(0) 推荐(0)
CSS 颜色值
摘要：颜色在CSS里的应用非常广泛，如：color，border，background，box-shadow等的属性都接受颜色值作为属性值。CSS颜色值的设置也是多样化的，以下是到目前为止CSS中颜色值设置的方法。CSS 预定义颜色(就是使用颜色的英文)W3C定义了一组SVG的颜色表，同样是CSS颜色模块所指的颜色，他们是一些指向特定颜色的单词，如：white, black ,red等。color:red; color:green; color:blue;transparent 关键字transparent 表示完全透明，CSS1中，它只能在 background 属性中使用，CSS2中，添加到了 阅读全文
posted @ 2012-05-29 19:59 -禅意花园- 阅读(1213) 评论(0) 推荐(0)
overflow
摘要：overflow 属性规定当内容溢出元素框时发生的事情。可能的值值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。 阅读全文
posted @ 2012-05-29 18:24 -禅意花园- 阅读(223) 评论(0) 推荐(0)
css标签
摘要：1.*是通用选择符,匹配文档中的任何元素2.background-position：10px 0;前一个是水平位置 后一个是垂直位置。 阅读全文
posted @ 2012-05-29 17:47 -禅意花园- 阅读(94) 评论(0) 推荐(0)
Web UI 美工设计命名规范
摘要：网站用户界面设计(俗称网页设计)命名规范。这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。首先作者是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。一.网站设计及基本框架结构:1. Containe 阅读全文
posted @ 2012-05-29 09:23 -禅意花园- 阅读(310) 评论(0) 推荐(0)
em与px
摘要：em和px字体单位应该用em而不用px，原因简单来说就是支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。px是绝对单位，不支持IE的缩放，em是相对单位。我在调整本blog的时候，发现不仅仅是字体，将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。怎么将px换成em呢？特地转jorux06年12月的一篇文章，因为中文站用px的太多了，如果你是对代码不敏感的纯设计师，可以向技术人员或者页面制作人员请教：em是何物？em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.7 阅读全文
posted @ 2012-04-10 21:01 -禅意花园- 阅读(174) 评论(0) 推荐(0)
html-css
摘要：DIV+CSS圆角边框简洁型css圆角：方法1：简洁型css圆角矩形code1:<styletype="text/css">.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{}{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{}{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{}{border-left:1pxsolid#999;border-right:1pxsolid#999;}.b1,.b1b{}{margin:05px;ba 阅读全文
posted @ 2012-03-28 09:07 -禅意花园- 阅读(258) 评论(0) 推荐(0)