zoukankan      html  css  js  c++  java
  • blog界面自己写了css,参考了网站设计,想要的自己拿

    junhey这就把界面的代码公布下来,可以自己修改额~(ps:麻烦加个友链http://www.cnblogs.com/junhey/ 谢谢)

      1 /* 初始化样式 */
      2 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0px;    padding: 0px;    border: 0px none;    font-size: 100%;    vertical-align: baseline;}
      3 button, input, textarea { border: 1px solid #CCC; border-radius: 3px; font-family: inherit; padding: 0.428571rem;}
      4 dayTitle postTitle a{ text-decoration: none;}
      5 h1, h2, h3, h4, h5, h6 { clear: both;}
      6 ol, ul { list-style: outside none none;}
      7 a:focus { outline: thin dotted;}
      8 a { outline: medium none;color: #21759B; text-decoration: none;}
      9 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;}
     10 body{ font-size: 1rem;font-family: Helvetica,Arial,sans-serif;text-rendering: optimizelegibility;color: #444; margin-top: 2em;margin-bottom: 3.42857rem;background-color: #E6E6E6;}
     11 /* 标题样式 */
     12 #blogTitle h1 a, #blogTitle h2 a {color: #515151;display: inline-block;text-decoration: none;}
     13 #blogTitle h1, #blogTitle h2 {text-align: left;}
     14 #blogTitle h1 {font-size: 1.85714rem;line-height: 1.84615;margin-bottom: 0px;}
     15 #blogTitle h2 {font-weight: normal;font-size: 0.928571rem;line-height: 1.84615;color: #757575;}
     16 #home{ padding: 0px 2.85714rem;box-shadow: 0px 2px 6px rgba(100, 100, 100, 0.3); margin: 0px auto;max-width: 68.5714rem;overflow: hidden;background-color: #FFF;}
     17 #main{padding-top:2.57143rem;padding-bottom:2em;}
     18 /* 左边文章列表样式 */
     19 #mainContent{ float: left;width: 65.1042%; }
     20 .day,.entrylistItem{ padding-bottom: 2.57143rem;word-wrap: break-word;-moz-hyphens: auto;}
     21 .dayTitle{ font-size: 0.928571rem;line-height: 1.84615;color: #757575;clear: both;display:none; }
     22 .postTitle,.entrylistPosttitle,.postTitl2{ font-size: 1.57143rem;line-height: 1.2;font-weight: normal;border-bottom: 1px solid #D0D0D0;background-color: transparent; line-height: 1.84615;}
     23 .postCon,.entrylistPostSummary{ line-height: 1.71429;margin-top: 1em; }
     24 .postDesc,.entrylistItemPostDesc,.postDesc2{ font-size: 0.928571rem;clear: both;color: #757575;line-height: 1.84615;font-family: Helvetica,Arial,sans-serif;text-rendering: optimizelegibility; word-wrap: break-word; -moz-hyphens: auto;}
     25 
     26 .entrylist{ font-size: 1.8rem;line-height: 1.2;font-weight: normal;border-bottom: 1px solid #D0D0D0;background-color: transparent;line-height: 1.84615; }
     27 .c_b_p_desc{ font-size:16px; }
     28 .PostListTitle{font-size: 1.8rem;}
     29 
     30 /* 右边导航列表样式 */
     31 #sideBar{ float: right;width: 26.0417%; }
     32 .catListTag,.mySearch,.catListPostCategory,.catListArticleCategory,#topview_posts_wrap{-moz-hyphens: auto;margin-bottom: 2.57143rem;word-wrap: break-word;}
     33 #blog-sidecolumn h3{ margin-bottom: 0.857143rem; }
     34 #blog-sidecolumn li,#blog-sidecolumn p{font-size: 0.928571rem;line-height: 1.84615; white-space: nowrap;overflow: hidden;}
     35 
     36 .catListTag,.mySearch{-moz-hyphens: auto;margin-top: 2.57143rem;margin-bottom: 2.57143rem;word-wrap: break-word;}
     37     /* 搜索按钮样式 */
     38 .input_my_zzk{ width: 53.6667%; }
     39 .btn_my_zzk{ cursor: pointer;padding: 0.428571rem 0.714286rem;font-size: 0.785714rem;line-height: 1.42857;font-weight: normal;
     40 color: #7C7C7C;background-color: #E6E6E6;background-repeat: repeat-x;background-image: -moz-linear-gradient(center top , #F4F4F4, #E6E6E6);border: 1px solid #D2D2D2;border-radius: 3px;box-shadow: 0px 1px 2px rgba(64, 64, 64, 0.1); }
     41 
     42 
     43 /* 底部样式 */
     44 #footer{border-top: 1px solid #EDEDED;clear: both;font-size: 0.857143rem;max-width: 68.5714rem;margin-top: 1.71429rem;margin-left: auto;margin-right: auto;padding: 1.71429rem 0px;}
     45 /* 不显示的部分 */
     46 #navList{ display:none; }
     47 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{ display:none; }
     48 /* 导航样式 */
     49 .main-navigation ul.nav-menu,
     50     .main-navigation div.nav-menu > ul {
     51         border-bottom: 1px solid #ededed;
     52         border-top: 1px solid #ededed;
     53         display: inline-block !important;
     54         text-align: left;
     55         width: 100%;
     56     }
     57     .main-navigation ul {
     58         margin: 0;
     59         text-indent: 0;
     60     }
     61     .main-navigation li a,
     62     .main-navigation li {
     63         display: inline-block;
     64         text-decoration: none;
     65     }
     66     .main-navigation li a {
     67         border-bottom: 0;
     68         color: #6a6a6a;
     69         line-height: 3.692307692;
     70         text-transform: uppercase;
     71         white-space: nowrap;
     72     }
     73     .main-navigation li a:hover {
     74         color: #000;
     75     }
     76     .main-navigation li {
     77         margin: 0 40px 0 0;
     78         margin: 0 2.857142857rem 0 0;
     79         position: relative;
     80     }
     81     .main-navigation li ul {
     82         display: none;
     83         margin: 0;
     84         padding: 0;
     85         position: absolute;
     86         top: 100%;
     87         z-index: 1;
     88     }
     89     .main-navigation li ul ul {
     90         top: 0;
     91         left: 100%;
     92     }
     93     .main-navigation ul li:hover > ul {
     94         border-left: 0;
     95         display: block;
     96     }
     97     .main-navigation li ul li a {
     98         background: #efefef;
     99         border-bottom: 1px solid #ededed;
    100         display: block;
    101         font-size: 11px;
    102         font-size: 0.785714286rem;
    103         line-height: 2.181818182;
    104         padding: 8px 10px;
    105         padding: 0.571428571rem 0.714285714rem;
    106         width: 180px;
    107         width: 12.85714286rem;
    108         white-space: normal;
    109     }
    110     .main-navigation li ul li a:hover {
    111         background: #e3e3e3;
    112         color: #444;
    113     }
    114     .main-navigation .current-menu-item > a,
    115     .main-navigation .current-menu-ancestor > a,
    116     .main-navigation .current_page_item > a,
    117     .main-navigation .current_page_ancestor > a {
    118         color: #636363;
    119         font-weight: bold;
    120     }
  • 相关阅读:
    MySQL教程详解之存储引擎介绍及默认引擎设置
    最简单MySQL教程详解(基础篇)之多表联合查询
    Postfix常用命令和邮件队列管理(queue)
    备份数据库
    Docker基本命令
    ASCII码表
    mysql基本了解
    顺序对列,环形队列,反向链式栈
    进制的标识符
    多个线程的时间同步
  • 原文地址:https://www.cnblogs.com/junhey/p/4244099.html
Copyright © 2011-2022 走看看