目錄
第一步,上传自定义的css
第二步,设置页面定制的css和页首html
第三步,设置页脚html
首頁 web前端 html教學 简单的3步设置,让你的更漂亮!_html/css_WEB-ITnose

简单的3步设置,让你的更漂亮!_html/css_WEB-ITnose

Jun 24, 2016 am 11:35 AM

昨天在发布博客园的第一篇花了很多时间和精力编写的博客后《模块化利器: 一篇文章掌握RequireJS常用知识》,有博友问个人的博客风格是如何自定义的,今天特将月前整理博客时用到的一些方法总结如下,希望能对你设计自己的博客有一些帮助:)

第一步,上传自定义的css

在浏览器中直接打开http://files.cnblogs.com/files/lyzg/cnblogs.css,然后按ctrl + s,即可将本人博客用到的自定义css下载下来。接着在博客的管理页面,找到文件选项卡,上传刚刚下载的文件:

上传之后,记下该文件的url,如上图中的红框所示。注:上图中的url为本人博客的自定义css文件地址,你在后面设置的时候虽然也可以用它,但是最好还是不用,万一将来我把这个文件删了,你的博客就访问不到这个css了。

第二步,设置页面定制的css和页首html

在博客管理页面,找到设置选项卡:

在该选项卡下面,先修改标题,在标题文本前面先添加下面的一段html:

<span class="portrait"></span>
登入後複製

页面效果如下:

这段html,在后面的步骤中用来设置头像。

接着在博客皮肤配置处,选择下面的皮肤,因为第一步上传的css文件是在该皮肤下修改得到的,部分css可能还是得依赖该皮肤的原来的css文件:

接着在页面定制css部分,粘贴下面的代码:

div.post div.entry {    font-family: Georgia, "Times New Roman", Times, sans-serif}div.post div.entry h1, div.post div.entry h2, div.post div.entry h3 {    margin-top: 24px;    margin-bottom: 12px;}div.post div.entry h1 {    padding: 5px;    color: white;    background-color: gray;}div.post h2 {    font-size: 22px;    line-height: 100%;}div.post div.entry pre.code {    font-family: Consolas border-style : dashed;    border-left: solid 5px #6ce26c}div#information {    background-color: #f8f8ee;    border: solid 1px #e8e7d0;    padding: 5px 10px 0px 10px;    min-height: 10px;    margin-top: -15px;    margin-bottom: 30px;    color: #666666}.cnblogs_code {    border-left: #58CE60 5px solid !important;}#site_nav_under, .c_ad_block, #under_post_news, #under_post_kb {    display: none !important;}
登入後複製

页面效果如下:

接着在页首html区域,粘贴如下代码:

<link href="http://files.cnblogs.com/files/lyzg/cnblogs.css" rel="stylesheet" /><style type="text/css">body {    background: #98C17B url('http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg') no-repeat top center;    background-size: 100% 100%;    background-attachment: fixed;}input[type="button"].btn_my_zzk {  width: 60px;}#home {  border-top-right-radius: 0;}#blogTitle .title {    position: relative;    background: none;}.portrait {    display: block;    position: absolute;    left: 0;    top: 0;    width: 100px;    height: 100px;    border-radius: 50px;    overflow: hidden;    background: white url('http://pic.cnblogs.com/avatar/459873/20150917085709.png') no-repeat left center;    background-size: contain;   transition: all 0.8s;   -moz-transition: all 0.8s; /* Firefox 4 */   -webkit-transition: all 0.8s; /* Safari 和 Chrome */   -o-transition: all 0.8s;}.headermaintitle:hover .portrait {   -moz-transform:scale(1.2,1.2);   -webkit-transform:scale(1.2,1.2);   -o-transform:scale(1.2,1.2);   transform:scale(1.2,1.2);}::-webkit-scrollbar {    width: 6px;    height: 6px;}::-webkit-scrollbar-thumb {    background-color: #55895B;    border-radius: 5px;}::-webkit-scrollbar-thumb:hover {    background-color: #55895B;}::selection {    color: white;    background: #018ee8;}#topics a:hover {    padding: 1px 3px 1px 3px;;    text-decoration: none;    color: #018ee8;    border-radius: none;    background-color: transparent;}.postTitle {    padding-left: 0;    background: none;}.subtitle {    padding-left: 0;}#blogTitle {   padding-bottom: 0;}#nav_q,#nav_ing,#nav_newpost {   display:none !important;}#sideBar {    border-top-width: 1px !important;}#navigator {    margin-bottom: 0;}#sideBarMain {    margin: 0;    padding-right: 20px;    padding-left: 5px;}.catListTitle {    border-top-color: #CECECE;    border-right-color: #CECECE;    border-bottom-color: #CECECE;}#home {   margin: 150px auto 50px auto;   //width: 80%;}#green_channel {    width: auto;}#tbCommentBody {  width: 100%;  display: block;  box-sizing: border-box;}</style>
登入後複製

页面效果如下:

需要注意的是这段代码中,有3处需要改成你自己博客相关的文件。第一处的文本是:

http://files.cnblogs.com/files/lyzg/cnblogs.css
登入後複製

你要在代码中搜索该段文本,并替换为第一步中你在自己博客中上传的css。

第二处是:

http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg
登入後複製

这张图片时博客的背景图片,是我从百度上下下来的分辨率比较大的图片,以便呈现出一个大图的网页背景。由于博客管理页面允许上传的文件不包括图片文件,所以这张图片是插入在一篇草稿博客中的:

这篇博客不会发布,所以外面看不到,在里面插入图片文件,然后记下图片文件的地址,就可以在css中被引用了。如果你也想要这样一个网页背景大图的话,可以通过这个方式上传一张自己喜欢的图片,然后替换第二处所示的文本即可。

第三处是:

http://pic.cnblogs.com/avatar/459873/20150917085709.png
登入後複製

这个文件是头像的url,你需要用自己图像的url替换掉它。

第三步,设置页脚html

找到页脚html部分,粘贴进下面的代码:

<div class="scrollBtn" id="scrollBtn">  <ul class="clearfix"><li class="sB-goTop" id="goTop" style="display: list-item;">      <a href="#top" title="回顶部"></a>    </li>  </ul></div><script language="javascript" type="text/javascript">  //生成目录索引列表  function GenerateContentList() {    var jquery_h3_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h4,只需要将这里的h4换掉即可    if (jquery_h3_list.length > 0) {      var content = '';      content += '<div id="navCategory" style="background-color: #BDBDBD;padding:10px 5px;">';      content += '<p style="font-size:18px;margin:0;line-height:30px;"><b>阅读目录</b></p>';      content += '<ul>';      for (var i = 0; i < jquery_h3_list.length; i++) {        var go_to_top = '<div style="text-align: right;    text-align: right;height: 0;padding: 0;overflow: hidden;visibility: hidden;"><a name="_label' + i + '"></a></div>';        $(jquery_h3_list[i]).before(go_to_top);        var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';        content += li_content;      }      content += '</ul>';      content += '</div>';      if ($('#cnblogs_post_body').length != 0) {        $($('#cnblogs_post_body')[0]).prepend(content);      }    }  }  GenerateContentList();</script><!-- JiaThis Button BEGIN --><script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script><!-- JiaThis Button END -->
登入後複製

这段js包含了返回顶部,分享组件以及博文页面生成目录的功能。需要注意的是这个生成目录的功能,它的原理是去博文里面寻找h2元素把它作为每一个目录项,所以你在编辑博客的时候,大的标题一定是要用h2,小的标题应该用h3,不能混用,推荐使用live writter编辑博客,在编辑的时候,它的标题2和标题3在源代码中显示的就是h2和h3:

以上就是我当时自定义博客时用的所有方法了,有的细节没有讲太多,相信你在使用这些方法后,查看博客页面的源代码就能明白其中的原理了,当然有疑问的,还是欢迎你在评论区与我交流。如果你觉得这篇文章对你有用,不妨帮我点一下赞,也就算是看得起我今天一大早起来花的这点时间和精力了,谢谢:)

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1253
24
HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML,CSS和JavaScript的未來:網絡開發趨勢 HTML,CSS和JavaScript的未來:網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述 HTML與CSS vs. JavaScript:比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:建立網頁的結構 HTML:建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML與CSS和JavaScript:比較Web技術 HTML與CSS和JavaScript:比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML:是編程語言還是其他? HTML:是編程語言還是其他? Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

從文本到網站:HTML的力量 從文本到網站:HTML的力量 Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言,通過標籤和屬性定義網頁結構和內容。 1)HTML通過標籤組織文檔結構,如、。 2)瀏覽器解析HTML構建DOM並渲染網頁。 3)HTML5的新特性如、、增強了多媒體功能。 4)常見錯誤包括標籤未閉合和屬性值未加引號。 5)優化建議包括使用語義化標籤和減少文件大小。

See all articles