急いでブログスタイルを作る_html/css_WEB-ITnose

半晩かけてやっとブログのスタイルが完成しました。

ブログ全体がブルー基調になっていて、より情熱的で気に入っています。

さらに憂鬱なのは、rightmenu と main の両方がposition:absolute でレイアウトされていることです。フッターを付けるのが本当に嫌なんですが、今はposition:fixedになっていますが、タグやエッセイが増えてくると必ず内容の一部が被ってしまいます。 js 権限がないので、今回はそのままにしておきます。

フッター コード: MyFooter 部分はインライン CSS スタイルを直接挿入します。私はそれを修正するのが面倒なので、しばらくしたら必ずフッターを削除します。

1 <div id="myFooter" style="position: fixed; bottom: 0px; width: 100%; height: 85px; background: none repeat scroll 0px 0px rgb(0, 120, 216);">2   <p id="myFootText">知识改变命运，码农拯救人生</p>3   <p id="myFootCopy">ohmygirl@2014</p>4 </div>

同時に、記事の下部にある迷惑なプロモーションリンクと広告バナーは削除されました。見た目がずっときれいになりました。

1 /* advertise */2 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{3     width:0;4     height:0;5     display:none;6     overflow:hidden;7 }

ブログテーマ部分のCSSコードは次のとおりです:

  1 /* header */  2 #header{  3     border:1px solid #044e97;  4     background:#0078d8 repeat;  5     box-shadow:0 0 5px;  6 }  7 h1{  8     background: none;  9     border-bottom:0 none; 10 } 11 #main{ 12     margin-top:5px; 13     border-right:0 none; 14     min-height:1040px; 15 } 16 #Header1_HeaderTitle{ 17     color:white; 18     font-weight:bold; 19     font-size:24px; 20     text-shadow:1px 5px 1px #000; 21 } 22 #Header1_HeaderTitle:hover{ 23     color:#fca021; 24 } 25 #tagline{ 26     color:white; 27 } 28 p.date{ 29     background: none repeat scroll 0 0 #0078d8; 30     border-bottom: 1px solid #aaa; 31     border-radius: 5px; 32     color: white; 33     font-size: 14px; 34     font-weight: bold; 35     margin: 10px 10px 0 50px; 36     padding: 10px; 37 } 38 .postFoot, p.postFoot{ 39     padding-bottom:2px; 40     border-bottom:1px solid #0078d8; 41 } 42 .postTitle{ 43     padding:5px 0; 44 } 45 .postTitle a{ 46     font-size:15px; 47     padding:2px 0; 48 } 49 .post h2{ 50     border-bottom: 1px dashed #0078d8; 51     font-size: 1em; 52     margin-top: 10px; 53     padding: 0 0 10px; 54 } 55 .c_b_p_desc_readmore:hover{ 56     color:#faa123; 57 } 58 #cb_post_title_url{ 59     font-size:18px; 60 } 61 #MySignature{ 62     border: 1px dashed #0078d8; 63     display: block; 64     padding: 5px; 65 } 66 #green_channel{ 67     border: 1px dashed #0078d8; 68 } 69  70 /* right menu */ 71 #rightmenu{ 72     border:1px solid #0078d8; 73     background:#0078d8; 74     border-radius:10px; 75 } 76 #rightmenu ul{ 77     background:white; 78 } 79 #rightmenu li{    80     background: none repeat scroll 0 0 #3385ff; 81     border: 1px solid #3385ff; 82     border-radius: 5px; 83     color: white; 84     margin: 10px; 85     padding: 5px; 86     width: 150px; 87 } 88 #rightmenu li a{ 89     color:white; 90     padding-left:10px; 91 } 92 #rightmenu li:hover{ 93     background:#317ef3; 94 } 95 #rightmenu h3{ 96     color:white; 97     padding:2px 0 5px 10px; 98     font-size:18px; 99     border:0 none;100 }101 102 #blog-calendar{103     background:white;104 }105 div.commentform{106     margin-bottom:100px;107 }108 /* advertise */109 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{110     width:0;111     height:0;112     display:none;113     overflow:hidden;114 }115 116 /* calendar */117 .Cal{118     border:0 none;119     width:100%;120     height:200px;121     font-size:14px;122 }123 .CalTitle{124     font-size:15px;125 }126 .CalTodayDay{127     background:#0078d8;128 }129 .CalTodayDay a u{130     color:#fc6700;131     text-decoration:none;132 }133 134 /* footer */135 #footer{136     display:none;137 }138 #myFooter{139     border:1px solid #044e97;140     box-shadow: 0 0 5px #044e97;141 }142 #myFootText{143     font-size:20px;144     color:white;145     width:100%;146     text-align:center;147     margin-top:10px;148 }149 #myFootCopy{150     font-size:15px;151     color:white;152     width:100%;153     text-align:center;154     margin-top:10px;155 }