各种输入框背景色.txt

在先用代码之前必须对和讯的博客有所了解，登陆博客，先点击进入博客的管理后台。能加入代码的有常规设置和界面风格这两个连接。其中常规设置的“简介或公告”是主要的代码写入区。不过我个人测试发现 “标题”和“副标题”也可以加入代码，如果连这个两个也利用上，代码写入会更自由。“简介或公告”里没什么好说的你在网上找的代码直接粘贴进去就好了，不再多说了，这里主要说的是那个在界面风格里改CSS来个性化你的博客。如果你看见代码就晕就把我的代码拿去吧代码地址：http://sinab.blog.hexun.com/4067512_d.html，如果你想做出自己的个性来，还继续看下去吧。

下面就说说界面风格设置：
1. 改模版风格为简约风格（必须的）：
以下的例子全是在simple : 简约风格的前提下说的，这种限制最少。
2. 进入界面风格设置：
在自定义风格样式代码中写入你改好的CSS代码保存就好了，点击(缺省样式代码及说明) 可以看到缺省样式代码我们可以在此基础上改，这里把它帖出来，以下有好多部分，我们可以只改一部分，也只要把你改过的那个部分帖到自定义风格样式代码中去就好了，没改的就不用帖了。以下分部分讲解；在讲之前你要了解几个最常用的代码
插图代码：background-image: url(这里写入你的图片地址);
背景透明代码：background-color: transparent;当你不需要给某个区加背景时可以用
背景颜色代码：background-color: #F6F6F6;定义背景色
以下描述中，（）内的是讲解内容添加代码时要把他们去掉。

1，这里是定义整个页面的属性，这里作为重点讲，以下的部分都差不多。如果你要给整个页面加个背景图就在这里了。在{}内插入插图代码即：background-image: url(这里写你要插入的图片的地址);
<!-- body -->
body {
    font-size: 12px;（这里是字号）
    font-family: Tahoma, Verdana, "宋体";（这里是字体）
    background-color: #CCCCCC;（背景色）
    background-position: top left;（背景图位置）
    background-repeat: repeat-x;（repeat : 背景图像在纵向和横向上平铺，no-repeat : 　背景图像不平铺，repeat-x : 　背景图像在
横向上平铺，repeat-y : 　背景图像在纵向平铺）
background-attachment: fixed;（这个是定义当你拉滚动条时，背景图是随着滚动条移动还是固定不动）
cursor:url("http://www.mumayi.net/mumayi.cur");（这个是定义鼠标的样子，你可以把http://www.mumayi.net/mumayi.cur替换成你的网上
的图标地址，如果你不会找就用我用的这个吧。）
SCROLLBAR-FACE-COLOR:#8CC02C;（这行和以下几行以SCROLLBAR开头的是定义滚动条的样子的看看我的博客的滚动条效果吧，如果你很懒可以到这里http://www.zqxy.cn/wl/qt/3.htm去在线生成你喜欢的样子把生成的代码拷贝过来就好了）
SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
SCROLLBAR-SHADOW-COLOR:#000000;
SCROLLBAR-3DLIGHT-COLOR:#95BD40;
SCROLLBAR-ARROW-COLOR:#FFFF00;
SCROLLBAR-TRACK-COLOR:#008000;
SCROLLBAR-DARKSHADOW-COLOR:#008000;
}

2，以下是定义连接样式的
<!-- 链接和已被访问过的链接 -->
a:link,a:visited {
    text-decoration: none;
    color: #4073AB;（颜色）
    font-family: Tahoma, Verdana, "宋体";（字体）
border: solid 1px green; （连接的边框，1px是宽度，green是颜色）
}
<!-- 鼠标移动到链接上的样式 -->（同上，你可以定义的和上面不一样这样就鼠标移动到链接上时就会有动态效果，可以先看看我的连接效果）
a:hover {
    text-decoration: underline;
    color:#990000;
    font-family: Tahoma, Verdana, "宋体";
}

3,  这里定义输入文字的地方的样子象‘搜索’的那个输入框
<!-- 输入框 -->
input { 
    border: 1px solid #C0C0C0;（定义边框，1px是边框宽度，solid是实心的边框，你可以换成虚线dashed，点线dotted，无边框none，）
    padding-right: 1px;
    padding-left: 1px;
    padding-bottom: 1px;
    padding-top: 1px;
    font-family: Tahoma, Verdana, "宋体";
    font-size: 11px;
    color: #000000;
    background-color: #FFFFFF; （背景色）
}
<!-- 多行文本框 -->（输入多行文字的地方如：发表评论的那个输入框，参见上一个设置）
textarea {
    border: 1px solid #C0C0C0;
    background-color: #FFFFFF;（背景色）
    font-family: Tahoma, Verdana, "宋体";
    font-size: 12px;
    color: #000000;
}

4，这个自己实验吧，不要也罢。
<!-- 选择框 -->
select {
    font-family: Tahoma, Verdana, "宋体";
    font-size: 11px; 
    color: #000000;
    background-color: #FFFFFF;
}

5，这里定义了容纳标题和正文的表的样子
<!-- 容纳标题和正文的表 -->
.maintable {
    width:768px; （宽度就是页面的左右宽度，）
    border-color: #999999;
    border-style: solid;
    border-bottom-width: 0px;
    border-right-width: 1px;
    border-top-width: 0px;
    border-left-width: 1px;
    background-color: #F6F6F6;（背景色，可以加入背景图片代码）
}

6,  说明文字
<!-- 说明文字 就是那个”主人名“等文字的样子，没用，不要也吧-->
.comment-text {
    font-size: 11px;
    color: gray;
}
<!-- 高亮文字 -->（同上，不要了）
.highlight {
    text-decoration: underline;
    color: red;
}

7,   标题栏
<!-- 标题栏 -->（大标题区的样子你可以象body中那样定义背景图，鼠标等）
.page-header {
}

8,   定义大标题区的连接样子，参见body区的定义
<!-- 标题栏的链接 -->
.page-header a:link {
    color: black;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
}
<!-- 标题栏已访问过的链接 -->
.page-header a:visited {
    color: black;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
}
<!-- 标题栏鼠标移到链接上 -->
.page-header a:hover {
    color: #006400;
    font-size: 24px;
    font-weight: bold;
    text-decoration: underline;
}
<!-- 标题栏副标题 -->
.page-subheader {
    font-size: 12px;
    font-weight: bold;
    color: #666666;
}

9，这里是定义那个页面底部的和讯的版权声名可以加入以下代码display:none;隐藏它，呵呵，和讯不要生气呀！！！！当然你也可以把display:none;加入到其它你不想显示的区域中，如大标题区，这样就没有大标题了。
<!-- 页脚 -->
.page-footer {
    border-top: 1px dashed #CCCCCC;
    display:none;
}

10，
<!-- 标题栏与正文区域的分隔线 -->（可以加背景图片）
.header-splitter {
    height: 15px; （宽度）
    background-color: #e0e0e0;
}

11，就是整个左边栏，快速链接，日历等的样子（可以加入背景图片）
<!-- 整个边栏 -->
.sidebar {
    vertical-align: top;
    height: 400px;
    width: 180px;
    white-space: nowrap;
}

12，整个正文区域包括文章标题，内容，底部三个部分每个部分都可以加入背景图片
<!-- 整个正文区域 -->
.mainbox {
    vertical-align: top;
}

13，定义文章分页的那个页码的样子
<!-- 分页 -->
.multipage {
    color: #999999;
}
<!-- 当前页 -->
.multipage-current {
    color: #999999;
    font-weight: bold;
    text-decoration: underline;
}

14，面板就是：快速链接，日历，标签 ，最新文章等每一个都是一个面板，当然每个都可以定义背景图
<!-- 面板 -->
.panel {
}
<!-- 面板标题 -->
.panel-title {
    color: #666666;
    font-weight: bold;
    border-bottom: 1px dashed #CCCCCC;
}
<!-- 面板正文 -->
.panel-content {
}
<!-- 日历 -->
.calender-box {
    border-left: 0px solid #000;
    border-top: 0px solid #000;
}
<!-- 日历上的每一天 -->
.calendar-day {
    border-right: 0px solid #000;
    border-bottom: 0px solid #000;
    color: #666666;
    text-align: center;
    padding: 4px;
}
<!-- 日历上的星期 -->就是那个Su Mo Tu We Th Fr Sa 的样子
.calendar-weekdays {
    border-right: 0px solid #000;
    border-bottom: 0px solid #000;
    color: #999999;
    font-weight:bold; 
    text-align: center;
    padding: 4px;
}
<!-- 日历上的今天 -->当前天
.calendar-today {
    color: #666666;
    border: dashed 1px #CCCCCC;
    background-color: #F6F6F6;
    text-align: center;
    padding: 4px;
}
<!-- 日历上当前选择的天 -->
.calendar-thisday {
    color: #666666;
    border: solid 1px #CCCCCC;
    text-align: center;
    padding: 4px;
}

15，定义文章区的样子
<!-- 文章区域 -->（整个文章区）
.textbox {
    background-color: white;
    border: 1px dashed #CCCCCC;
}
<!-- 文章标题 -->
.textbox-title {
    font-size: 14px;
    border-bottom: 1px dashed #E0E0E0;
    padding-left: 10px;
}
<!-- 文章正文内容 -->
.textbox-content {
    padding-left: 8px;
}
<!-- 文章底部 -->
.textbox-bottom {
    font-size: 11px;
    Color: #999999;
}

16，表单好象是你写评论，发表文章时的那个框框，大家可以试试就知道了，谁测试了说一声
<!-- 表单区域 -->
.formbox {
    border: solid 1px #CCCCCC;
    background: #FFFFFF;
}
<!-- 表单标题 -->
.formbox-title {
    text-align: center;
    background-color: #EFEFEF;
}
<!-- 表单正文内容 -->
.formbox-content {
}
<!-- 表单项标题 -->
.formbox-rowheader {
    text-align: right;
    font-weight: bold;
}
<!-- 表单中需强制换行的项 -->（这个不懂）
.formbox-wordwrap {
    border: solid 1px #CCCCCC;
    background: #FFFFFF;
    word-wrap: break-word;
    word-break: break-all;
}
以下大同小异大家测试一下就明白了！！！！
<!-- 评论区域 -->
.commentbox {
    background-color: white;
    border: 1px dashed #CCCCCC;
}
<!-- 评论标题 -->
.commentbox-title {
}
<!-- 成员列表 -->
.member-list {
    background-color: #F6F6F6;
}
<!-- 表格 -->
.gridbox {
    border-color:#CCCCCC;
    border-style: solid;
    border-bottom-width:1px;
    border-right-width:1px;
    border-top-width:0px;     border-left-width:0px;
    background-color: white;
}

17，表格不懂，也没测试出是定义的那里谁知道，赐教。
<!-- 表格的格子 -->
.gridbox-td {
    border-color:#CCCCCC;
    border-style: solid;
    border-bottom-width:0px;
    border-right-width:0px;
    border-top-width:1px;
    border-left-width:1px;
}
<!-- 表格标题 -->
.gridbox-title {
    border-color:#CCCCCC;
    border-style: solid;
    border-bottom-width:0px;
    border-right-width:0px;
    border-top-width:1px;
    border-left-width:1px;
    text-align: center;
    background-color: #EFEFEF;
}
<!-- 表格中的分页 -->
.gridbox-page {
    border-color:#CCCCCC;
    border-style: solid;
    border-bottom-width:0px;
    border-right-width:0px;
    border-top-width:1px;
    border-left-width:1px;
    text-align: right;
    background-color: #EFEFEF;
}
<!-- 友情链接图 -->
.linklogo {
    border-color:#CCCCCC;
    border-width: 1px;
    border-style: solid;
    width: 150px;
}
<!-- 友情链接面板 -->
.panel-link{
    text-align: center;
}
<!-- 留言文字 -->
.message-text {
    font-size: 11px;
    color: gray;
}
<!-- 留言板 -->
.messagebox {
    background-color: white;
    border: 1px dashed #CCCCCC;
}
<!-- 留言标题 -->
.messagebox-title {
    border-bottom: 1px dashed #E0E0E0;
}
<!-- 留言内容 -->
.messagebox-content {
    height: 100px;
}
<!-- 文章发表方式显示 -->
.posttype-text {
    color: #990000;
}<!-- 搜索结果列表 -->
.searchresult {
    border-top: 1px dashed #CCCCCC;
}<!-- 搜索结果标题 -->
.searchresult-title {
    border-bottom: 1px dashed #CCCCCC;
}<!-- 精华文章列表 -->
.essentialbox {
    border-top: 1px dashed #CCCCCC;
}<!-- 精华文章标题 -->
.essentialbox-title {
    border-bottom: 1px dashed #CCCCCC;
}
<!-- 链接"发送私信"和"加为好友"的样式 -->
.SendMessage {    color: #CCC;}
<!-- 链接"发送私信"和"加为好友"的样式 --> .SendMessage a:link,.SendMessage a:visited {    color: #B0CAE8;}
<!-- 链接"发送私信"和"加为好友"的样式 --> .SendMessage a:hover {    color: #D28383;}