初使化标签定义
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
常用的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
未知大小的图片在已知容器内水平垂直居中显示
#imgList{width: 650px;margin: 0 auto;}
.box{height:200px;width:200px;border: solid 1px #666;text-align:center; line-height:200px;font-size:12px;float: left;margin-right: 10px; overflow: hidden;}
* html .box{font-size: 180px}
*>html body .box{font-size: 180px;}
*>html body .box img{margin: -35px 0 0;}
img{vertical-align:middle;}-->
</style>
刷新页面，广告随机变化
<style> .hidden{display:none;}</style>
<script type="text/javascript">
window.onload = function(){var i=Math.floor(Math.random()*5)+1;
document.getElementById("g0"+i).className = '';}
</script>
<div class="hidden" >333</div>
鼠标滑动时触及背景颜色
<style>
.on-over{ background:#ccc;}
.on-out{ background:#fff;}
</style>
<ul>
<li onMouseOver='this.className='on-over'' onMouseOut='this.className='on-out''>
<img src='/newhome/2.gif' />
</li>
</ul>
表单输入效果
<style>
.input_Gray{border:1px solid #C0C1C6;height:18px;color:#999;width:100px;}
.input_Blue{border:1px solid #598EB9;height:18px;color:#000;width:100px;}
</style>
</head>
<body ;
}
};
}();
</script>
用div做表格
<style>
.table{border-top:1px solid #ccc;border-left:1px solid #ccc; width:400px;margin:0px; padding:0px;}
.table li div{border-right:1px solid #ccc; border-bottom:1px solid #ccc; float:left; width:99px; height:30px; padding-top:10px;}
#wholebody{ font-size:12px; color:#000; font-family:"Arial","新宋体"; margin:0px; text-align:center; }
ul{list-style:none;float:left;list-style-type:margin:0px;padding:0px;*margin:0px; padding:0px;}
</style>
<body >
<ul class="table">
<li style="float:left"><div>dfdf</div><div>dfdf</div><div>dfdf</div><div>dfdf</div></li>
<li style="float:left"><div>dfdf</div><div>dfdf</div><div>dfdf</div><div>dfdf</div></li>
<li style="float:left"><div>dfdf</div><div>dfdf</div><div>dfdf</div><div>dfdf</div></li>
<li style="float:left"><div>dfdf</div><div>dfdf</div><div>dfdf</div><div>dfdf</div></li>
</ul>
</body>
弹出层随鼠标移动或是固定位置
<ul '>hndOut
};
loader.insert();
</script>
点击“全部”内容展示或缩回。
<p class="allinfo">剧情：次郎是个寂莫的大学生（小出会儿），到了生日也没人为他祝福。他自己跑到百货商场给自己买20岁生日礼物次 郎是个寂莫的大学生（小出会儿），到了生日也没人为他祝福。他自己跑到百货商场给自己买20岁生日礼物次郎是个寂莫的大学生（小出会儿），到了生日也没人 为他祝福。他自己跑到百货商场给
<span >里的功能
}
loader.insert();
</script>
鼠标滑过，显示
代码如下:简写下
<ul class="rangelist" >
(function() {
var _D = YAHOO.util.Dom;
var _E = YAHOO.util.Event;
var listli = _D. get_r('hotlist'). getElementsByTagName_r('li');
var showem = function(){
var emlist =_D. getElementsByClassName_r('emlist', 'em', this)[0];
_D.removeClass(emlist,'hidden');
var showdiv = _D. getElementsByClassName_r('ranginfo', 'div', this)[0];
_D.addClass(showdiv, 'hidden');
}
var listdiv = function() {
var showdiv = _D. getElementsByClassName_r('ranginfo', 'div', this)[0];
var em =_D. getElementsByClassName_r('emlist', 'em', this)[0];
var lists = _D. getElementsByClassName_r('ranginfo', 'div', _D. get_r('hotlist'));
var emlist =_D. getElementsByClassName_r('emlist', 'em', _D. get_r('hotlist'));
for (var i = 0; i < lists.length; i++) {
_D.addClass(lists[i], 'hidden');
}
for (var i = 0; i < emlist.length; i++) {
_D.removeClass(emlist[i], 'hidden');
}
_D.removeClass(showdiv, 'hidden');
_D.addClass(em,'hidden');
};
_E.addListener(listli, 'mouseover', listdiv);
})();
</script>
幻灯效果
首先分析下代码结构，灰色的png半透明背景是不会变的~小黄色按妞也不会变！按妞和文字都不会有动画的渐变效果，就只有图片之间切换时有动画效果！
所以我的代码结构是，一个大的容器，里面的一个ul里放的是图片，然后把半透明的灰色背景定位到图片上方！然后用一个ul里面放相应的图片文字信息和按 妞，然后下方的小圆点也position定位到相对应的位置
以下是代码
<!--幻灯-->
<div class="tvd-mainblock slideshow">
<ul >（）
})();
鼠标触击背景效果
<style>
.on-over{ background:#ccc;}
.on-out{ background:#fff;}
</style>
<ul>
<li onMouseOver="this.className='on-over'" onMouseOut="this.className='on-out'">
<img src="/newhome/2.gif" />
</li>
</ul>
onMouseOver:触击时
onMouseOut：离开时
几种固定搭配
蓝白橙——蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。
绿白兰——绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀。
橙白红——橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。
暗红黑——暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。