首先到网上download一个网页模板【www.oswd.org】
然后选好自己的模板【最好是css设计的比较规范的模板】
进入保存html文件的目录,找到style.css文件
根据css文件和html文件的结构,将模板的对应部分整合到style.css中,需要更换的图片可以保存到自己的相册
然后上传修改后的style.css文件,到博客设置中修改子标题为:<原来的子标题><link id ="CustomCss" type ="text/css" rel ="stylesheet" href ="<上传的css文件目录>" / >,并且选中“禁用默认css”
附加自己修改后的css文件源码 由于是整合的两个css文件故源码比较乱,不过还好能凑合用**************************************************/ #EntryTag { margin-top: 20px; font-size: 9pt; color: gray; } .topicListFooter { text-align: right; margin-right: 10px; margin-top: 10px; } #divRefreshComments{ text-align: right; margin-right: 10px; margin-bottom: 5px; font-size: 9pt; } /*****第一部分结束*******************************/ /************************************************** 第二部:公共样式(全局样式)。公共会对所有页面的标签都起作用。这个部分你 可以随意的更改,并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤 模板所有页面的变化。因为它们是全局的。 **************************************************/ * { margin: 0; padding: 0; } html { height: 100%; } body { color: #464646; font-family:"微软雅黑", "verdana","ms song","Arial","Helvetica", "sans-serif"; font-size: 9pt; min-height: 101%; background:transparent url('/skins/summerGarden/images/bg.jpg') repeat-x; background-color: #FAF7EF; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } a:link { color: #464646; text-decoration: none; } a:visited { color: #464646; text-decoration: none; } a:hover { color: #4c4f8b; } a:active { color: #464646; text-decoration: none; } .clear { clear: both; } /*****第二部分结束*******************************/ /************************************************** 第三部分:各个页面元素的样式。你可以根据需要随意的更改,并不会牵扯到其他 的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮 肤公共的部分。而每个页面特有的部分会有相应的注释和说明。 **************************************************/ /*****home和头部开始*************************/ #home { margin: 0 auto; width:95%; min-width: 930px; position:relative; } #header { background: url('/skins/summerGarden/images/header.jpg') no-repeat right top; height:146px; padding-top:30px; } #blogTitle { height: 80px; clear: both; color:#4c4f8b; } #blogTitle a:link,#blogTitle a:visited,#blogTitle a:active{ color:#4c4f8b; } #blogTitle a:hover{ color:#ff6600; } #blogTitle h1 { font-size: 200%; font-weight: bold; line-height: 1.5em; margin-left: 1em; margin-top: 10px; width: 50%; float: left; } #blogTitle h2 { margin-left: 4em; line-height: 1.5em; width: 50%; float: left; } #lnkBlogLogo{ display:none; } #blogLogo { float: right; } #navigator { clear: both; } /*********导航Menu********/ #navList { float:left; font:normal 12px 'Trebuchet MS','Arial'; margin:0; padding:5px; background-image:url('https://images.cnblogs.com/cnblogs_com/whs475/141851/t_back.gif'); background-repeat:repeat-x; } #navList ul { float:left; line-height:32px; list-style:none; margin:0; } #navList li { display:inline; padding:0; margin:10px; width:70px; height:25px; } #navList li a { color:#FFFFFF; float:left; padding:0 3px 0 3px; text-decoration:none; font-size:14px; padding:0px 10px; } #navList li a:hover { background:url('https://images.cnblogs.com/cnblogs_com/whs475/141851/t_right.png') repeat-x; color:#00DFFF; font-weight:bold; } #navList li a img { border:none; margin:8px 4px 0 0; } .aHeaderXML img{ display:none; } /*随笔- 1 文章- 0 评论- 0*/ .blogStats { float: left; color: #444; margin-top: 8px 2px auto 10px; text-align: right; } /****导航Menu结束******/ /*****主页文章列表开始***/ #main{ width: 99%; min-width: 950px; text-align: left; } #mainContent .forFlow{ float: none; width: 750px; } #mainContent { min-height: 200px; padding: 0px 0px 10px 0; -o-text-overflow: ellipsis; overflow: hidden; float: right; width: 750px; } .day { min-height: 10px; _height: 10px; margin-bottom: 20px; padding-bottom: 15px; } .day:hover { min-height: 10px; _height: 10px; margin-bottom: 20px; padding-bottom: 15px; } .dayTitle { width: 100%; color: #6466b3; text-align:right; line-height: 1.5em; font-size:12px; margin-top: 3px; margin-bottom: 10px; clear:both; } .postTitle { text-align:center; margin: 0; padding: 0 0 10px 0; background: url("https://images.cnblogs.com/cnblogs_com/whs475/141851/r_lefth3.gif") repeat-x left bottom; font-weight: bold; font-size:16px; text-transform: lowercase; letter-spacing: -1px; } .postTitle a:link, .postTitle a:visited, .postTitle a:active { color: #6466b3; } .postTitle a:hover { color: #ff6600; } .postCon { margin: 10px 0 20px 0; padding: 0 0 10px 0; background: url("https://images.cnblogs.com/cnblogs_com/whs475/141851/r_lefth3.gif") repeat-x left bottom; text-transform: lowercase; letter-spacing: -1px; } .postCon:hover { background-color:#eee; font-size:14px; } .postDesc { float: right; width: 100%; clear:both; text-align: right; padding-right: 5px; color: #666; margin-top: 5px; } .postDesc a:link, .postDesc a:visited, .postDesc a:active { color: #666; } .postDesc a:hover { color: #F60; text-decoration: none; } .postSeparator { clear: both; height: 5px; width: 100%; clear:both; float: right; margin: 0 auto 15px auto; } /*****主页文章列表*********/ /*****侧边栏开始********/ #sideBar { width: 180px; min-height: 200px; padding: 20px 0 0px 5px; float: left; -o-text-overflow: ellipsis; overflow: hidden; color:#88866F; } .newsItem .catListTitle { display: none; } .newsItem { padding: 15px 0 5px 0px; margin-bottom: 8px; } /**日历控件样式开始**/ #calendar { width: 180px; } #calendar .Cal { width: 100%; line-height: 1.5em; } .Cal { /**日历容器table**/ border: none; color: #666; } #calendar table a:link, #calendar table a:visited, #calendar table a:active { font-weight: bold; } #calendar table a:hover { color: #6466b3; text-decoration: none; background-color: #ccddee; } .CalTodayDay{/**今天日期样式**/ color:#6466b3; border: dotted 1px #6466b3; } #calendar .CalNextPrev a:link,#calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/ font-weight: bold; } .CalDayHeader{ border-bottom:1px solid #ccc; } .CalTitle { /**日历年月头部样式**/ width:100%; color:#333; border-bottom:1px solid #666; } /**日历控件样式结束**/ #leftcontentcontainer { /*border-right:solid 1px White;*/ } /*.catListInteraction*background:url('https://images.cnblogs.com/cnblogs_com/whs475/141851/t_menubg.jpg') repeat-x;*/ #leftcontentcontainer div,#leftcontentcontainer div.mySearch div { width:180px; background: #faf7ef url("https://images.cnblogs.com/cnblogs_com/whs475/141851/r_box.png") no-repeat bottom left; padding:0px; margin:5px 0px; padding-bottom:10px; } #leftcontentcontainer div.mySearch { background-image:none; padding:0; margin:0; } #leftcontentcontainer div h3.catListTitle,#leftcontentcontainer div.mySearch div h3.catListTitle { height: 19px; background: #fff url("https://images.cnblogs.com/cnblogs_com/whs475/141851/r_boxtop.png") no-repeat; color: #000; font-size:16px; font-weight:bold; } #leftcontentcontainer div ul { text-align:center; margin: 10px; } #leftcontentcontainer div ul li { line-height: 26px; background: url("https://images.cnblogs.com/cnblogs_com/whs475/141851/t_li-line.gif") no-repeat bottom left; list-style: none } #leftcontentcontainer div ul li:hover { line-height: 26px; background-color:#E4F7FA; list-style: none } #leftcontentcontainer div ul li a { padding-left: 15px; text-decoration: none; background: url("https://images.cnblogs.com/cnblogs_com/whs475/141851/r_h3-bg.gif") no-repeat left; color:Black; } /*.catListInteraction*/ #leftcontentcontainer div ul li a:hover { text-align:center; text-decoration:none; color:#333; } #leftcontentcontainer input { max-width:80%; margin:auto 10%; } .catListTitle { font-weight: bold; line-height: 1.5em; font-size: 110%; margin-top: 15px; text-align: center; color:#6466b3; } .catListComment { line-height: 1.5em; } .divRecentComment { text-indent: 1em; } #sideBarMain ul { line-height: 1.5em; } /*****侧边栏结束******/ /****查看文章页面开****/ #topics { width: 100%; min-height: 200px; padding: 0px 0px 10px 0; float: left; -o-text-overflow: ellipsis; overflow: hidden; } #topics .postTitle { font-size: 130%; font-weight: bold; float: left; line-height: 1.5em; width: 100%; padding-left: 5px; margin-bottom:15px; } .postBody { padding: 5px 2px 5px 5px; line-height: 1.5em; color: #000; border-bottom: 1px solid black; } #EntryTag { } #EntryTag a { margin-left: 5px; } #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active { color: #4c4f8b; } #EntryTag a:hover { color: #6466b3; } #topics .postDesc { float: right; width: 100%; text-align: right; padding-right: 5px; color: #666; margin-top: 5px; } .feedback_area_title { font-weight: bold; margin-top: 20px; border-bottom: 1px solid #333; margin-bottom: 10px; padding-left: 8px; } .louzhu { background:transparent url('/skins/summerGarden/images/icoLouZhu.gif') no-repeat scroll right top; padding-right:16px; } .feedbackListSubtitle { color: #666; } .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active { color: #666; font-weight: normal; } .feedbackListSubtitle a:hover { color: #f60; text-decoration: none; } .feedbackManage { width: 200px; text-align: right; float: right; } .feedbackCon { border-bottom: 1px solid #ccc; background: url('/skins/summerGarden/images/comment.gif') no-repeat 5px 0px; padding: 15px 18px 10px 40px; min-height: 35px; _height: 35px; margin-bottom: 1em; line-height: 1.5em; width:95%; } #divRefreshComments { text-align: right; margin-bottom: 10px; } .commenttb { width: 320px; } .feedbackListSubtitle b{ font-weight:normal; } /****查看文章页面开始*****/ /****列表页面开始*****/ .entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/ font-size: 110%; font-weight: bold; border-bottom: 1px solid #6466b3; text-align: right; padding-bottom: 3px; padding-right: 10px; color:#6466b3; } .entrylistDescription { color: #666; text-align: right; padding-top: 5px; padding-bottom: 5px; padding-right: 10px; margin-bottom: 10px; } .entrylistItem { min-height: 20px; _height: 20px; margin-bottom: 30px; padding-bottom: 5px; width: 100%; } .entrylistPosttitle { font-size: 110%; font-weight: bold; border-bottom: 1px dotted #6466b3; line-height: 1.5em; width: 100%; padding-left: 5px; } .entrylistPosttitle a:link,.entrylistPosttitle a:visited,.entrylistPosttitle a:active{ color:#6466b3; } .entrylistPosttitle a:hover { color:#4c4f8b; } .entrylistPostSummary { margin-top: 5px; padding-left: 5px; margin-bottom: 5px; } .entrylistItemPostDesc { text-align: right; color: #666; } .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active { color: #666; } .entrylistItemPostDesc a:hover { color: #f60; } .entrylist .postSeparator { clear: both; width: 100%; font-size: 0; line-height: 0; margin: 0; padding: 0; height: 0; border: none; } .pager { text-align: right; margin-right: 10px; } .PostList { border-bottom: 1px dotted #6466b3; clear: both; min-height: 1.5em; _height: 1.5em; padding-top: 10px; padding-left: 5px; padding-right: 5px; margin-bottom: 5px; } .postTitl2 { float: left; } .postDesc2 { color: #666; float: right; } .postText2 { clear: both; color: #666; } .pfl_feedback_area_title { text-align: right; line-height: 1.5em; font-weight: bold; border-bottom: 1px solid #666; margin-bottom: 10px; } .pfl_feedbackItem { border-bottom: 1px solid black; margin-bottom: 20px; } .pfl_feedbacksubtitle { width: 100%; border-bottom: 1px dotted #666; height: 1.5em; } .pfl_feedbackname { float: left; } .pfl_feedbackManage { float: right; } .pfl_feedbackCon { color: black; padding-top: 5px; padding-bottom: 5px; } .pfl_feedbackAnswer { color: #F40; text-indent: 2em; } .tdSentMessage { text-align: right; } .errorMessage { width: 300px; float: left; } .mySearch #q { height: 1.4em; width: 175px; } /****列表页面结*****/ /****相册页面开*****/ .divPhoto { border: 1px solid #6466b3; padding: 2px; margin-right: 10px; } .thumbDescription { color: #666; text-align: right; padding-top: 5px; padding-bottom: 5px; padding-right: 10px; margin-bottom: 10px; } /****相册页面开*****/ /*****留言页面开始******/ #footer { text-align: center; height: 41px; margin-top: 10px; background:url('/skins/summerGarden/images/footer.jpg') no-repeat 220px 0; padding-top:40px; } /*留言查看页面的个人信息*/ .personInfo { margin-bottom: 20px; } /*留言分页区域*/ .pages { text-align: right; } /*****留言页面结束*******/ /************************************************** 第四部分:文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如: 如果作者的文章用有p标签,则可通过这个对这些文章中的p标签进行设置。前面 的“.postBody”明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。 建议这个不要设置过于详细的细节。因为,一些样式,一篇文章比较适合的话, 并不能保证所有的文章都适合。 **************************************************/ /*文章内部常用标签格式*/ .postBody { line-height: 1.5em; color:#393939; font-size:14px; } .postBody p,.postCon p{ margin: 0 auto 1em auto; } .postBody h2{ font-size: 150%; margin: 15px auto 2px auto; font-weight:bold; } .postBody h3 { font-size: 120%; margin: 15px auto 2px auto; font-weight:bold; } .postBody h4{ font-size:110%; margin:15px auto 2px auto; font-weight:bold; color:#333; } .postBody h5{ font-size:100%; margin:15px auto 2px auto; font-weight:bold; color:#333; } .postBody a:link,.postBody a:visited,.postBody a:active{ color:#6466b3; text-decoration:underline; } .postBody a:hover{ color:#4c4f8b; } .postCon a:link,.postCon a:visited,.postCon a:active{ text-decoration:underline; } .postCon a:hover{ color:#4c4f8b; } .postBody ul,.postCon ul{ margin-left:2em; } .postBody li,.postCon li{ list-style-type:disc; margin-bottom:1em; } .postBody blockquote{ background:url('/skins/summerGarden/images/comment.gif')) no-repeat 25px 0px; padding:10px 60px 5px 60px; min-height:35px; _height:35px; line-height:1.6em; color:#333; } /****表单元素******/ input, textarea, select { background: #ccddee; border: 1px solid #FFFFFF; font: bold 13px Arial, Helvetica, sans-serif; color: #0F5B96; } input:focus, input:hover, textarea:focus, textarea:hover, select:focus, select:hover { color: #000; background: #E4F7FA; border: 1px solid #00DFFF; } /********Form Elements end********/
转载于:https://www.cnblogs.com/whs475/archive/2008/06/24/1229152.html