Web 设计中的中国传统色彩速查表
Posted by admin on 2010年05月26日
0 comments
觉得很全，分享一下，以下为作者iiduce所言“诗词中有：“名花韵在年晴初，雨沁胭脂脸更敷。”，你知道胭脂是什么颜色么？“回眸一笑百媚生，六宫粉 黛无颜色。”中的这个“黛”又是指什么颜色呢？“漆黑一片”里漆黑真的就是完全的黑色吗？在下面这个Web设计中的中国传统色彩速查表，你可以得到准确的 答案。
DIV 图片垂直居中
Posted by admin on 2010年03月31日
0 comments
.pic
{
width:160px;
height:160px;
border:solid?1px?#ccc;
text-align:center;
}
{
width:160px;
height:160px;
border:solid?1px?#ccc;
text-align:center;
}
.pic?a
{
display:table-cell;
width:160px;
height:160px;
vertical-align:middle;
*display:block;
*font-family:Arial!important;
*font-size:140px;/*约为高度的0.873，160*0.873?约为140*/
*line-height:1;
}
.pic?a?img
{
vertical-align:middle;
max-width:160px;
max-height:160px;
border:0px;
}
CSS em与px的区别
Posted by admin on 2010年03月31日
0 comments
CSS中定义的长度单位有两种，相对长度和绝对长度。相对长度单位主要有：
*?em?(em，元素的字体的高度)
*?ex?(x- height，字母?”x”?的高度)
*?px?(像素，相对于屏幕的分辨率)
绝对长度单位主要有：
*?in?(英 寸，1英寸=2.54厘米)
*?cm?(厘米，1厘米=10毫米)
*?mm?(米)
*?pt?(点，1点=1/72 英寸)
*?pc?(帕，1帕=12点)
使用px和em主要优缺点如下：
1.?IE无法调整那些使用px作 为单位的字体大小，而firefox能够调整使用px和em作为单位的字体；
2.?任意浏览器的默认字体高都是16px。所有未经调整的浏览 器都符合：?1em=16px。那么 12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明?Font- size=62.5%，这就使em值变为?16px*62.5%=10px,?这样12px=1.2em,?10px=1em,?也就是说只需要将你的原 来的px数值除以10，然后换上em作为单位就行了。
em有如下特点：
(全文…)
css 之清除区域
Posted by admin on 2010年03月3日
0 comments
清除区域：在css2.1中引入了一个清除区域，当为一个 元素使用clear时， 他的外边距并没有发生变化，而是这个清除区域使得元素落在了浮动元素的下面。
1? <style?type=”text/css”>
2?*{margin:0;padding:0;}
3?p{border:?1px?#66CC00?solid;}
4?img?{
5?????width:40px;
6?????height:40px;
7?????float:left;
8?????border:?1px?#66CC00?solid;
9?}
10?h3{
11?????clear:both;
12?????border:?1px?#66CC00?solid;
13?????}
14?div{padding:20px;width:400px;height:400px;}
15?</style>
16?</head>
17
18?<body>
19?<div>
20?<p>我在上面</p>
21?<img?src=”QQ 截图未命名.png”?/>
22?<h3>我在下面</h3>
23?</div>效果：
纯净Css+html 实现简单进度条效果
Posted by admin on 2010年02月7日
0 comments
<style>
.graph {
position: relative;
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
margin-bottom: .5em;
}
.graph .bar {
display:block;position:relative;
background: #B1D632;
text-align: center;
color: #333;
height: 10px;
line-height: 10px;
}
.graph .bar span { position:absolute;left: 1em; }
</style>
<h3>简单进度条</h3> (全文…)
总结CSS网页布局时常犯的几种小错误
Posted by admin on 2010年02月5日
2 comments
1.?检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2.?检查CSS是否书写正确
检查一下有无拼写错误、是否忘记结尾的?}?等。可以利用CleanCSS来检查?CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 (全文…)
总结css命名规则
Posted by admin on 2010年02月5日
0 comments
做网页时，常会因为不会命名和命名重复而造成好多不不必要的麻烦，正确的命名的确很重要，我这里也收集了一些命名规则，发上来大家共享下
CSS命名规则
头：header
内容：content/containe
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main (全文…)
粤ICP备09177306号