博客园CodingLife模板手机样式优化

博客园CodingLife模板手机样式优化:用博客园写笔记也有一段时间了,当我用手机浏览我的文章时感觉样式不太完美,主要是个人首页和文章详情的头部宽度太大,原本大屏右侧的模块放在文章下面后宽度和位置不太合适,刚好今天看到设置中可以上传自定义样式,于是写了一些样式来优化CodingLife模板,等下次有时间再继续优化,感兴趣的园友可以复制以下样式到你的页面定制CSS代码中,

/*author stumpx*/

#navigator {
    min-width: 1200px;
}

@media (max-width: 768px) {
    #navigator {
        min-width: auto;
    }
    body {
        background-size: auto 197px;
    }
    #blogTitle {
        width: 100%;
        background-size: 800px;
        background-position: 0px 20px;
        height: 197px;
    }
    #blogTitle h1 {
        width: 300px;
        left: 0;
        top: 33px;
    }
    #blogTitle h2 {
        display: none;
    }
    #navList {
        width: 100%;
    }
    #mainContent .day {
        border-left: none;
        border-right: none;
    }
    #mainContent .topicListFooter {
        height: auto;
        line-height: 0;
        font-size: 16px;
        margin: 20px 0;
        padding: 0 20px;
    }
    #sideBar {
        width: 100%;
        margin-left: 0;
    }
    #blog-calendar {
        /*display: none !important;*/
        padding: 10px 15px;
        border: 1px solid #dedede;
        border-left: none;
        border-right: none;
        background-color: white;
    }
    #profile_block,
    #widget_my_zzk,
    #widget_my_google,
    .div_my_zzk {
        border-left: none;
        border-right: none;
    }
    #blog-calendar .CalTitle td,
    #blog-calendar .CalTitle td a {
        text-align: center;
        line-height: 30px;
        background-color: white;
        color: black;
    }
    #sidebar_search_box input[type=text] {
        width: 188px !important;
        width: calc(100% - 115px) !important;
    }
    #sideBar .sidebar-block ul {
        border: none;
    }
    #sideBar .sidebar-block ul li {
        padding: 10px 20px;
    }
    #comment_form_container {
        border-left: none;
        border-right: none;
    }
    div.commentform input.author,
    div.commentform input.email,
    div.commentform input.url {
        width: 244px;
        width: calc(100% - 35px);
    }
    div.commentform textarea.comment_textarea {
        width: 100%;
    }
    #under_post_news {
        width: 100%;
        height: auto;
        padding: 15px 0;
        border-left: none;
        border-right: none;
        margin-top: 20px;
    }
    #cnblogs_c1 {
        padding: 0;
    }
    #cnblogs_c1 a,
    #cnblogs_c1 img,
    #cnblogs_c2 a,
    #cnblogs_c2 img {
        display: block;
        max-width: 100%!important;
        width: 100%!important;
        height: auto!important;
    }
    #under_post_kb {
        border-left: none;
        border-right: none;
    }
    #ad_t2 {
        margin-top: 20px;
        padding: 0 20px;
    }
    .c_ad_block {
        margin-top: 15px;
        padding: 0 15px;
    }
    #commentbox_opt .comment_btn {
        width: 50%;
        border: none;
        display: inline-block;
        line-height: 30px;
        text-align: center;
    }
    #commentbox_opt a {
        width: 45%;
        display: inline-block;
        padding-left: 0;
        text-align: center;
    }
    #comment_nav {
        padding: 5px 20px;
    }
    #green_channel {
        width: 100% !important;
        padding-left: 2px;
    }
    #green_channel a {
        margin-right: 4px;
    }
    #green_channel a:last-child {
        margin-right: 0;
    }
    #div_digg {
        margin-right: 0;
        width: 100%;
    }
    #div_digg .buryit {
        margin-left: 0;
        margin-right: 20px;
    }
    #div_digg .diggit {
        margin-left: 0;
        margin-left: 20px;
    }
    .sidebar-block h3 {
        font-size: 16px;
    }
    #cnblogs_post_body img {
        max-width: 100% !important;
    }
    .day .postTitle {
        font-size: 18px;
        line-height: 31px;
    }
    #topics .postTitle {
        font-size: 20px;
    }
    #myposts {
        margin-left: 0;
    }
    #myposts .myposts_title {
        font-size: 20px !important;
        padding: 0 20px;
    }
    #myposts .pager {
        margin-left: 10px;
    }
    #myposts .PostList {
        border-left: none;
        border-right: none;
    }
    #kb_block {
        padding: 0;
    }
    .c_ad_block a {
        border-bottom: 1px dashed #dedede;
    }
    #mainContent {
        margin-bottom: 20px;
    }
    #myposts .pager:empty {
        height: 0;
    }
    #blogCalendar :not(.CalTitle) a {
        display: block;
        background: #ff5e52;
        color: white;
    }
    #post_next_prev a.p_n_p_prefix {
        display: none;
    }
}

/*author stumpx*/
时间: 2024-11-07 15:30:59

博客园CodingLife模板手机样式优化的相关文章

修改博客园日历的默认样式

我们知道,博客园默认的日历样式是灰底的,有点丑. 我想把它改成类似于WIN10的样式. 上代码. #blogCalendar td{ color:#fff; } #blogCalendar td.CalOtherMonthDay{ color:gray; } #blogCalendar td a:link{ color:#fff; background-color:blue; border-radius:2px; } #blogCalendar th.CalDayHeader{ color:#f

【如何设置博客园好看的标题样式】

1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限.[博客园]->[设置]->[博客设置],点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷新一下,页面就会显示支持js代码 ,博客园也会在用户邮箱给你发送是否开通js权限的邮件. 2.添加css样式 我们在[管理]-->[设置]-->[博客设置]-->[页面定制CSS代码]中粘贴如下面的代码 #cnblogs_post_body { color: black

粗制博客园皮肤 SimoCoding CSS 样式 —— 轻 Flat 风格

1 #nav_next_page { 2 line-height: 40px; 3 } 4 #nav_next_page a { 5 -webkit-border-radius: 3px; 6 -moz-border-radius: 3px; 7 border-radius: 3px; 8 background-color: #515151; 9 height: 40px; 10 line-height: 40px; 11 color: #fff; 12 display: inline-bloc

如何设置博客园好看的标题样式

1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限.[博客园]->[设置]->[博客设置],点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷新一下,页面就会显示支持js代码 ,博客园也会在用户邮箱给你发送是否开通js权限的邮件. 2.添加css样式 我们在[管理]-->[设置]-->[博客设置]-->[页面定制CSS代码]中粘贴如下面的代码 #cnblogs_post_body { color: black

博客园设置自定义页面样式

首先是背景图片,这个修改对模版而言都是通用的 body { background:url('URL') no-repeat top center fixed;} 这里图片路径可以上传到博客本地图片,图片就有了网上路径 然后是正文模块在整体背景中的浮动 #home { margin:0px auto; width:1000px; } 一个控制模块顶部和背景距离 一个控制模块和宽度{当页面缩放的宽度远远小于你设定的宽度,右边搜索框及其他组件都会移动到底层,不利于使用,最好设置一个合适的宽度} 正文模

又又的博客园css模板

下面的"图片地址"中填背景图片的地址,"#home"中的opacity表示透明度. 填上图片地址后直接将下面的代码复制到css码中即可. body { color: #000; background: url(图片地址) fixed; background-size: 1300px; background-repeat: no-repeat; font-family: "Helvetica Neue",Helvetica,Verdana,Aria

博客园simplememory模板自定义背景代码

页面定制CSS代码 /*simplememory*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter tabl

博客园修改BlackLowKey皮肤样式,增加占屏比

#home { margin: 0 auto; width: 100%; } #sideBar { min-height: 200px; padding: 0 5px 0 5px; margin-left: 80%; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; word-break: break-all; _margin-left: 0; _width: 240px; padding-bottom:

博客园自定义样式

我现在的博客园首页暂时应该是一个女生背景,一些星星的悬浮飘扬 那么我们怎么来设置博客园的自定义的样式,而不是不个性的默认界面呢? 第一步:进入你的首页,打开管理 => 设置 第二步:我在博客皮肤中选择了SimpleMemory,这个皮肤相对来说要轻快.干净,更方便你来修改你的样式. 第三步:事实上你可以禁用默认CSS,这也是允许的,不过就会弄成这样 学过前端的同学应该知道不掺杂任何任何的CSS就会出现这样的情况,这是浏览器默认给定的样式,而不是博客园给的CSS默认样式(所以你已经禁用了博客园的默