视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
马马虎虎搞个博客样式_html/css
2020-11-27 15:56:04 责编:小采
文档

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

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

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

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

1 2 

知识改变命运,码农拯救人生

3

ohmygirl@2014

4

同时去掉了文章底部烦人的推广链接和广告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 }

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

下载本文
显示全文
专题