2011年11月25日
10个DIV+CSS需要注意的问题
摘要： 1. 检查HTML元素是否有拼写错误、是否忘记结束标记即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2. 检查CSS是否正确检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。3. 确定错误发生的位置假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。4. 利用border属性确定出错元素的布局特性使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误 阅读全文
posted @ 2011-11-25 09:47 潇墓 阅读(135) 评论(0) 推荐(0)
CSS学习笔记：id与class、padding和margin、min-height和height
摘要： id和class到底要用哪一个？ 首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。 id的优点（class的缺点）：id写在css用"#"选择器，class写在css中用"."选择器。"#"选择器的优先级高于"."选择器大约10倍，所以当你需要提升优先级的时候，id标签，或者id容器内的标签将是很容易和有效的。而class标签，或者class容器内的标签将可能导致优先级的提升失败。 id的缺点（class的优点）：id应该是唯一的，所以它的可复用性是很差的，而class是可以复用的。 阅读全文
posted @ 2011-11-25 09:21 潇墓 阅读(341) 评论(0) 推荐(0)
2011年11月7日
简单布局2
摘要： View Code 1 <style type="text/css"> 2 #header,#content,#footer{ 3 background-color:#ccc; 4 border:1px solid #0FF; 5 height:30px; 6 width:80%; 7 margin:10px auto; 8 } 9 #content{10 height:500px;11 }12 #left{13 height:500px;14 width:100%... 阅读全文
posted @ 2011-11-07 09:27 潇墓 阅读(97) 评论(0) 推荐(0)
简单布局1
摘要： View Code 1 <style type="text/css"> 2 #header,#content,#footer{ 3 background-color:#CCC; 4 height:50px; 5 width:80%; 6 margin:10px auto; 7 } 8 #content{ 9 height:500px;10 }11 #left{12 width:30%;13 height:500px;14 float:left;15 ... 阅读全文
posted @ 2011-11-07 08:58 潇墓 阅读(97) 评论(0) 推荐(0)
2011年10月17日
表格-鼠标经过系列单元格
摘要： <style type="text/css">table{color:#565;font:12px Arial;}td{background:#dfc;border-bottom:2px solid #b3de94;border-top:3px solid #ffffff;padding:9px;}td:hover,td.hover{background-color:#595;color:#fff;}</style><body><table summary="book list"><caption&g 阅读全文
posted @ 2011-10-17 10:59 潇墓 阅读(157) 评论(0) 推荐(1)
表格-鼠标经过单元格变色（暂不支持IE6）
摘要： <style type="text/css">table{ color:#555;;/*默认字体颜色*/ font:12px Arial, Helvetica, sans-serif;}td{ background:#dfc;/*默认背景颜色*/ border-bottom:2px solid #b3de94; border-top:3px solid #fff; padding:9px;}tr{ background:#dfc;}tr td:hover{ background-color:#595; color:#06F;/*鼠标经过字体变色*/}</s 阅读全文
posted @ 2011-10-17 10:59 潇墓 阅读(206) 评论(0) 推荐(0)
2011年10月13日
表格-鼠标经过行变色
摘要： <title>表格-鼠标经过行变色</title></head><body><script language="javascript">window.onload=function showtable(){ var tablename=document.getElementById("mytable"); var li=tablename.getElementsByTagName("tr"); for (var i=0;i<=li.length;i++){ if(i%2 阅读全文
posted @ 2011-10-13 10:54 潇墓 阅读(468) 评论(0) 推荐(0)
css-表格中鼠标经过该行文字变色（暂不支持IE6）
摘要： <style type="text/css">table{ color:#555;;/*默认字体颜色*/ font:12px Arial, Helvetica, sans-serif;}td{ background:#dfc;/*默认背景颜色*/ border-bottom:2px solid #b3de94; border-top:3px solid #fff; padding:9px;}tr{ background:#dfc;}tr:hover{ background-color:#595; color:#06F;/*鼠标经过字体变色*/}</styl 阅读全文
posted @ 2011-10-13 10:19 潇墓 阅读(494) 评论(0) 推荐(1)
2011年10月11日
下拉菜单列表
摘要： <style type="text/css">#menu{ margin:0; padding:0; width:900px; list-style-type:none; font:14px "宋体"; }#menu li{ float:left; width:150px; padding:0px; margin:0 1px 0 0;}#menu li dl{ margin:0; padding:0 0 10px 0; background:#cb6 url(bottom.gif) no-repeat bottom left; }#menu 阅读全文
posted @ 2011-10-11 13:50 潇墓 阅读(152) 评论(0) 推荐(0)
2011年10月8日
无图片圆角
摘要： style<style type="text/css">item{ width:50px; margin:0 auto; padding:0px; font:14px Arial; font-weight:bold;}.item p{ padding:0 0 2px 0; margin:0px; text-align:center;}.item div{ height:1px; overflow:hidden; background:#cc6; border-left:solid 1px #000; border-right:solid 1px #000;}.i 阅读全文
posted @ 2011-10-08 10:42 潇墓 阅读(93) 评论(0) 推荐(0)
下一页