首页 > > 网页制作 > css >

博客园代码定制

2019-08-14 09:58:37来源：博客园阅读 ()

博客园代码定制

版本：2019-08-11

本文基于Simple Memory模板，且已获取CSS和JS权限，此版本并非最终版本。

如有错误请指出，代码开源可以修改完善，仅用于学习交流，转载时请注明出处！

本文记录了对博客园主页优化的尝试过程以及相关的CSS源码。

在此之前默认已在“管理-选项”部分设定好了每页显示的内容，在“管理-设置”部分进行下列设置。

Part 1 定制CSS代码（body部分）

首先应该解决网页端缩放和手机端图片显示不全的问题，这里采用手机端“强制使用网页端”的模式来修改body部分的设置。

通过Dream Weaver查看全大小下的(min-width, max-width)设置自适应格式，并设置宽度为100%。

1 body{
2 width: 100%;
3 min-width: 740px;
4 max-width: 865px;
5 }

其余部分的优化可以借助浏览器开发者模式下修改元素逐步完善（借助“选择元素”和“元素突出显示”可以节省阅览代码的时间），再将“修改”部分的属性复制到博客园相应位置。

设置博客主标题的字体格式（鼠标经过）。

1 /* bundle-simplememory.min.css (1, 561) */
2 a:link {
3     color: rgb(102, 8, 116);
4     text-decoration: none;
5 }

设置博客主标题的字体格式。

1 /* bundle-simplememory.min.css (1, 1047) */
2 #blogTitle h1 a {
3     color: rgb(102, 8, 116);
4 }

设置文章标题的字体格式，各页面将继承这个格式（鼠标经过）。

1 /* bundle-simplememory.min.css (1, 2597) */
2 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
3     color: rgb(102, 8, 116);
4     transition: all .4s linear 0s;
5 }

设置文章标题的字体格式，各页面将继承这个格式。

1 /* bundle-simplememory.min.css (1, 2659) */
2 .postTitle a:hover {
3     margin-left: 30px;
4     color: rgb(102, 8, 116);
5     text-decoration: none;
6 }

设置post部分的字体样式，并取消原模板自带的“时钟”图案。

 1 /* bundle-simplememory.min.css (1, 2833) */
 2 .postDesc {
 3     font-size: 13px;
 4     background: none;
 5     color: rgb(0,127,0);
 6     float: left;
 7     width: 100%;
 8     clear: both;
 9     text-align: left;
10     padding-left: 0px;
11     padding-right: 5px;
12     margin-top: 0px;
13     line-height: 1.5;
14 }

设置昵称、园龄等字体格式。

1 /* bundle-simplememory.min.css (1, 3410) */
2 #sideBar a {
3     color: rgb(255, 0, 255);
4 }

设置背景颜色（透明度）。

1 /* bundle-simplememory.min.css (1, 253) */
2 body {
3     color: #000;
4     background-color: rgba(255, 255, 0, 0.1);
5     min-height: 101%;
6     font-family: bold;
7 }

设置公告、标签等box的透明度。

 1 /* bundle-simplememory.min.css (1, 722) */
 2 #home {
 3     margin: 0 auto;
 4     width: 65%;
 5     min-width: 950px;
 6     background-color: rgba(255, 225, 255, 0.5);
 7     padding: 30px;
 8     margin-top: 50px;
 9     margin-bottom: 50px;
10     box-shadow: 0px 6px 18px rgba(127,127,127,0.5);
11 }

设置公告、标签等box的阴影和位置。

 1 /* bundle-simplememory.min.css (1, 4334) */
 2 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
 3     background: #f8f8f8 !important;
 4     margin-bottom: 25px;
 5     margin-top: 25px;
 6     width: 225px;
 7     word-wrap: break-word;
 8     box-shadow: 0px 2px 6px rgba(127,127,127,0.5);
 9     box-sizing: border-box;
10     border: 10pt solid #f8f8f8 !important;
11     border-top-width: 5pt !important;
12 }

去除广告（推荐文章）。

1 /* blog-common.min.css (1, 18665) */
2 .c_ad_block {
3     margin-top: 10px;
4     line-height: 1.5;
5     display: none;
6 }

设置文章“推荐”一栏位于头像和“支持”中间，节省空间。

 1 /* blog-common.min.css (1, 18975) */
 2 #green_channel {
 3     padding: 10px 0;
 4     position: absolute;
 5     left: 180px;
 6     margin-bottom: 10px;
 7     margin-top: 10px;
 8     border: #c0c0c0 1px solid;
 9     font-size: 12px;
10     width: 350px;
11     text-align: center;
12 }

去除广告（最新IT新闻）。

1 /* blog-common.min.css (1, 21519) */
2 #ad_t2 {
3     margin-top: 5px;
4     line-height: 1.8;
5     display: none;
6 }

去除引用部分的自带图案，因模板而异。

1 /* bundle-simplememory.min.css (1, 15084) */
2 .postBody blockquote {
3     background: url('images/comment.gif') no-repeat 25px 0;
4     background-image: none;
5     min-height: 35px;
6     _height: 35px;
7     line-height: 1.6em;
8     color: #333;
9 }

设置导航栏的字体，改变字体，增加阴影。

1 /* bundle-simplememory.min.css (1, 1589) */
2 #navList a:link, #navList a:visited, #navList a:active {
3     color: rgb(0, 0, 0);
4     text-shadow: 0px 1px 1px rgba(255,255,0,0.5);
5     font-weight: bold;
6 }

页面仍有不完善之处，如部分图片在手机端显示不全，缩放后body部分是左对齐导致左右margin不对称不美观，title位置缺少背景图片，等等。（暂不打算完善）

Part 2 公告栏优化（bar部分）与数学公式支持

增加文字和图片。

1 欢迎来到阆苑祁寒的小屋，在这里可以尽情享受数学和物理的奇妙！
2 <div><img src="https://images.cnblogs.com/cnblogs_com/sxwlttsd/1497926/o_33012779.jpg" width="100" height="100"></div>

数学公式支持。（页首代码定制）

1 <script type="text/javascript" src="http://www.maths.nottingham.ac.uk/personal/drw/LaTeXMathML.js"></script>

还可以增加JS部件，以及更多内容。

博客园的源代码可自行查看。

原文链接:https://www.cnblogs.com/sxwlttsd/p/11324517.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：css媒体查询aspect-ratio宽高比在less中的使用

下一篇：css常见小问题（自己遇到的）

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签