马马虎虎搞个博客样式_html/css_WEB-ITnose-HTML-Tutorial-php.cn

马马虎虎搞个博客样式_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 11:56:42

Original

1207 Leute haben es durchsucht

弄了半个晚上的时间，总算马马虎虎搞好了博客的样式。

整个博客是蓝色的基调，比较激情，我喜欢。

比较郁闷的是，rightmenu 和 main都是position:absolute 布局的。要添加一个footer，还真是被恶心到不行，现在虽然做成了position:fixed的，但标签和随笔增多的时候，肯定会覆盖一部分内容。没有js权限，暂时先放着吧。

footer的代码：MyFooter部分直接插入了内联的Css样式，懒得修改了，过段时间肯定要把footer去掉。

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>

Nach dem Login kopieren

同时去掉了文章底部烦人的推广链接和广告banner。看着清净了不少。

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 }

Nach dem Login kopieren

博客主题部分的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 }

Nach dem Login kopieren