文件 日期 close 8.4 lib 竞赛 clas 要求 参数
最近好多人问我博客的页面设计模版,时间挺紧张的,赶着搞策划和学习。。。趁着现在放假写写吧~~~
全部过程都是在“管理->设置”中完成的,博客皮肤推荐使用Simple Memory,可以自适应,方便我们进行页面CSS定制
论如何改变自己的博客园,变得好不好看我就不敢保证了,也许会出现各种毛病QAQ
我自己是完全禁用掉了模板CSS
然后会发现,blog干净得很,一点样式都没有。
对于我们这种小白来说,从头到尾自己写一份完整的CSS代码是不现实的,这时候我们需要一份代码模板,拿模板来改就比较容易了。
网上会有一些人把自己的CSS代码公开出来,当然实际上你浏览别人的blog的时候,(对于Chrome浏览器)轻按F12,你可以在style那个小栏里找到该网页的CSS代码链接,或者似乎可以写个爬虫啥的来获取,下面是我写的Python爬虫代码,轻松获取~~~
- #!/usr/bin/env python
- #-*- coding:utf-8 -*-
- import urllib2
- resp=urllib2.urlopen(‘http://www.cnblogs.com/ECJTUACM-873284962/‘)
- html=resp.read()
- print html
我之前的CSS代码:
- /*公用*/
- body {
- font-size:15px;
- padding:0;
- margin:0;
- font-family:"微软雅黑","宋体",Arial;
- background:#205424 url(‘https://i.loli.net/2017/08/15/59923c58cc40f.jpg‘) no-repeat top center fixed;
- min-width:1200px;
- }
- #home {
- opacity: 0.95;
- filter: alpha(opacity=95);
- box-shadow:0 0 10px #000;
- margin:40px auto;
- width:1200px;
- background:#fff;
- overflow:auto;
- border:solid 1px #fff;
- }
- /*段落*/
- .postBody p,.postCon p {
- margin:7px 0;
- line-height:24px;
- }
- h1 {
- margin:0;
- }
- h3 {
- font-size:15px;
- font-weight:bold;
- }
- /*超链接*/
- a {
- color:#464646;
- text-decoration:none;
- }
- a:hover {
- text-decoration:underline;
- }
- a:visited,a:hover {
- color:#464646;
- }
- ul {
- list-style:none;
- margin:0;
- padding:0;
- }
- image {
- border:none;
- }
- #header {
- padding:20px;
- }
- /*博客标题*/
- #blogTitle,#blogTitle a {
- font-weight:bold;
- color:#666;
- }
- #blogTitle .title {
- margin-top:10px;
- height:100px;
- line-height:100px;
- font-size:36px;
- padding-left:120px;
- background:#fff url(‘https://i.loli.net/2017/08/02/598187babf39e.gif‘) no-repeat;
- }
- .headermaintitle {
- }#blogTitle,#blogTitle a:hover {
- text-decoration:none;
- }
- /*子标题*/
- .subtitle {
- padding-left:30px;
- font-size:14px;
- color:#999;
- font-weight:normal;
- margin:10px 0;
- }
- /*导航栏*/
- #navigator {
- font-size:16px;
- height:48px;
- background:#FFAAD5;
- text-align:center;
- margin-top:20px;
- margin-bottom:20px;
- }
- #navList li {
- margin:0;
- line-height:48px;
- display:inline-block;
- float:left;
- }
- #navList li:hover {
- background:#6DA47D;
- }
- #navList li a {
- padding:0 30px;
- text-decoration:none;
- line-height:48px;
- border:0;
- color:#fff;
- display:-moz-inline-box;
- display:inline-block;
- }
- .blogStats {
- height:48px;
- color:#fff;
- line-height:48px;
- }
- #main {
- padding:20px;
- }
- /*左边*/
- #sideBarMain {
- padding:0 10px 0 0;
- background:#fff;
- margin:0 0 20px 0;
- width:190px;
- font-size:12px;
- line-height:22px;
- }
- #sideBarMain a {
- color:#666;
- }
- #leftcontentcontainer {
- color:#666;
- }
- .newsItem {
- color:#666;
- }
- /*公告*/
- #profile_block {
- margin-top:0px;
- line-height:24px;
- text-align:left;
- }
- /*主面板*/
- #mainContent {
- margin-top:0px;
- padding-top:0px;
- padding-right:0px;
- background:#fff;
- padding-bottom:0px;
- float:right;
- width:960px;
- padding-left:0px;
- }
- /*每日文章列表*/
- .day {
- background:#fff;
- padding:0;
- margin:0 0 20px 0;
- }
- /*博客标题*/
- .postTitle a {
- color:#464646;
- }
- .postTitle {
- padding-bottom:10px;
- font-size:20px;
- font-weight:bold;
- color:#464646;
- background:url(‘http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif‘) no-repeat 0 3px;
- padding-left:30px;
- }
- .dayTitle {
- display:none;
- }
- /*摘要*/
- .c_b_p_desc {
- padding:10px;
- line-height:24px;
- color:#888;
- }
- .c_b_p_desc a {
- color:#888;
- }
- .c_b_p_desc a:hover {
- text-decoration:none;
- border-bottom-width:1px;
- border-bottom-style:dotted;
- }
- /*右侧图片*/
- .desc_img {
- margin-left:10px;
- border:solid 1px #fff;
- box-shadow:0 0 10px #aaa;
- }
- /*博文页*/
- #topics .post {
- background:#fff;
- }
- .postCon {
- padding:10px 20px 0 20px;
- }
- .postDesc {
- margin:0 30px;
- margin-bottom:2px;
- padding:8px 0px;
- font-size:12px;
- color:#aaa;
- background:#fff;
- text-align:right;
- }
- .postDesc a {
- color:#AAA;
- }
- .postBody {
- padding:0;
- }
- /*google搜索框*/
- #google_q,#q {
- height:22px;
- width:120px;
- border:solid 1px #ccc;
- box-shadow:inset 0 0 3px #ddd;
- border-radius:4px;
- }
- /*搜索按钮*/
- .btn_my_zzk {
- font-family:‘Microsoft Yahei‘;
- border:none;
- height:26px;
- width:60px;
- padding:1px;
- font-size:14px;
- cursor:pointer;
- position:relative;
- vertical-align:middle;
- display:inline-block;
- background:#FFAAD5;
- border-radius:4px;
- color:#fff;
- }
- .btn_my_zzk:hover {
- background:#6DA47D;
- }
- /*评论按钮*/
- #btn_comment_submit {
- border:none;
- height:48px;
- width:120px;
- }
- /*评论按钮*/
- .comment_btn {
- font-family:‘Microsoft Yahei‘;
- border:none;
- height:48px;
- width:120px;
- font-size:18px;
- cursor:pointer;
- position:relative;
- vertical-align:middle;
- display:inline-block;
- background:#FFAAD5;
- color:#fff;
- }
- #btn_comment_submit:hover {
- background:#6DA47D;
- }
- /*评论标题*/
- .feedback_area_title {
- padding:10px;
- font-size:24px;
- font-weight:bold;
- color:#55895B;
- border-bottom:solid 6px #FFAAD5;
- }
- .feedbackListSubtitle {
- font-size:12px;
- color:#888;
- }
- .feedbackListSubtitle a {
- color:#888;
- }
- .comment_quote {
- background:#FCFAAC;
- padding:15px;
- border:1px solid #CCC;
- }
- #commentform_title {
- color:#55895B;
- background-image:none;
- background-repeat:no-repeat;
- margin-bottom:10px;
- padding:10px 20px 10px 10px;
- font-size:24px;
- font-weight:bold;
- border-bottom:solid 6px #55895B;
- }
- /*评论框*/
- #comment_form {
- margin:10px 0;
- padding:0;
- }
- .commentform {
- margin:10px 0;
- padding:10px 20px;
- background:#fff;
- }
- /*评论输入域*/
- #tbCommentBody {
- font-family:‘MIcrosoft Yahei‘;
- margin-top:10px;
- width:940px;
- max-width:940px;
- min-width:940px;
- background:white;
- color:#333;
- border:2px solid #fff;
- box-shadow:inset 0 0 8px #aaa;
- padding:10px;
- height:120px;
- font-size:14px;
- min-height:120px;
- }
- /*评论条目*/
- .feedbackItem {
- font-size:14px;
- line-height:24px;
- margin:10px 0;
- padding:20px;
- background:#F2F2F2;
- box-shadow:0 0 5px #aaa;
- }
- .feedbackListSubtitle {
- font-weight:normal;
- }
- /*分类页*/
- .entrylist {
- padding:10px 20px;
- background:#fff;
- }
- .entrylistItem {
- margin:10px 0;
- padding:10px;
- }
- .entrylistPosttitle {
- font-size:18px;
- font-weight:bold;
- background:url(‘http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif‘) no-repeat 0 3px;
- padding-left:30px;
- }
- .entrylistPostSummary {
- padding:10px;
- }
- .entrylistItemPostDesc {
- font-size:12px;
- color:#999;
- padding-left:40px;
- }
- /*尾部*/
- #footer {
- font-size:12px;
- margin:20px;
- padding:12px;
- text-align:center;
- background:#FFAAD5;
- color:#DDD;
- font-size:14px;
- }
- /*文章内图片*/
- #cnblogs_post_body p img {
- margin:10px;
- }
- /*顶一下*/
- .diggnum {
- font-size:28px;
- color:#FFFFFF;
- font-family:‘Microsoft Yahei‘;
- }
- #div_digg .diggnum {
- line-height:100px;
- }
- .diggit {
- float:left;
- width:340px;
- height:256px;
- background:url(‘http://images.cnblogs.com/cnblogs_com/zhien-aa/859075/o_215836877z8yhb8xbfydgb.gif‘) no-repeat;
- background-position:0 0;
- text-align:center;
- cursor:pointer;
- }
- .diggit:hover {
- background-position:-128px 0;
- }
- /*踩一下(园友反映,这个有点“邪恶”,呵呵,其实是我没来得及设计这个背景图片,就暂时把它隐藏了……可以去掉这句话)*/
- .buryit {
- display:none;
- }
- .diggword {
- display:none;
- }
- /*green_channel*/
- #green_channel {
- text:align:right;
- background:#6DA47D;
- padding-left:20px;
- font-weight:normal;
- font-size:15px;
- width:920px;
- border:none;
- color:#fff;
- padding:20px;
- border-radius:4px;
- }
- /*最新评论*/
- #myposts .PostList {
- font-size:14px;
- line-height:24px;
- margin:10px 0;
- padding:20px;
- background:#F2F2F2;
- box-shadow:0 0 5px #aaa;
- }
- #myposts .postTitl2 a {
- color:#6DA47D;
- }
- #ZjmainstayCnblogsSWFTags{
- overflow: visible;
- position: absolute;
- right: 10px;
- top: 735px;
- width: 160px;
- z-index: 10000;
- }
- body{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;}
- A{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;}
- #MagicArray{
- /* Firefox 4 */
- -moz-transition-property:width height bottom right;
- -moz-transition-duration:1s;
- /* Safari and Chrome */
- -webkit-transition-property:width height bottom right;
- -webkit-transition-duration:1s;
- /* Opera */
- -o-transition-property:width height bottom right;
- -o-transition-duration:1s;
- position: fixed;
- bottom:107px;
- right: 108px;
- width: 0px;
- height: 0px;
- text-align: center;
- z-index:2;
- }
我现在的CSS代码,大部分参考我的挚友swm_sxt(大神)
下面贴出现在的CSS源码:
- #site_nav_under {
- display: none;
- }
- .c_ad_block, .ad_text_commentbox {
- display: none;
- margin: 0;
- padding: 0;
- }
- #ad_under_google {
- height: 0;
- overflow: hidden;
- }
- #ad_under_google a {
- display: none;
- }
- @charset "utf-8";
- /* CSS Document */
- /**************************************************
- 第一部分:所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。
- 如果不符合你皮肤的要求,你可以在后面通过更好的优先级覆盖着这些样式,但是
- 你不能删除这些样式。
- **************************************************/
- #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 {
- background:url(https://i.loli.net/2017/08/15/59923c58cc40f.jpg) no-repeat fixed;
- background-size:cover;
- color:#000;
- font-family: "微软雅黑","verdana","ms song","宋体","Arial", "Helvetica", "sans-serif";
- font-size: 15px;
- min-height: 101%;
- width:75em;
- margin-left:auto;
- margin-right:auto;
- z-index:0;
- }
- #Uleft, #Uright,#Dleft, #Dright{
- /* Firefox 4 */
- -moz-transition-property:top;
- -moz-transition-duration:1s;
- /* Safari and Chrome */
- -webkit-transition-property:top;
- -webkit-transition-duration:1s;
- /* Opera */
- -o-transition-property:top;
- -o-transition-duration:1s;
- position: fixed;
- width: 80px;
- height: 80px;
- line-height: 500px;
- text-align: center;
- z-index:1;
- }
- #Uleft{
- width: 80px;
- height: 80px;
- top:-60px;
- left: 50px;
- }
- #Uright{
- width: 110px;
- height: 110px;
- top: -75px;
- right: 50px;
- }
- #Dleft{
- bottom:10px;
- left: 10px;
- width: 200px;
- height: 200px;
- }
- #Dright{
- bottom:-50px;
- right: 0px;
- width: 200px;
- height: 250px;
- }
- #MagicArray{
- /* Firefox 4 */
- -moz-transition-property:width height bottom right;
- -moz-transition-duration:1s;
- /* Safari and Chrome */
- -webkit-transition-property:width height bottom right;
- -webkit-transition-duration:1s;
- /* Opera */
- -o-transition-property:width height bottom right;
- -o-transition-duration:1s;
- position: fixed;
- bottom:107px;
- right: 108px;
- width: 0px;
- height: 0px;
- text-align: center;
- z-index:2;
- }
- #Tab1{
- -moz-transition-property:fontSize width height;
- -moz-transition-delay:0.8s;
- -webkit-transition-property:fontSize width height;
- -webkit-transition-delay:0.8s;
- -o-transition-property:fontSize width height;
- -o-transition-delay:0.8s;
- color:#8B0A50;
- position: fixed;
- font-size: 0px;
- text-align: center;
- z-index:3;
- font-weight:500;
- text-shadow:
- -1px 0 #7A67EE,
- 1px #7A67EE,
- 1px 0 #7A67EE,
- -1px #7A67EE;
- }
- ::selection{background:#698B22;color:#FFF;}
- ::-moz-selection{background#698B22;color:#FFF;}
- body{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;}
- A{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;}
- input{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;}
- wait{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;}
- input{outline:medium;}
- /*
- http://fq.wc.lt//up/1499566113.cur
- http://fq.wc.lt//up/1499565578.cur
- http://fq.wc.lt//up/1499564884.cur
- */
- /*鼠标*/
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- fieldset, img {
- border: 0;
- }
- ul {
- word-break: break-all;
- }
- li {
- list-style: none;
- }
- h1, h2, h3, h4, h5, h6 {
- font-size: 100%;
- font-weight: normal;
- }
- a:link {
- color:black;
- text-decoration:none;
- }
- a:visited {
- color:#111;
- text-decoration: none;
- }
- a:hover {
- color: #7B68EE;
- -moz-border-radius: 9px;
- -khtml-border-radius: 9px;
- -webkit-border-radius: 9px;
- border-radius: 9px;
- transition: all 0.4s linear 0s;
- }
- a:active {
- color: black;
- text-decoration: none;
- }
- .clear {
- clear: both;
- }
- /*****第二部分结束*******************************/
- /**************************************************
- 第三部分:各个页面元素的样式。你可以根据需要随意的更改,并不会牵扯到其他
- 的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮
- 肤公共的部分。而每个页面特有的部分会有相应的注释和说明。
- **************************************************/
- /*****home和头部开始**************************/
- #home {
- margin: 0 auto;
- width:95%;
- min-width: 60em;
- }
- #header {
- padding-bottom: 0.4em;
- margin-top: 0.8em;
- }
- #blogTitle {
- height: 7em;
- clear: both;
- border:1px solid #000;
- -moz-border-radius: 11px;
- -khtml-border-radius: 11px;
- -webkit-border-radius: 11px;
- border-radius: 12px;
- -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
- text-shadow:1px 1px 1px #e9f3e8
- }
- #blogTitle h1 {
- font-size: 300%;
- font-weight: bold;
- margin-left: 1em;
- margin-top: 0.4em;
- width: 50%;
- float: left;
- }
- #blogTitle h2 {
- margin-left: 6em;
- line-height: 1.5em;
- width: 50%;
- float: left;
- text-shadow:-1px 0 #ddd,
- 1px #ddd,
- 1px 0 #ddd,
- -1px #ddd;
- }
- #blogLogo {
- float: right;
- }
- #navigator {
- /* background-color: black;
- height: 30px;
- clear: both;*/
- margin-top:0.3em;
- height: 2em;
- clear:both;
- border:1px solid #999;
- -moz-border-radius: 11px;
- -khtml-border-radius: 11px;
- -webkit-border-radius: 11px;
- border-radius: 11px;
- -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
- background:#FFF;
- opacity: 0.60;
- }
- #navList {
- min-height: 1.5em;
- float: left;
- }
- #navList li {
- float: left;
- }
- #navList a {
- display: block;
- padding-left:0.5em;
- padding-right:0.5em;
- line-height:2em;
- float: left;
- text-align: center;
- border-right: 1px solid #999;
- }
- #navList a:link, #navList a:visited, #navList a:active {
- /* color: #ccc;*/
- }
- #navList a:hover {
- color: #7B68EE;
- padding-left:0.8em;
- padding-right:0.8em;
- }
- .blogStats {
- float: right;
- font-size:0.8em;
- color: #000;
- margin-top: 0.9em;
- margin-right: 0.2em;
- text-align: right;
- }
- /*****home和头部结束**************************/
- /*****主页文章列表开始**************************/
- #main{
- width: 100%;
- min-width: 70em;
- text-align: left;
- background:#FFF5EE;
- opacity: 0.90;
- }
- #mainContent .forFlow{
- margin-left: 12em;
- float: none;
- width: auto;
- }
- #mainContent {
- min-height: 18em;
- padding: 0px 0px 10px 0;
- *padding-top:10px;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- overflow: hidden;
- word-break: break-all;
- float: right;
- margin-left: -26em;
- width: 100%
- }
- .day {
- min-height: 10px;
- _height: 10px;
- margin-bottom: 20px;
- padding-bottom: 5px;
- }
- .dayTitle {
- width: 100%;
- color: #666;
- font-weight: bold;
- line-height: 1.5em;
- font-size: 90%;
- margin-top: 3px;
- margin-bottom: 10px;
- clear:both;
- border-bottom: 2px solid #e9f3e8;
- text-align:center;
- }
- .postTitle {
- font-size: 150%;
- font-weight: bold;
- /*border-bottom: 1px solid #9DAAF4;*/
- float: right;
- line-height: 1.5em;
- width: 100%;
- clear:both;
- text-shadow:-3px 3px 3px #999
- }
- .postTitle a:link, .postTitle a:visited, .postTitle a:active {
- color: #000;
- transition: all 0.4s linear 0s;
- }
- .postTitle a:hover {
- margin-left: 10px;
- color: #7B68EE;
- text-decoration: none;
- text-shadow:-13px 3px 3px #999
- }
- .postCon {
- float: right;
- line-height: 1.5em;
- width: 100%;
- clear:both;
- padding: 10px 0;
- }
- .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;
- padding-right: 10px;
- }
- .postDesc a:hover {
- color: #7B68EE;
- text-decoration: none;
- }
- .postSeparator {
- clear: both;
- height: 1px;
- border-top: 1px dotted #666;
- width: 100%;
- clear:both;
- float: right;
- margin: 0 auto 15px auto;
- }
- .diggit{
- text-align: center;
- width:50px;
- height:40px;
- background:url(http://fq.wc.lt//up/1503755899.png);
- background-size:100% 100%;
- }
- .buryit{
- font-size:0px;
- width:0;
- height:0;
- }
- .burynum{
- font-size:0px;
- width:0;
- height:0;
- }
- /*****主页文章列表结束**************************/
- /*****侧边栏开始********************************/
- #sideBar {
- width: 14em;
- min-height: 14em;
- padding: 0px 0px 0px 5px;
- float: left;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- overflow: hidden;
- word-break: break-all;
- font-size:0.7em;
- opacity:0.85;
- }
- .counter{
- }
- .notice{
- font-size:xx-small;
- }
- .btn_my_zzk{
- display: inline-block;
- font-size: 24px;
- cursor: pointer;
- text-align: center;
- text-decoration: none;
- outline: none;
- color: #fff;
- background-color: #a55b97;
- border: none;
- border-radius: 15px;
- box-shadow: 0 4px #999;
- }
- .newsItem .catListTitle {
- display: none;
- }
- .newsItem {
- padding: 15px 0 5px 0px;
- font-weight:bold;
- font-size:14px;
- margin-bottom: 8px;
- }
- /**日历控件样式开始**/
- #calendar {
- width: 14em;
- }
- #calendar .Cal {
- width: 100%;
- line-height: 1.5em;
- }
- .Cal {/**日历容器table**/
- border: none;
- color: #111;
- }
- #calendar table a:link, #calendar table a:visited, #calendar table a:active {
- font-weight: bold;
- }
- #calendar table a:hover {
- color: #7B68EE;
- text-decoration: none;
- background-color: #7B68EE;
- }
- .CalTodayDay{/**今天日期样式**/
- color: #EE82EE;
- }
- #calendar .CalNextPrev a:link,#calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/
- font-weight: bold;
- background-color: #7B68EE;
- }
- .CalDayHeader{
- border-bottom:1px solid #ccc;
- }
- .CalTitle{/**日历年月头部样式**/
- width:100%;
- background:#FFF;
- color:black;
- border-bottom:1px solid #666;
- }
- /**日历控件样式结束**/
- .catListTitle {
- font-weight: bolder;
- font-family:STCaiyun;
- color: #B03060;
- line-height: 2em;
- font-size: 150%;
- margin-top: 50px;
- margin-bottom: 10px;
- border-bottom: 1px solid #e9f3e8;
- text-align: center;
- }
- .catListComment {
- line-height: 1.5em;
- }
- .divRecentComment {
- color: #666;
- margin-bottom:1em;
- }
- .c_b_p_link_desc{
- color: #666;
- font-size: 30%;
- margin-bottom:1.5em;
- }
- #sideBarMain ul {
- line-height: 1.5em;
- }
- .catListEssay{
- font-weight: bolder;
- }
- .catListTag{
- font-size: 90%;
- font-weight: bolder;
- }
- .catList{
- font-weight: bolder;
- }
- .catListFeedback{
- font-weight: bolder;
- }
- .catListView{
- font-weight: bolder;
- }
- .recent_comment_title{
- font-weight: bolder;
- }
- .recent_comment_body{
- font-size: 30%;
- }
- .recent_comment_author{
- color:#666;
- font-size: 30%;
- }
- /*****侧边栏结束********************************/
- /****查看文章页面开始*************************/
- #topics {
- width: 100%;
- min-height: 18em;
- padding: 0px 0px 10px 0;
- float: left;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- overflow: hidden;
- word-break: break-all;
- }
- #topics .postTitle {
- font-size: 200%;
- font-weight: bold;
- border-bottom: 1px solid #999;
- float: left;
- line-height: 1.5em;
- width: 100%;
- text-align: center;
- }
- .postBody {
- padding: 5px 2px 5px 5px;
- line-height: 1.5em;
- color: #000;
- border-bottom: 1px solid #8686FF;
- }
- #EntryTag {
- color: #000;
- }
- #EntryTag a {
- margin-left: 5px;
- }
- #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
- color: #000;
- }
- #EntryTag a:hover {
- color: #7B68EE;
- }
- #topics .postDesc {
- float: right;
- width: 100%;
- font-size:0.9em;
- text-align: right;
- padding-right: 5px;
- color: #000;
- margin-top: 5px;
- }
- .feedback_area_title {
- font-weight: bold;
- margin-top: 20px;
- border-bottom: 1px solid #8686FF;
- margin-bottom: 10px;
- padding-left: 8px;
- }
- .louzhu {
- background:transparent url(‘/images/icoLouZhu.gif‘) no-repeat scroll right top;
- padding-right:16px;
- }
- .layer{
- font-family:STFangsong;
- font-size:15px;
- padding-left: 8px;
- }
- .feedbackListSubtitle {
- margin-left: 10px;
- color: #666;
- font-size:0.9em;
- }
- .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
- font-weight:bold;
- color: #666;
- font-weight: normal;
- }
- .feedbackListSubtitle a:hover {
- color: #7B68EE;
- text-decoration: none;
- }
- .feedbackManage {
- width: 160px;
- text-align: right;
- float: right;
- }
- .feedbackCon {
- font-weight:bold;
- border-bottom: 1px solid #ccc;
- padding: 15px 18px 20px 50px;
- min-height: 35px;
- _height: 35px;
- margin-bottom: 1em;
- line-height: 1.5em;
- width:80%;
- }
- #divRefreshComments {
- text-align: right;
- margin-bottom: 10px;
- }
- .commenttb {
- width: 320px;
- }
- .cnblogs_code{
- }
- .comment_actions{
- margin-right:30px;
- font-size:16px;
- font-family:STFangsong;
- }
- .comment_digg{
- font-weight:bold;
- margin-right:10px;
- font-size:15px;
- font-family:STXinwei;
- }
- .comment_bury{
- font-weight:bold;
- margin-right:10px;
- font-size:15px;
- font-family:STXinwei;
- }
- /****查看文章页面结束************************
- /****列表页面开始******************************/
- .entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/
- font-size: 110%;
- font-weight: bold;
- border-bottom: 1px solid #8686FF;
- text-align: right;
- padding-bottom: 3px;
- padding-right: 10px;
- }
- .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 solid #666;
- line-height: 1.5em;
- width: 100%;
- padding-left: 5px;
- }
- .entrylistPosttitle a:hover {
- text-decoration: none;
- }
- .entrylistPostSummary {
- margin-top: 5px;
- padding-left: 5px;
- margin-bottom: 5px;
- }
- .entrylistItemPostDesc {
- padding-left: 50px;
- text-align: right;
- color: #666;
- }
- .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
- color: #666;
- }
- .entrylistItemPostDesc a:hover {
- color: #7B68EE;
- }
- .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 solid #ccc;
- clear: both;
- min-height: 1.5em;
- _height: 1.5em;
- padding-top: 10px;
- padding-left: 5px;
- padding-right: 5px;
- margin-bottom: 5px;
- }
- .postTitl2 {
- float: left;
- font-size:0.9em;
- color: #666;
- }
- .postDesc2 {
- color: #666;
- float: right;
- margin-right: ;
- font-size:0.9em;
- }
- .postText2 {
- clear: both;
- }
- .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;
- }
- /****列表页面结束******************************/*/
- /****相册页面开始******************************/
- .divPhoto {
- border: 1px solid #ccc;
- 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;
- min-height: 15px;
- _height: 15px;
- border-top: 1px solid black;
- margin-top: 10px;
- padding-top: 10px;
- margin-bottom: 10px;
- }
- /*留言查看页面的个人信息*/
- .personInfo {
- margin-bottom: 20px;
- }
- /*留言分页区域*/
- .pages {
- text-align: right;
- }
- /*****留言页面结束*****************************/
- /*****第三部分结束*******************************/
- /**************************************************
- 第四部分:文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如:
- 如果作者的文章用有p标签,则可通过这个对这些文章中的p标签进行设置。前面
- 的".postBody"明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。
- 建议这个不要设置过于详细的细节。因为,一些样式,一篇文章比较适合的话,
- 并不能保证所有的文章都适合。
- **************************************************/
- /*文章内部常用标签格式*/
- .postBody {
- line-height: 1.5em;
- }
- .postBody p,.postCon p{
- text-indent: 2em;
- 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{
- text-decoration:none;
- }
- .postCon a:link,.postCon a:visited,.postCon a:active{
- text-decoration:none;
- }
- .postBody ul,.postCon ul{
- margin-left:2em;
- }
- .postBody li,.postCon li{
- list-style-type:disc;
- margin-bottom:1em;
- }
- .postBody blockquote{
- background:url(‘/images/comment.gif‘) no-repeat 25px 0px;
- padding:10px 60px 5px 60px;
- min-height:35px;
- _height:35px;
- line-height:1.6em;
- color:#333;
- }
- /*****第四部分结束*******************************/
当初我也是拿别人代码当模板来改的,不过现在可能有点面目全非了。
那么现在,我们可以把这份别人的模板改成自己的风格,基本上CSS代码里参数的命名都是按元素的英文命名的,挺好认的,或者你可以把这个参数改改,看看哪里发生了变化就知道这个参数在说啥了。当你想定向寻找一个元素在CSS中各项参数的位置时,你可以寻找一下这个元素在html代码里面的位置(在Chrome浏览器中可以借助Ctrl+Shift+C来寻找元素),看一下这个元素的id和class的名字是啥,在CSS代码里找找就行了。
界面的颜色除了有black、white这类设定好的颜色之外,你可以找一个RGB颜色对照表,想要啥就丢啥。
遇到有啥不会调的参数,基本搜一下“CSS+参数名字”就有详细介绍,毕竟这东西网上教程很多。
比方说延迟变换可以用transition-property来做,而文字阴影效果是text-shadow,这些都是我自己在做的时候折腾了好一会的。
Chrome(我不知道其他浏览器能不能)有个好处是你修改了个参数,他会立刻应用变换,这样就可以调到舒心再贴进自定义CSS代码里。
还有就是你最好把CSS代码备份一下,不然要是误删了就GG,博主亲身体验T_T。
这期间你可能需要一些好看的图片什么的,我自己资源是P站找的(Pixiv),一些比较普通的就百度图片吧,然后开个画图,开个Photoshop自己改改就能用了,图床直接用博客园就行了(开个不发布的随笔就能存图了,图片上右键可以获得图片链接地址)。
这时候自己的blog已经比较好看了是不是啊?
把这个放在第二是我按自己的操作顺序来的。
没啥特别要说的,就是如果你需要存储的是cur之类的放不进图床的文件可以找个直链网站,这里推荐小白的文件床(http://fq.wc.lt/)或者是sm.ms(https://sm.ms/),不知道是哪位大神弄的,太良心了。
- body{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;}
- A{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;}
折腾了一段时间以后应该对html也有了一定的了解,首先在博客园管理的设置页中把JS代码权限申请了,批准挺快的,然后就可以为所欲为了(雾)……
首先你可以在侧边栏加点计数器,加点flash动画什么的,这些一般是找别人做好的,链过来或者抄过来就行。
要搞js的话建议在网上找个教程看看,看它个把小时就基本能拿来用用了(其实跟c++挺像的,应该说java跟c++比较像吧),以后遇到不会的回去查查就行。
我拿js做的大概就是加了一些小挂件,比方说左上角的西瓜是获取main元素之后把opacity(透明度)调到0就行,结合一下onmouseover、onmouseout什么的就能做出浮动效果,还是很赞的。
尝试着做个推荐按钮,一直做不成,估计是被过滤了。发邮件去问博客园那边也是这是禁止的。
目录我大多数还是参考swm_sxt,做的太良心了,perfect!
我的公告栏代码:
来源: http://www.bubuko.com/infodetail-2337512.html