自定义博客样式
2018-09-24 11:22
162 查看
自定义博客样式
用了一天时间简单的更改了下博客的样式,前端技术不甚了解,暂且粗制至此。
有一些问题没解决,还有些功能没实现。
模板使用博客园的官方模板:En_summerGarden。基于此模板进行自定义。
前后对比:
定制 CSS
#container pre code { display: block !important; } body { font-size: 12px; font-family: sans-serif; min-height: 100%; background: url("https://images.pexels.com/photos\ /1438254/pexels-photo-1438254.jpeg?auto=compress\ &cs=tinysrgb&dpr=2&h=650&w=940") no-repeat center center fixed; border-radius: 6px; background-size: cover; } #header { background: inherit; height: 146px; padding-top: 30px; } #blogTitle { height: 80px; clear: both; color: #333; /*border-bottom: 1px solid #333;*/ background-color: #eff1f7d1; } div#post_detail { font-size: 16px; } p { font-size: 16px; } #topics .postDesc { font-size: 10px; } #sideBar { background: #fffdfaed; border-radius: 6px; } .postBody { padding: 15px 10px 10px 15px; background: #fffdfa; border-radius: 6px; } /* new post,Admin color*/ #navList a:link { color: #a9b5b7; } #navList li { margin-right: 4px; color: #a9b5b7; } /*博客列表页面--------------*/ /*博客列表的部分效果*/ #mainContent .forFlow { border-radius: 6px; padding: 10px 15px 10px 15px; } /* 去掉博客列表的底部图片*/ #footer { background: unset; } /*使博客园文章列表分块*/ .day { background: #fffdfa; padding: 0px 10px 0px 10px; border-radius: 6px; border-bottom: unset; } /* end block ------------*/ /* 让日历居中*/ #sideBar { text-align: center; } /*调整日历排版*/ #sideBarMain ul { line-height: 1.75; padding-top: 10px; } /*隐藏“发表评论”这段字*/ #commentform_title { display: none; } /* 隐藏评论编辑框的功能条*/ .commentbox_title_right { display: none; } /* 隐藏“评论内容” 这段字*/ .commentbox_title_left { visibility: hidden; } /* 调整评论编辑框大小*/ .textarea#tbCommentBody { width: 55%; height: 40%; } /* 隐藏编辑框的退出按钮(我觉得他没什么用,简单的挺好*/ #commentbox_opt a { display: none; } /*隐藏文章底部新闻部分*/ div#under_post_news { display: none; } /*隐藏底部文本*/ div#under_post_kb { display: none; } /* 将文章底部的文本域调整为条状*/ div.commentform textarea { width: 55%; height: 45%; } /*可能的话,用 js 每次评论随机生成颜色(待实现)*/ /*评论的头部的颜色*/ .feedback_area_title { background: #83a; border-radius: 3px; } /*评论块的颜色*/ .feedbackCon { background: #83a; border-radius: 6px; } /* 因为对比度的问题,需要根据动态生成 的 块 的颜色更改合适的评论颜色 (待实现)*/ /*暂时将评论文本设置为白色*/ .blog_comment_body { color: white; } /*从日期档案入口进入的页面----------*/ .entrylistItem { background: #fffdfa; border-radius: 6px; padding: 15px 10px 15px 10px; } /*end block -------------------*/ /* 刚递交的评论的样式 */ .bq_post_comment { background: #83a; color: white; border-radius: 4px; } /*下一页背景色*/ .topicListFooter { background-color: #2e6ab1; border-radius: 3px; } /*下一页颜色*/ #nav_next_page a { color: white; } /将上一页,下一页颜色改为白色*/ #homepage1_HomePageDays_homepage_bottom_pager .pager a:visited { color: white; } /*去掉 下一页,上一页的边框*/ #homepage1_HomePageDays_homepage_bottom_pager .pager a { border:unset; color: white; } /*隐藏顶部的 上一页 一栏*/ #homepage_top_pager { display: none; } /*评论区表单的样式*/ div#comment_form_container { background-color: #fffdfa; padding:15px; border-radius: 5px; } /*评论提交表单中 “昵称” 后的 用户名 样式 */ div.commentform input.author, div.commentform input.email, div.commentform input.url { background-image: unset; padding: 4px 4px 4px 10px; font-size: 15px; }
相关文章推荐
- 自定义博客样式
- 用CSS自定义博客链接字体及链接下划线的样式
- 用CSS自定义博客链接字体及链接下划线的样式
- CnBlogs自定义博客样式
- 测试CSDN博客是否支持自定义文本样式
- 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)
- 自定义CSDN博客CSS样式
- 本博客自定义样式表单大揭秘
- 通过自定义样式优化博客界面
- 博客园自定义——关于自己博客样式的自定义
- 使用sed把纯文本文章转化为样式自定义的CSDN博客文章
- Android ProgressBar 自定义样式(七),仿真QQ聊天、网易新闻客户端加载图片Loading
- 扩展GridView控件(10) - 自定义分页样式
- Extjs4自定义按钮样式
- Windows Phone Button控件样式自定义
- [cnblogs镜像]页面定制CSS代码初探(二):自定义h2标题样式 添加阴影 添加底色 等
- Android自定义按钮样式
- unity中自定义鼠标样式
- CSS3自定义滚动条样式 -webkit-scrollbar
- 自定义IE浏览器滚动条样式