经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
如何简单美化自己的博客（二）——主界面样式及点击特效
来源：cnblogs　　作者：是卡门啊　　时间：2020/12/14 17:04:13　　对本文有异议

博客主体样式更改

  1. 首先选一个框架模板，在此模板基础上进行样式调整。这里我选择darkgreentrip
  2. 在页面定制CSS代码中插入如下代码：
  1. #home {
  2.     margin: 0 auto;
  3.     width: 80%;/*原始65*/
  4.     min-width: 980px;/*页面顶部的宽度*/
  5.     background-color: rgba(245, 245, 245, 0.7);
  6.     padding: 30px;
  7.     margin-top: 50px;
  8.     margin-bottom: 50px;
  9.     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
  10.     border-radius: 12px;  /*调节边框圆度*/
  11. }
  12. /*boby调节背景图片*/
  13. body {
  14.     background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606476513478&di=92fdb162c0020c2b43d20fa5ffae2159&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20191015%2F15%2F1571124483-pUBXSkAZba.jpg");  /*背景图片链接*/
  15.     background-position:center left;
  16.     background-size: cover;
  17.     background-repeat: no-repeat;
  18.     background-attachment:fixed;
  19. }
  20. #blogTitle {
  21.     height: 100%;  /*高度*/
  22.     border-radius: 12px;
  23.     clear: both;
  24.     background-color: #cccccc69;   /*博客标题的背景*/
  26. }
  27. #blogTitle h1 {
  28.     font-size: 36px;
  29.     color::#fae4e4;
  30.     font-weight: bold;
  31.     line-height: 1.8em;/*原始 1.6em*/
  32.     margin-top: 10px;/*原始 15px */
  33. }
  34. #blogTitle h2 {
  35.     font-weight: normal;
  36.     font-size: 17px; /*原始 16px ；font-size: 1.0rem;*/
  37.     line-height: 1.8;
  38.     color:  #462b2e;
  39.     font-weight: bold;
  40.     text-align: right;
  41.     float: right;
  42.     margin-top: auto;
  43. }
  44. #navigator{
  45.     border-radius: 7px;
  46.     background-color: rgba(201, 49, 49, 0.6);          /*标题栏下的颜色*/
  47. }
  48. #navList a:link, #navList a:visited, #navList a:active{
  49.     color: #FFFFFF;
  50.     font-size: 18px;
  51.     font-weight: bold;
  52. }
  53. .blogStats{
  54.     color: #eee;
  55. }
  56. .postTitle {
  57.     border-left: 8px solid rgba(132,112,255, 0);
  58.     margin-left: 10px;
  59.     margin-bottom: 10px;
  60.     font-size: 20px;
  61.     float: right;
  62.     width: 100%;
  63.     clear: both;
  64. }
  65. .postTitle a:link, .postTitle a:visited, .postTitle a:active {
  66.     color:     #ac0e0e;
  67.     transition: all 0.4s linear 0s;
  68. }
  69. .postTitle a:hover {
  70.     margin-left: 30px;
  71.     color: #ac0e0e;
  72.     text-decoration: none;
  73. }
  74. .postCon {
  75.     float: right;
  76.     line-height: 1.5em;
  77.     width: 100%;
  78.     clear: both;
  79.     padding: 10px 0;
  80. }
  81. .day .postTitle a {
  82.     padding-left: 10px;
  83. }
  84. .day {
  85.     background: rgba(255, 255, 255, 0.5);
  86. }
  87. /*文章附加信息*/
  88. .postDesc {
  89.  /* background: gray no-repeat 0 1px; */
  90.     color: #852222;
  91.     float: left;
  92.     width: 90%;
  93.     clear: both;
  94.     text-align: left;
  95.     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
  96.     font-size: 13px;
  97.     /*padding-right: 20px;5px  padding-left: 90px;posted 发表时间左边距离*/
  98.     margin-right:20px;
  99.      /* margin-top: 20px;*/
  100.     line-height: 1.8;
  101.     /* padding-bottom: 35px; */
  102. }
  103. .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
  104. .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
  105. .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
  106. {
  107.     background: rgba(255, 255, 255, 0.5);
  108.     margin-bottom: 25px;
  109.     word-wrap: break-word;
  110. }
  111. .CalTitle{
  112.     background: rgba(255, 255, 255, 0);
  113. }
  114. .catListTitle{
  115.     margin-top: auto;
  116.     margin-bottom: auto;
  117.     background-color: rgba(201, 49, 49, 0.6);   /*栏目的条纹颜色*/
  118.     border-bottom: none;
  119. }
  120. #topics{
  121.     background: rgba(255, 255, 255, 0.5);
  122. }
  123. .c_ad_block{
  124.     display: none;
  125. }
  126. #tbCommentBody{
  127.     width: 100%;
  128.     height: 200px;
  129.     background: rgba(255, 255, 255, 0.5);
  130. }
  131. #q,#google_q{
  132.     background: rgba(255, 255, 255, 0);
  133. }
  134. .CalNextPrev{
  135.     background: rgba(255, 255, 255, 0);
  136. }
  137. .cnblogs_code{
  138.     background: rgba(255, 255, 255, 0);
  139. }
  140. .dayTitle{
  141.     display: none;
  142.     font-size: 18px;
  143. }
  144. .cnblogs_code div{
  145.     background: rgba(255, 255, 255, 0);
  146. }
  147. .cnblogs_code_toolbar{
  148.     background: rgba(255, 255, 255, 0);
  149. }
  150. #main{
  151.     min-width: 640px;
  152. }
  153. .entrylist{
  154.     background: rgba(255, 255, 255, 0.5);
  155.     min-height: 60px;
  156. }
  157. .CalTodayDay{
  158.   font-weight: 700;
  159.   color:   rgba(201, 49, 49, 0.8);
  160.   background: #f533;
  161. }
  162. a.entrylistItemTitle{
  163.   color:  #ac0e0e;
  164. }
  165. .entrylistTitle,.entrylistDescription{
  166.    display:none;
  167. }
  168. .entrylistItem{
  169.    margin-bottom: auto;
  170. }
  171. .entrylistItemPostDesc, .entrylistItem>.entrylistItemPostDesc>a:nth-child(1){
  172.   color: #852222;
  173. }
  174. .entrylistPostSummary{
  175.    color: #666;
  176. }
  177. .comment_textarea{
  178.    background: rgba(255, 255, 255, 0.5);
  179.    border-radius: 7px;
  180. }
  181. td>a>u{
  182.   /*text-decoration:none;*/
  183.   color: #852222;
  184. }
  185. div>ul{
  186.   margin-bottom: auto;
  187. }

大家可以根据自己的喜好，更改对应的颜色配置、界面宽度、主题背景（可以百度搜索到喜欢的图片后，点击复制图片地址，替换代码中的地址）等。
PS：给一些小建议，如果有想要更改的样式，而找不到的话，建议在自己的博客下打开F12,出现控制台后，点击如下图的按钮

然后去页面中点击自己想要更改的内容，如下图:

点击后，控制台就会出现相应的HTML及css代码，如下图：

可以先在控制台对选择的CSS代码中更改，预览效果，然后再来后台更改。

鼠标效果

  1. 鼠标图案效果
    在页面定制CSS如下代码片段中，插入下列（最后一行）代码：
  1. /*boby调节背景图片*/
  2. body {
  3.     background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606476513478&di=92fdb162c0020c2b43d20fa5ffae2159&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20191015%2F15%2F1571124483-pUBXSkAZba.jpg");  /*背景图片链接*/
  4.     background-position:center left;
  5.     background-size: cover;
  6.     background-repeat: no-repeat;
  7.     background-attachment:fixed;
  8.     cursor: url(https://files.cnblogs.com/files/wkfvawl/cursor.ico),auto;  /*鼠标效果*/
  9. }

展示效果如图:

如果想换成其他自己喜欢的图标，可以去百度在线制作ico的网站（例如：http://www.ico51.cn/），先上传自己想要做成ico的图片（如果找不到合适的可以去阿里巴巴矢量图标库去找免费下载的），然后自己选择像素大小，一般这里选择32*32的就可以了。如下：

生成了ico之后，保存到本地，然后上传到博客园设置->文件。
然后将cursor: url(https://files.cnblogs.com/files/wkfvawl/cursor.ico),auto中的路径，改为你的文件路径https://blog-static.cnblogs.com/files/你的博客园名/favicon.ico
效果：

2. 鼠标点击效果

  • 点击文字
    将下面的代码复制到首页HTML代码块：
  1. <script type="text/javascript">
  2. /* 鼠标点击特效 */
  3. var a_idx = 0;
  4. jQuery(document).ready(function($) {
  5.     $("body").click(function(e) {
  6.         /* 内容可以更换为自己喜欢的 */
  7.         var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?","?平等?","?公正?","?法治?","?爱国?","?敬业?","?诚信?","?友善?");
  8.         var $i = $("<span></span>").text(a[a_idx]);
  9.         a_idx = (a_idx + 1) % a.length;
  10.         var x = e.pageX,
  11.         y = e.pageY;
  12.         $i.css({
  13.             "z-index": 999,
  14.             "top": y - 20,
  15.             "left": x,
  16.             "position": "absolute",
  17.             "font-weight": "bold",
  18.             "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" /* 随机颜色 */
  19.         });
  20.         $("body").append($i);
  21.         $i.animate({
  22.             "top": y - 180,
  23.             "opacity": 0
  24.         },
  25.         1500,
  26.         function() {
  27.             $i.remove();
  28.         });
  29.     });
  30. });
  31. </script>
  • 烟花效果
    将下列代码复制到页脚HTML代码中去：
  1. <script src="https://files.cnblogs.com/files/nthforsth/mouse-click.js"></script>
  2. <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

如果已经有了雪花特效的代码，需要放到和雪花特效的script同级，如下：

最终效果图如下：

原文链接：http://www.cnblogs.com/Carmena/p/14109906.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号