【装扮+教程】CSS教程大全

（不定期更新哦）
这些是我收藏的一些装扮主页分类的代码，可用于磨内装扮，仅作为参考：

查看别人的css配色的方法
很简单，比如查看我的：链接就是：
http://feixue.wodemo.com/skin/site.css
同理，查看123的就开http://123.wodemo.com/skin/site.css


下面是用于分类名中的代码：
注意：下面这些是用于分类中，不是CSS里

换行
<br/>
主页添加图片
<img src="图片地址" border="0">
添加主页右下角图片
#whole_body{background:url(图片地址)no-repeat 100% 100% scroll; }
主页添加背景音乐
<embed src="音乐地址" autostart="true" hidden="true" loop="true"></embed>
分享外站链接（也可以用于友情链接）
<a href=网站资源地址> 网址介绍 </a>
分类字体颜色和大小
<font face="字体名称"size="字体大小"color="字体颜色">被设置的字体格式的内容</font>
主页添加非链接文字
</a> <b>增加文字</b>
主页添加分割线
<hr>文字不写也没事</hr>
分类名背景栏
<button> 分类名 </button>
文字背景加边框
<div style="border:1px//边框厚度// solid red//边框颜色//;background-color:red//文字背景色//;">这里为文字</div>


首页快速留言代码：
<a><form method="POST" action="http://s.wodemo.com/">
<input type="hidden" name="act" value="file_talk">
<input type="hidden" name="fid" value="这里填留言版地址后面的几个数字，比如我的是50028，其它不要修改"><textarea name="content" cols="20" rows="2">飘过～</textarea><input type="submit"value="留言"></a>

首页SOSO搜索代码，不要修改，直接复制到分类里：
<a><input type="text" id="t" />
<input type="button" value="SOSO搜索" onclick="location.href='http://wap.soso.com/sweb/search.jsp?key='+document.getElementById('t').value+' site:wodemo.com';" /></a>

首页谷歌搜索代码，不要修改，直接复制到分类里：
<a><form action="http://www.google.com.hk/search" method="get">
<input type="hidden" name="sitesearch" value="wodemo.com" />
<input type="search" name="as_q" />
<input type="submit" value="谷歌搜索" /></a>

当前时间代码
<a>当前时间 <script language="javascript">function time_get(){now = new Date();h="0"+now.getHours();m="0"+now.getMinutes();if(h>9){h=now.getHours()}if(m>9){m=now.getMinutes()}document.write(""+h+":"+m+"");}</script><script>time_get()</script></a>

年月日星期代码
<a><script type="text/javascript">var d = new Date();document.write(d.getFullYear()+'年'+(d.getMonth()+1)+'月'+d.getDate()+'日');document.write(' 星期'+'日一二三四五六'.charAt(new Date().getDay()));</script></a>






下面一些`实用CSS小汇集`转载于◇笑忘书◇
以下可用于我的磨的美化，用于CSS中。

【注意】：复制代码时注意带上该段的开头与结尾部分（如"body{" 和 "}"），删除【】部分、分割线以及换行，颜色代码（如red，#000000，#111）自行更换，说明仅供参考，因浏览器显示差异或属性覆盖等问题可能看不到效果，具体使用请自行摸索，欢迎各位提供纠正完善，更多属性代码参考请到http://www.w3school.com.cn/css/，谢谢。

〓网页主页定义〓

body {
【网页背景色为绿】
background-color:green;
【默认字颜色为红】
color: red;
【网页框与网页边缘距离】
padding:2px 3px ;
【文字居中,居左用left,居右用right】
text-align: center;
【字体尺寸为默认的120%,小字体用9px或其他，由实际情况而定】
font-size:120%;
【字体浓淡为粗体。normal:默认值，bold:定义粗体字符，bolder:定义更粗的字符，lighter:定义更细的字符，100~900:
定义由粗到细的字符，400 等同于 normal，而 700 等同于 bold】
font-weight: bold;
【文字风格为斜体。normal:默认值，oblique:倾斜文字】
font-style:Italic;
【字体为小型大写字母】
font-variant:small-caps;
【字体系列为通常字体系列。通常字体系列名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。提示：建议使用多个，浏览器将使用其可识别的第一个值。使用逗号分割每个值，并始终提供一个通常字体系列作为最后的选择】
font-family:"Times New Roman",Georgia,Serif;
【文字行距大小】
line-height: 18px;
【背景图片，括号内填图片地址，如果图片在你的磨里可删除/down部分 ★若与网页边框一起用，图片将只能显示在边框外】
background: url(/down/20121124/44582/a.jpg)
【背景图片重复属性。
这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下,图片既横向重复，又竖向重复。repeat-x:背景图片横向重复 repeat-y:背景图片竖向重复no-repeat:背景图片不重复】
repeat-y;
【元素定位。absolute:绝对定位 fixed:相对于浏览器窗口进行定位 relative:相对于其正常位置进行定位 static:默认值，没有定位】
position:relative;
}

〓扩展名及首页上页下页末页区域定义〓

span {
【扩展名和"首页上页下页末页"区域背景色】
background-color:white;
【位置同上，文字颜色】
color:orange;
【边框样式为槽线式】
border-style: groove;
【位置同上，文字边框颜色】
border-color:red;
【位置同上，文字边框粗细，左为横框架，右为竖框架】
border-width: 1px 1px;
}

〓链接文字定义〓

a {
【边框样式为直线式】
border-style: solid;
【链接文字的边框粗细，左为横框，右为竖框】
border-width:1px 1px;
【同上位置，边框颜色】
border-color: blue;
【同上位置，文字颜色】
color:gold;
【链接文字的背景颜色】
background-color:gold;
【链接文字添加上划线】
text-decoration:overline;
}

〓评论区域定义〓

form{
【评论区域背景颜色】
background-color:#000011;
【评论区域字体颜色】
color:red;
}

〓未访问的链接〓

a:link {
【未访问的链接颜色】
color: #FF0000
}

〓已访问的链接〓
a:visited {
【已访问的链接颜色】
color: #00FF00
}

〓当有鼠标悬停在链接上〓
a:hover {
【鼠标停留链接的颜色】
color: #FF00FF
}

〓被选择的链接〓
a:active {
【被选择链接的颜色】
color: #0000FF
}

〓文件列表区域定义〓

.file_list{
【文件列表区域背景颜色为白】
background-color:white;
【扩展名字体颜色 ★若前面已用了span部分修改将优先显示span部分】
color:#556688;
【文件列表区域的文字尺寸为小字体】
font-size:9px;
【文件列表区域边框属性，分别为宽度，样式，颜色】
border:2px solid red;

}

〓文件列表文件名区域〓

.file_list li{
〓文件列表区域分割线〓

【文件名下边框线(即下划线)粗细】
border-bottom:1px
【同上，样式】
solid
【同上，颜色】
lime;
}

〓文件扩展名区域〓

.file_list span{
【扩展名字体颜色为红】
color:red;
【扩展名背景色】
background-color:black;
}

〓网页边框内定义〓

div {
【默认字颜色为红】
color:red;
【边框样式为双线式。如果浏览器不支持将默认显示为实线】
border-style: double;
【网页边框颜色，分别为上右下左框】
border-color: #ff5566 #446600 #0033ff #1122ff;
【网页边框粗细，左为横框，右为竖框】
border-width: 4px 1px;
【文字与网页边框的距离】
padding:3px;
【网页边框内的颜色。如果与body{background-color:red;}同时存在，则网页边框外为红色，边框内为绿色】
background-color:green;
【分类中用到div的部分与周边距离】
margin:3px 1px;
}

〓首页上页下页末页区域定义〓

p {
【与外边缘的距离，分别为上右下左外边距】
margin:2px 1px 2px 1px
【"首页上页下页末页"区域背景色】
background-color:white;
【"首页上页下页末页"区域字体颜色】
color:red;
}

〓 网页主体定义〓

#whole_body {
【背景图片，可用于添加网站logo 】
background:url(图片地址)
【背景图不重复】
no-repeat
【背景图随网页下拉而滚动】
scroll
【背景图位置居右，居左用left居中用center。另外，也可以用1%-100%表示与左端距离大小】
right
【背景图位置居网页底端，居顶用top居中用center。同样也可用1%-100%表示与顶端距离大小】
bottom;