修改这个页面花了整一个下午,现在的效果比较让自己满意了,对css的认识更加强了不少。
以下是我从网上copy&assemble的css样式表:
/*------------------------------------cut from here------------------------*/
body {
margin:0px 0px 0px 0px;
background-color: #ffffff
background-attachment:fixed;
background-repeat:repeat-y;
background-position: left;
/* font-family:Fixedsys; */
}
a { color: #000099; text-decoration: none;}
a:link { color: #336600; text-decoration: none; }
a:visited { color: #3366ff; text-decoration: none; }
a:active { color: #000099; }
a:hover { color: #000000;text-decoration: underline;background-color : #ffff99;}
h1 {
margin: 0px;
padding: 0px;
}
h2 {
margin: 0px;
padding: 0px;
}
h3 {
margin: 5px;
padding: 5px;
border-bottom: 1px solid #000000;
border-left: 0px solid #006699;
}
hr {
border:1px solid #F5F9FD;
}
input {
font-size: 8pt;
border: 1px solid #8cacbb;
color: Black;
background-color: white;
vertical-align: middle;
margin-bottom: 1px; /* IE bug fix */
padding: 0.1em;
}
td {
color:#006699;
font-size: small;
font-weight:normal;
}
.title {
font-size: large;
color: #336600;
font-weight:bold;
text-align:center;
padding-top:10px;
padding-left:10px;
}
.dotted_area {
color:#006699;
background-color: #F5F9FD;
font-size: small;
font-weight:normal;
line-height:130%;
border-left: 1px dotted #006699;
border-right: 2px dotted #006699;
border-top: 1px dotted #006699;
border:1px dotted #006699;
border-bottom: 2px dotted #006699;
padding:5px;
margin-bottom:5px;
margin-left:5px;
text-indent: 2pt;
}
.solid_area {
color:#006699;
background-color: #F5F9FD;
font-size: small;
font-weight:normal;
line-height:130%;
border-left: 1px solid #006699;
border-right: 2px solid #006699;
border-top: 1px solid #006699;
border-bottom: 2px solid #006699;
padding:5px;
margin-bottom: 5px;
margin-left: 5px;
text-indent: 2pt;
}
.powered {
color:#999999;
font-size:large;
font-weight:normal;
border-top:1px dotted #006699;
line-height:140%;
padding:2px;
margin-top:10px;
text-align:center;
background:none;
}
textarea {
border: 1px solid #8cacbb;
color: Black;
background-color: white;
padding: 0.1em;
}
.postFoot {
color:#003366;
font-size:small;
font-weight:normal;
background:#FFF;
margin-bottom:5px;
border-bottom:1px dotted #006699;
}
.post {
color:#003366;
font-size:medium;
font-weight:normal;
line-height:130%;
padding-bottom:3px;
padding-top:3px;
padding-left:3px;
padding-right:3px;
margin-bottom:10px;
margin-top:5px;
margin-right:10px;
}
.postText {
color:#006699;
font-size: small;
font-weight:normal;
line-height:130%;
padding:5px;
margin-bottom: 5px;
margin-left: 5px;
text-indent: 2pt;
}
#top {
padding : 10px;
background-color : #FFF;
color : #000;
border-bottom : 2px solid #8cacbb;
}
#main {
margin : 0px 190px 0px 200px;
background-color : #FFF;
padding : 5px;
border-left : 1px solid #8cacbb;
border-right : 1px solid #8cacbb;
border-bottom : 1px solid #8cacbb;
}
#leftmenu ul, #rightmenu ul
{
padding-right: 0px;
padding-left: 0px;
list-style-position: inside;
font-size: small;
padding-bottom: 0px;
margin: 0px 5px 0px 5px;
padding-top: 0px;
list-style-type: decimal;
}
#leftmenu, #rightmenu
{
padding-right: 0px;
padding-left: 0px;
list-style-position: inside;
font-size: small;
padding-bottom: 0px;
margin: 0px 0px 0px 0px;
padding-top: 0px;
list-style-type: decimal;
border-left: 1px solid #006699;
border-right: 1px solid #006699;
border-top: 1px solid #006699;
border:1px solid #006699;
border-bottom: 1px solid #006699;
margin-top:10px;
}
/*------------------------------------end of css------------------------*/
在修改过程中,起先是边看源代码边修改相应的样式,那真叫一个累。
后来使用firefox的dom查看器插件,的确方便多了,还能 wysiwyg真是不错:)
以下是我从网上copy&assemble的css样式表:
/*------------------------------------cut from here------------------------*/
body {
margin:0px 0px 0px 0px;
background-color: #ffffff
background-attachment:fixed;
background-repeat:repeat-y;
background-position: left;
/* font-family:Fixedsys; */
}
a { color: #000099; text-decoration: none;}
a:link { color: #336600; text-decoration: none; }
a:visited { color: #3366ff; text-decoration: none; }
a:active { color: #000099; }
a:hover { color: #000000;text-decoration: underline;background-color : #ffff99;}
h1 {
margin: 0px;
padding: 0px;
}
h2 {
margin: 0px;
padding: 0px;
}
h3 {
margin: 5px;
padding: 5px;
border-bottom: 1px solid #000000;
border-left: 0px solid #006699;
}
hr {
border:1px solid #F5F9FD;
}
input {
font-size: 8pt;
border: 1px solid #8cacbb;
color: Black;
background-color: white;
vertical-align: middle;
margin-bottom: 1px; /* IE bug fix */
padding: 0.1em;
}
td {
color:#006699;
font-size: small;
font-weight:normal;
}
.title {
font-size: large;
color: #336600;
font-weight:bold;
text-align:center;
padding-top:10px;
padding-left:10px;
}
.dotted_area {
color:#006699;
background-color: #F5F9FD;
font-size: small;
font-weight:normal;
line-height:130%;
border-left: 1px dotted #006699;
border-right: 2px dotted #006699;
border-top: 1px dotted #006699;
border:1px dotted #006699;
border-bottom: 2px dotted #006699;
padding:5px;
margin-bottom:5px;
margin-left:5px;
text-indent: 2pt;
}
.solid_area {
color:#006699;
background-color: #F5F9FD;
font-size: small;
font-weight:normal;
line-height:130%;
border-left: 1px solid #006699;
border-right: 2px solid #006699;
border-top: 1px solid #006699;
border-bottom: 2px solid #006699;
padding:5px;
margin-bottom: 5px;
margin-left: 5px;
text-indent: 2pt;
}
.powered {
color:#999999;
font-size:large;
font-weight:normal;
border-top:1px dotted #006699;
line-height:140%;
padding:2px;
margin-top:10px;
text-align:center;
background:none;
}
textarea {
border: 1px solid #8cacbb;
color: Black;
background-color: white;
padding: 0.1em;
}
.postFoot {
color:#003366;
font-size:small;
font-weight:normal;
background:#FFF;
margin-bottom:5px;
border-bottom:1px dotted #006699;
}
.post {
color:#003366;
font-size:medium;
font-weight:normal;
line-height:130%;
padding-bottom:3px;
padding-top:3px;
padding-left:3px;
padding-right:3px;
margin-bottom:10px;
margin-top:5px;
margin-right:10px;
}
.postText {
color:#006699;
font-size: small;
font-weight:normal;
line-height:130%;
padding:5px;
margin-bottom: 5px;
margin-left: 5px;
text-indent: 2pt;
}
#top {
padding : 10px;
background-color : #FFF;
color : #000;
border-bottom : 2px solid #8cacbb;
}
#main {
margin : 0px 190px 0px 200px;
background-color : #FFF;
padding : 5px;
border-left : 1px solid #8cacbb;
border-right : 1px solid #8cacbb;
border-bottom : 1px solid #8cacbb;
}
#leftmenu ul, #rightmenu ul
{
padding-right: 0px;
padding-left: 0px;
list-style-position: inside;
font-size: small;
padding-bottom: 0px;
margin: 0px 5px 0px 5px;
padding-top: 0px;
list-style-type: decimal;
}
#leftmenu, #rightmenu
{
padding-right: 0px;
padding-left: 0px;
list-style-position: inside;
font-size: small;
padding-bottom: 0px;
margin: 0px 0px 0px 0px;
padding-top: 0px;
list-style-type: decimal;
border-left: 1px solid #006699;
border-right: 1px solid #006699;
border-top: 1px solid #006699;
border:1px solid #006699;
border-bottom: 1px solid #006699;
margin-top:10px;
}
/*------------------------------------end of css------------------------*/
在修改过程中,起先是边看源代码边修改相应的样式,那真叫一个累。
后来使用firefox的dom查看器插件,的确方便多了,还能 wysiwyg真是不错:)