CSS修改完毕

修改这个页面花了整一个下午,现在的效果比较让自己满意了,对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真是不错:)
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页