zoukankan      html  css  js  c++  java
  • 博客园皮肤(假装和别人不一样)

    我是一个不太会CSS和HTML的菜鸟(也不能说一点也不懂)。但是我也想拥有一个和别人不一样的皮肤。

    这个问题挣扎多遍以后,花了一个上午。我东搬西凑,弄了现在这个页面。

    虽然还是丑,虽然审美也不怎么样。但把代码记录下来。

      1 /*公用*/
      2 body {
      3 font-size: 15px;
      4 padding: 0;
      5 margin: 0;
      6 font-family: "微软雅黑";
      7 
      8 }
      9 
     10 /*段落*/
     11 .postBody p, .postCon p {
     12 margin: 7px 0;
     13 line-height: 24px;
     14 }
     15 
     16 a {
     17 color: #464646;
     18 text-decoration: none;
     19 }
     20 
     21 a:hover {
     22 text-decoration: underline;
     23 }
     24 
     25 a:visited, a:hover {
     26 color: #464646;
     27 }
     28 
     29 ul {
     30 list-style: none;
     31 margin: 0;
     32 padding: 0;
     33 }
     34 
     35 image {
     36 border: none;
     37 }
     38 
     39 /*博客标题*/
     40 
     41 #blogTitle,#blogTitle a, #blogTitle h2 {
     42 
     43 font-weight: bold;
     44 color: #CC6500;
     45 float: left;
     46 margin-left: 120px;
     47 margin-top:10px; }
     48 
     49 #blogTitle h2 {
     50 font-size: small; 
     51 letter-spacing:3px;
     52 }
     53 
     54 #blogTitle .title {
     55 height: 100px;
     56 line-height: 100px;
     57 font-size: 36px;
     58 background: #fff url('') no-repeat;
     59 }
     60 
     61 #Header1_HeaderTitle {
     62 font-family: '宋体';
     63 font-size: x-large;
     64 }
     65 
     66 #blogTitle, #blogTitle a:hover {
     67 text-decoration: none;
     68 }
     69 /*子标题*/
     70 .subtitle {
     71 padding-left: 30px;
     72 font-size: 14px;
     73 color: #999;
     74 font-weight: normal;
     75 margin: 10px 0;
     76 }
     77 /*导航栏*/
     78 #navigator {
     79 z-index: 1;
     80 height: 100%;
     81 font-size: 16px;
     82  170PX;
     83 background: #55895B;
     84 text-align: center;
     85 position: fixed;
     86 }
     87 
     88 #navList li {
     89 margin: 0;
     90 line-height: 48px;
     91 }
     92 
     93 #navList li:hover {
     94 background: #6DA47D;
     95 }
     96 
     97 #navList li a {
     98 padding: 0 30px;
     99 text-decoration: none;
    100 line-height: 48px;
    101 border: 0;
    102 color: #fff;
    103 display: -moz-inline-box;
    104 display: inline-block;
    105 }
    106 
    107 .blogStats {
    108 color: #fff;
    109 line-height: 48px;
    110  65px;
    111 margin-left: 50px;
    112 }
    113 
    114 #main {
    115 margin-left: 10px;
    116 padding: 20px;
    117 }
    118 /*左边*/
    119 #sideBarMain {
    120 padding: 0 10px 0 0;
    121 background: #fff;
    122 margin: 0 0px 20px 0;
    123  80%;
    124 font-size: 12px;
    125 line-height: 22px;
    126 }
    127 
    128 /*公告*/
    129 #profile_block {
    130 margin-top: 0px;
    131 line-height: 24px;
    132 text-align: left;
    133 }
    134 /*主面板*/
    135 #mainContent {
    136 margin-left: 200px;
    137 margin-top: 100px;
    138 padding: 20px;
    139 }
    140 /*每日文章列表*/
    141 .day {
    142 background: #fff;
    143 padding: 0;
    144 margin: 0 0 20px 0;
    145 }
    146 /*博客标题*/
    147 .postTitle a {
    148 color: #464646;
    149 }
    150 
    151 .postTitle {
    152 padding-bottom: 10px;
    153 font-size: 20px;
    154 font-weight: bold;
    155 color: #464646;
    156 background: url('') no-repeat 0 3px;
    157 padding-left: 30px;
    158 }
    159 
    160 .dayTitle {
    161 display: none;
    162 }
    163 /*摘要*/
    164 .c_b_p_desc {
    165 padding: 10px;
    166 line-height: 24px;
    167 color: #888;
    168 }
    169 
    170 .c_b_p_desc a {
    171 color: #888;
    172 }
    173 
    174 .c_b_p_desc a:hover {
    175 text-decoration: none;
    176 border-bottom- 1px;
    177 border-bottom-style: dotted;
    178 }
    179 /*右侧图片*/
    180 .desc_img {
    181 margin-left: 10px;
    182 border: solid 1px #fff;
    183 box-shadow: 0 0 10px #aaa;
    184 }
    185 /*博文页*/
    186 #topics .post {
    187 background: #fff;
    188 }
    189 
    190 .postCon {
    191 padding: 10px 20px 0 20px;
    192 }
    193 
    194 .postDesc {
    195 margin: 0 30px;
    196 margin-bottom: 2px;
    197 padding: 8px 0px;
    198 font-size: 12px;
    199 color: #aaa;
    200 background: #fff;
    201 text-align: right;
    202 }
    203 
    204 .postDesc a {
    205 color: #AAA;
    206 }
    207 
    208 .postBody {
    209 padding: 0;
    210 }
    211 /*google搜索框*/
    212 #google_q, #q {
    213 height: 22px;
    214  120px;
    215 border: solid 1px #ccc;
    216 box-shadow: inset 0 0 3px #ddd;
    217 border-radius: 4px;
    218 }
    219 /*搜索按钮*/
    220 .btn_my_zzk {
    221 font-family: 'Microsoft Yahei';
    222 border: none;
    223 height: 26px;
    224  60px;
    225 padding: 1px;
    226 font-size: 14px;
    227 cursor: pointer;
    228 position: relative;
    229 vertical-align: middle;
    230 display: inline-block;
    231 background: #55895B;
    232 border-radius: 4px;
    233 color: #fff;
    234 }
    235 
    236 .btn_my_zzk:hover {
    237 background: #6DA47D;
    238 }
    239 /*评论按钮*/
    240 
    241 #btn_comment_submit {
    242 border: none;
    243 height: 48px;
    244  120px;
    245 }
    246 /*评论按钮*/
    247 .comment_btn {
    248 font-family: 'Microsoft Yahei';
    249 border: none;
    250 height: 48px;
    251  120px;
    252 font-size: 18px;
    253 cursor: pointer;
    254 position: relative;
    255 vertical-align: middle;
    256 display: inline-block;
    257 background: #55895B;
    258 color: #fff;
    259 }
    260 
    261 #btn_comment_submit:hover {
    262 background: #6DA47D;
    263 }
    264 /*评论标题*/
    265 .feedback_area_title {
    266 padding: 10px;
    267 font-size: 24px;
    268 font-weight: bold;
    269 color: #55895B;
    270 border-bottom: solid 6px #55895B;
    271 }
    272 
    273 .feedbackListSubtitle {
    274 font-size: 12px;
    275 color: #888;
    276 }
    277 
    278 .feedbackListSubtitle a {
    279 color: #888;
    280 }
    281 
    282 .comment_quote {
    283 background: #FCFAAC;
    284 padding: 15px;
    285 border: 1px solid #CCC;
    286 }
    287 
    288 #commentform_title {
    289 color: #55895B;
    290 background-image: none;
    291 background-repeat: no-repeat;
    292 margin-bottom: 10px;
    293 padding: 10px 20px 10px 10px;
    294 font-size: 24px;
    295 font-weight: bold;
    296 border-bottom: solid 6px #55895B;
    297 }
    298 /*评论框*/
    299 #comment_form {
    300 margin: 10px 0;
    301 padding: 0;
    302 }
    303 
    304 .commentform {
    305 margin: 10px 0;
    306 padding: 10px 20px;
    307 background: #fff;
    308 }
    309 /*评论输入域*/
    310 #tbCommentBody {
    311 font-family: 'MIcrosoft Yahei';
    312 margin-top: 10px;
    313  940px;
    314 max- 940px;
    315 min- 940px;
    316 background: white;
    317 color: #333;
    318 border: 2px solid #fff;
    319 box-shadow: inset 0 0 8px #aaa;
    320 padding: 10px;
    321 height: 120px;
    322 font-size: 14px;
    323 min-height: 120px;
    324 }
    325 /*评论条目*/
    326 .feedbackItem {
    327 font-size: 14px;
    328 line-height: 24px;
    329 margin: 10px 0;
    330 padding: 20px;
    331 background: #F2F2F2;
    332 box-shadow: 0 0 5px #aaa;
    333 }
    334 
    335 .feedbackListSubtitle {
    336 font-weight: normal;
    337 }
    338 /*分类页*/
    339 .entrylist {
    340 padding: 10px 20px;
    341 background: #fff;
    342 }
    343 
    344 .entrylistItem {
    345 margin: 10px 0;
    346 padding: 10px;
    347 }
    348 
    349 .entrylistPosttitle {
    350 font-size: 18px;
    351 font-weight: bold;
    352 background: url('') no-repeat 0 3px;
    353 padding-left: 30px;
    354 }
    355 
    356 .entrylistPostSummary {
    357 padding: 10px;
    358 }
    359 
    360 .entrylistItemPostDesc {
    361 font-size: 12px;
    362 color: #999;
    363 padding-left: 40px;
    364 }
    365 /*尾部*/
    366 #footer {
    367 font-size: 12px;
    368 margin: 20px;
    369 padding: 12px;
    370 text-align: center;
    371 /*background: #55895B;*/
    372 color: #000000;
    373 font-size: 14px;
    374 }
    375 /*文章内图片*/
    376 #cnblogs_post_body p img {
    377 margin: 10px;
    378 }
    379 /*顶一下*/
    380 .diggnum {
    381 font-size: 28px;
    382 color: #6DA47D;
    383 font-family: 'Microsoft Yahei';
    384 }
    385 
    386 #div_digg .diggnum {
    387 line-height: 100px;
    388 }
    389 
    390 .diggit {
    391 float: left;
    392  128px;
    393 height: 128px;
    394 background: url('') no-repeat;
    395 background-position: 0 0;
    396 text-align: center;
    397 cursor: pointer;
    398 }
    399 
    400 .diggit:hover {
    401 background-position: -128px 0;
    402 }
    403 
    404 .buryit {
    405 display: none;
    406 }
    407 
    408 .diggword {
    409 display: none;
    410 }
    411 
    412 #green_channel {
    413 text: align:right;
    414 background: #6DA47D;
    415 padding-left: 20px;
    416 font-weight: normal;
    417 font-size: 15px;
    418  920px;
    419 border: none;
    420 color: #fff;
    421 padding: 20px;
    422 border-radius: 4px;
    423 }
    424 /*最新评论*/
    425 #myposts .PostList {
    426 font-size: 14px;
    427 line-height: 24px;
    428 margin: 10px 0;
    429 padding: 20px;
    430 background: #F2F2F2;
    431 box-shadow: 0 0 5px #aaa;
    432 }
    433 
    434 #myposts .postTitl2 a {
    435 color: #6DA47D;
    436 }
    437 /*隐藏 公告 时间 等辅助功能*/
    438 .newsItem {
    439 display: none;
    440 }
    441 
    442 #sideBarMain {
    443 display: none;
    444 }
    445 
    446 #leftcontentcontainer {
    447 display: none;
    448 }
    View Code

     

    我只是个菜鸟。而且还是个说不得的妹子。

    我经不起批评。不喜勿喷。

    如果,你真心指导,我一定毕恭毕敬,虚心受教。

    如果,你要是和我一样,也是菜鸟,欢迎一起交流,迷茫的路上可以一起同行。

    或者,你有好的学习方法, 希望不吝赐教,万分感激;

  • 相关阅读:
    Membership角色与权限管理
    Virtual PC 2007 下载地址
    Support Web Application Projects
    CSS使用高级技巧20则
    apache和IIS共用80端口
    Dreamweaver扩展(插件)使用
    CSS横向菜单下拉显示子菜单
    openPNE创建项目
    基础AJAX
    连接数据库
  • 原文地址:https://www.cnblogs.com/srx121201/p/7448514.html
Copyright © 2011-2022 走看看