博客园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