週五公司事不是很緊,打算好好弄下本身的博客,這是本身學習和記錄分享地方,
首先請記得申請js權限,默認不支持的,博主是已經申請經過後的樣子javascript
接着先選擇cnblogs一個現有的模板,我這個就是在他的模板上改動的html
我改了這些地方
java
其實在谷歌瀏覽器強大的開發者功能下,這些樣式就是一邊寫一邊調而後本身滿意爲止
web
而後介紹下 到頂部 小按鈕怎麼作的
*** 首先添加HTML代碼
*** 在添加樣式代碼
*** 最後添加JS代碼
<script type="text/javascript" > $(function(){ $(window).scroll(function(){ if($(window).scrollTop()>$(window).height()){ //大於設備瀏覽器窗口的高度 纔會顯示 $('#backTop').fadeIn(1000).display=true; }else{ $('#backTop').fadeOut(1500); } }); $('#backTop').click(function(){ $('body,html').animate({scrollTop:0},500); }); }); </script>
瀏覽器
最後也仍是給出我全部樣式源碼ide
/************************************************** 第一部分: **************************************************/ #EntryTag { margin-top: 20px; font-size: 9pt; color: gray; } .topicListFooter { text-align: right; margin-right: 10px; margin-top: 10px; } #divRefreshComments { text-align: right; margin-right: 10px; margin-bottom: 5px; font-size: 9pt; } /*****第一部分結束*******************************/ /************************************************** 第二部:公共樣式(全局樣式) **************************************************/ * { margin: 0; padding: 0; } html { height: 100%; } body { color: #000; background-color: #C7EDCC; font-family:"Arial","Microsoft YaHei","黑體","宋體",sans-serif; font-size: 14px; min-height: 101%; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } ul { word-break: break-all; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } a { outline: none; color: #21759b; } a:link { color: black; text-decoration: none; } a:visited { color: black; text-decoration: none; } a:hover { color: #21759b; } a:active { color: black; text-decoration: none; } .clear { clear: both; } /*****第二部分結束*******************************/ /************************************************** 第三部分:各個頁面元素的樣式。 **************************************************/ /*****home和頭部開始**************************/ #home { margin: 0 auto; width: 72%; min-width: 980px; background-color: #fff; padding: 30px; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } #header { padding-bottom: 5px; margin-top: 10px; } /*博客標題*/ #blogTitle { height: 60px; /*高度*/ clear: both; } /*主標題格式*/ #blogTitle h1 { font-size: 36px; font-weight: bold; line-height: 1.8em;/*原始 1.6em*/ margin-top: 10px;/*原始 15px */ } #blogTitle h1 a { color: #515151; } /*超連接顏色*/ #blogTitle h1 a:hover { color: #21759b; } /*次標題格式*/ #blogTitle h2 { font-weight: normal; font-size: 17px;/*原始 16px ;font-size: 1.0rem;*/ line-height: 1.8; color: #757575; float: left; } /*logo圖片*/ #blogLogo { float: right; } /*頭部導航欄*/ #navigator { font-size:15px; border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; height: 60px; clear: both; margin-top: 25px; } /*導航欄設置,能夠自定義導航欄的目錄*/ #navList { min-height: 35px; float: left; } #navList li { float: left; margin: 0 5px 0 0; } /*菜單字體格式*/ #navList a { display: block; width: 5em; height: 22px; float: left; text-align: center; padding-top: 19px; } #navList a:link, #navList a:visited, #navList a:active { color: #6a6a6a; font-weight: bold; } #navList a:hover { color: #000; text-decoration: none; } /*博客統計*/ .blogStats { float: right; font-size:13px; color: #757575; margin-top: 19px; margin-right: 2px; text-align: right; } /*****home和頭部結束**************************/ /*****主頁文章列表開始**************************/ #main { width: 100%; text-align: left; margin-top: 30px; } #mainContent .forFlow { margin-left: 22em; float: none; width: auto; } #mainContent { min-height: 200px; padding: 0px 0px 10px 0; padding-top: 5px;/*原始10*/ -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; word-break: break-all; float: left; margin-left: -22em; width: 100%; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 14px; } /*每日文章列表*/ .day { min-height: 10px; _height: 10px; margin-bottom: 20px; padding-bottom: 5px; position: relative; } .dayTitle { display: none; border: 1px solid #21759b; background: azure; border-radius: 50%; font-size: 14px; height: 65px; line-height: 1.5; margin: 15px; text-align: center; width: 63px; margin-left: -100px; clear: both; position: absolute; top: -15px; } .dayTitle a { display: inline-block; color: #21759b; margin-top: 15px; width: 60px; } /*文章標題*/ .postTitle { border-left: 6px solid #21759b; margin-bottom: 10px; font-size: 20px; float: right; width: 100%; clear: both; } .postTitle a:link, .postTitle a:visited, .postTitle a:active { color: #21759b; transition: all 0.4s linear 0s; } .postTitle a:hover { margin-left: 30px; color: #0f3647; text-decoration: none; } /*文章內容(簡介內容)*/ .postCon { float: right; line-height: 1.5em; width: 100%; clear: both; padding: 10px 0; } .day .postTitle a { padding-left: 10px; } /*文章附加信息*/ .postDesc { background: url("http://www.cnblogs.com/skins/SimpleMemory/images/posted_time.png") no-repeat 0 1px; color: #757575; float: left; width: 100%; clear: both; text-align: left; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 13px; padding-right: 20px;/*5px padding-left: 90px;posted 發表時間左邊距離*/ margin-top: 20px; line-height: 1.8; padding-bottom: 35px; } .postDesc a:link, .postDesc a:visited, .postDesc a:active { color: #666; } .postDesc a:hover { color: #21759b; text-decoration: none; } /*一日內多篇文章分割區域*/ .postSeparator { clear: both; height: 1px; width: 100%; clear: both; float: right; margin: 0 auto 15px auto; } /*****主頁文章列表開始**************************/ /*****側邊欄開始********************************/ #sideBar { margin-top: -15px; width: 250px; min-height: 200px; padding: 0px 0 0px 5px; float: right; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } #sideBar a { color: #757575; } #sideBar a:hover { color: #21759b; text-decoration: underline; } .div_my_zzk { width: 175px; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 14px; position: relative; margin-top: 10px; } #btnZzk { background: url("images/blog_search.png") no-repeat 5px 5px; } #widget_my_google input[type=button] { background: url("images/google_search.png") no-repeat 5px 5px; } .input_my_zzk { border: 1px solid #ccc; width: 100%; height: 25px; padding-right: 30px; padding-left: 5px; outline: 0; } .btn_my_zzk { font-size: 14px; font-family: "微軟雅黑", Helvetica, Arial, sans-serif; width: 25px; height: 25px; color: transparent; border: 0; border-style: none; cursor: pointer; top: 1px; position: absolute; right: -35px; } .input_my_zzk:hover { border: 1px solid #21759b; transition: all 0.4s linear 0s; } .input_my_zzk:focus { border: 1px solid #21759b; } .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory { background: #fff; margin-bottom: 35px; word-wrap: break-word; } .newsItem .catListTitle { } /**日曆控件樣式開始**/ #blog-calendar { width: 228px; padding-bottom: 5px; margin-bottom: 35px; box-shadow: 0 1px 3px #ccc; border: 1px solid #EDEDED; } #blog-calendar td { font-size: 14px; font-family: "Comic Sans MS"; } #blog-calendar th { font-size: 14px; } #calendar { width: 228px; padding-bottom: 5px; margin-bottom: 35px; border: 1px solid #EDEDED; box-shadow: 0 1px 3px #ccc; } #calendar .Cal { width: 100%; line-height: 1.5em; } #calendar td { font-family: "Comic Sans MS"; background: #FFFFFF; padding-top: 2px; } .Cal { /**日曆容器table**/ border: none; color: #666; } #calendar table a:link, #calendar table a:visited, #calendar table a:active { font-weight: bold; } #calendar table a:hover { color: white; text-decoration: none; } .CalTodayDay { /**今天日期樣式**/ background: #f93!important; color: #FFF; font-weight: bold; } .CalWeekendDay { padding-top: 4px; padding-bottom: 4px; } .CalOtherMonthDay { color: #ccc; padding-top: 4px; padding-bottom: 4px; } #calendar .CalNextPrev a:link, #calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active { /**上個月、下個月箭頭樣式**/ font-weight: bold; padding-left: 10px; padding-right: 15px; } .CalDayHeader { background: #F8F8F8; font-weight: 100; color: #5E5F63; } .CalTitle { /**日曆年月頭部樣式**/ background: #6293bb; width: 100%; height: 25px; text-align: center; font-size: 14px; font-weight: bold; padding: 5px 0; color: #FFF; } .CalTitle td { background: #F8F8F8 !important; border: 0px !important; color: #5E5F63; font-family: "Comic Sans MS"; } /**日曆控件樣式結束**/ .catListTitle { margin-top: 21px; margin-bottom: 10.5px; border-left: 10px solid #FF9933; padding: 10px 0 10px 24px; background-color: #f7f7f7; } .catListComment { line-height: 1.5em; } .divRecentComment { text-indent: 2em; color: #494949; margin-bottom: 20px; } #sideBarMain ul { line-height: 1.5em; } #sideBarMain li { line-height: 1.8; } /*****側邊欄結束********************************/ /****文章閱讀頁面***********/ #topics { width: 100%; min-height: 200px; padding: 0px 0px 10px 0; float: left; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } /*單獨文章閱讀頁面的 文章標題*/ #topics .postTitle { border: 0px; font-size: 150%; font-weight: bold; float: left; line-height: 1.5em; width: 100%; padding-left: 1px;/*原5px*/ } /*文章內容*/ .postBody { color: #000; } /*文章tag區域*/ #EntryTag { color: #666; } #EntryTag a { margin-left: 5px; height: 20px; line-height: 20px; color: #333333; padding: 3px 14px; border-radius: 10px; margin: 2px 5px 0; background: #e7e7e7; text-decoration: none; } #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active { color: #666; } #EntryTag a:hover { color: #f5f5f5; background: #21759b; transition: all 0.4s linear 0s; } /*文章分類的標籤:在文章閱讀頁面最尾部*/ #BlogPostCategory { color: #666; } #BlogPostCategory a { margin-left: 5px; height: 20px; line-height: 20px; color: #333333; padding: 3px 14px; border-radius: 10px; margin: 2px 5px 0; background: #e7e7e7; text-decoration: none; } #BlogPostCategory a:link, #BlogPostCategory a:visited, #BlogPostCategory a:active { color: #666; } #BlogPostCategory a:hover { color: #f5f5f5; background: #21759b; } #topics .postDesc { margin-right:20px;/*新增 padding-left: 0px;*/ width: 100%; font-size: 12px; text-align: left; color: #666; margin-top: 5px; background: none; } .feedback_area_title { font: normal normal 16px/35px "Microsoft YaHei"; margin: 10px 0 30px; border-bottom: 2px solid #cccccc; } .louzhu { background: transparent url('images/icoLouZhu.gif') no-repeat scroll right top; padding-right: 16px; } .feedbackListSubtitle { color: #A8A8A8; } .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active { color: #21759b; font-weight: bold; } .feedbackListSubtitle a:hover { color: #21759b; text-decoration: underline; } .feedbackListSubtitle b { color: #21759b; } .feedbackManage { width: 200px; text-align: right; float: right; } .feedbackCon { border-bottom: 1px solid #EEE; padding: 10px 20px 10px 5px; min-height: 35px; _height: 35px; margin-bottom: 1em; line-height: 1.5; width: 100%; } #divRefreshComments { text-align: right; margin-bottom: 10px; } .commenttb { padding: 10px; margin-bottom: 10px; width: 50%; color: #555; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; width: 320px; } .commenttb:hover { color: #333; border-color: rgba(82, 168, 236, 0.8); outline: 0; -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); transition: all 0.4s linear 0s; } .commentTextBox { width: 430px !important; margin-top: 10px; margin-bottom: 10px; } .commentTextBox:hover { color: #333; border-color: rgba(82, 168, 236, 0.8); outline: 0; -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); transition: all 0.4s linear 0s; } #AjaxHolder_PostComment_btnSubmit { padding: 8px 20px; text-align: center; font-size: 14px; color: #fff; border: none; background: #21759b; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; cursor: pointer; display: inline-block; vertical-align: middle; outline: none; text-decoration: none; } #AjaxHolder_PostComment_btnSubmit:hover { background: #333; } #AjaxHolder_PostComment_divCommnentArea tr { margin-top: 10px; margin-bottom: 10px; } /*博客園評論框*/ .comment_vote { padding-right: 10px; } .comment_vote a { color: #999; } .comment_vote a:hover { color: #21759b; } #commentform_title { font: normal normal 16px/35px "Microsoft YaHei"; margin: 10px 0 30px; border-bottom: 2px solid #cccccc; background-image: none; padding: 0; } #comment_form_container .author { padding-left: 10px; color: #555; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; width: 320px; height: 20px; background-image: none; } #comment_form_container p { font-size: 14px; margin-bottom: 20px; } .commentbox_title_left { font-size: 14px; } .commentbox_title_right { float: left; } #comment_form_container .comment_textarea { width: 362px; height: 200px; font-size: 14px; padding: 8px; margin-bottom: 10px; color: #555; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #comment_form_container .comment_textarea:hover { border-color: rgba(82, 168, 236, 0.8); outline: 0; transition: all 0.4s linear 0s; } #comment_form_container .comment_textarea:focus { outline: 0; } .comment_btn { width: 100px; height: 38px; padding: 8px 20px; text-align: center; font-size: 14px; color: #fff; border: none; background: #21759b; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; cursor: pointer; display: inline-block; vertical-align: middle; outline: none; text-decoration: none; } .comment_btn:hover { background: #333; } #comment_form_container { } /****查看文章頁面開始*************************/ /****列表頁面開始******************************/ .entrylistTitle, .PostListTitle, .thumbTitle { /**幾個分類列表的標題樣式**/ margin-bottom: 25px; height: 38px; line-height: 38px; font-size: 16px; border-bottom: 2px solid #e6e6e6; color: #21759b; } .entrylistDescription { color: #666; text-align: right; padding-top: 5px; padding-bottom: 5px; padding-right: 10px; margin-bottom: 10px; } .entrylistItem { min-height: 20px; _height: 20px; margin-bottom: 30px; padding-bottom: 50px; padding-top: 10px; width: 100%; } .entrylistPosttitle { padding-left: 15px; margin-bottom: 10px; border-left: 3px solid #21759b; font-size: 20px; width: 100%; } .entrylistPosttitle a:link, .entrylistPosttitle a:visited, .entrylistPosttitle a:active { color: #21759b; transition: all 0.4s linear 0s; } .entrylistPosttitle a:hover { margin-left: 30px; color: #0f3647; text-decoration: none; } .entrylistPostSummary { margin-top: 5px; margin-bottom: 5px; } .entrylistItemPostDesc { margin-top: 20px; text-align: left; color: #757575; padding-left: 5px; } .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active { color: #666; } .entrylistItemPostDesc a:hover { color: #21759b; } .entrylist .postSeparator { clear: both; width: 100%; font-size: 0; line-height: 0; margin: 0; padding: 0; height: 0; border: none; } .divRecentCommentAticle a { color: #000; } .pager { text-align: right; margin-right: 10px; } .pager a { box-shadow: 0 1px 3px #3671a5; border: 1px solid #3671a5; background: #3671a5; color: white; transition: all 0.4s linear 0s; } .pager a:hover { background: #000; } .PostList { border-bottom: 1px solid #ccc; clear: both; min-height: 1.5em; _height: 1.5em; padding-top: 20px; margin-bottom: 20px; padding-bottom: 20px; } .postTitl2 { float: left; padding-top: 10px; padding-bottom: 10px; font-size: 14px; } .postDesc2 { color: #666; float: right; } .postText2 { clear: both; color: #757575; } /*留言*/ .pfl_feedback_area_title { text-align: right; line-height: 1.5em; font-weight: bold; margin-bottom: 10px; } .pfl_feedbackItem { border: 1px dashed #ccc; padding: 10px; border-radius: 3px; margin-bottom: 20px; } .pfl_feedbacksubtitle { width: 100%; height: 1.5em; } .pfl_feedbackname { float: left; } .pfl_feedbackname a { color: #21759b; font-weight: bold; } .pfl_feedbackManage { float: right; } .pfl_feedbackCon { color: black; padding-top: 5px; padding-bottom: 5px; } .pfl_feedbackAnswer { color: #F40; text-indent: 2em; } .tdSentMessage { text-align: right; } .errorMessage { width: 300px; float: left; } #Profile1_panelAdd input[type=text], #Profile1_txtContent { padding: 8px; margin-bottom: 10px; color: #555; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #Profile1_panelAdd input[type=text]:hover, #Profile1_txtContent:hover { color: #333; border-color: rgba(82, 168, 236, 0.8); outline: 0; -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); transition: all 0.4s linear 0s; } #Profile1_panelAdd input[type=text]:focus, #Profile1_txtContent:focus { outline: 0; border-color: rgba(82, 168, 236, 0.8); } #Profile1_panelAdd input[type=submit] { padding: 8px 20px; text-align: center; font-size: 14px; color: #fff; border: none; background: #21759b; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; cursor: pointer; display: inline-block; vertical-align: middle; outline: none; text-decoration: none; } #Profile1_panelAdd input[type=submit]:hover { background: #333; } .feedbackListSubtitle { clear: both; color: #A8A8A8; padding: 8px 5px; } .feedbackItem { margin-top: 30px; } /****列表頁面結束******************************/ /****相冊頁面開始******************************/ .divPhoto { border: 1px solid #ccc; padding: 2px; margin-right: 10px; } .thumbDescription { color: #757575; text-align: right; padding-top: 5px; padding-bottom: 5px; padding-right: 10px; margin-bottom: 30px; } /****相冊頁面開始******************************/ /*****留言頁面開始*****************************/ #footer { color: #686868; text-align: center; min-height: 15px; _height: 15px; border-top: 1px solid #ededed; margin-top: 50px; padding-top: 10px; margin-bottom: 10px; } /*留言查看頁面的我的信息*/ .personInfo { margin-bottom: 20px; } /*留言分頁區域*/ .pages { text-align: right; } /*****留言頁面結束*****************************/ /*****第三部分結束*******************************/ /************************************************** 第四部分:文章內容經常使用標籤格式。 **************************************************/ /*文章內部經常使用標籤格式*/ .postBody { line-height: 1.8; } .postBody p, .postCon p { text-indent: 2em; color: black; font: "微軟雅黑" , "PTSans" , "Arial" ,sans-serif; font-size: 14px; margin: 0 auto 1em auto; } .postBody h2 { font-size: 150%; margin: 15px auto 2px auto; font-weight: bold; } .postBody h3 { font-size: 120%; margin: 15px auto 2px auto; font-weight: bold; } .postBody h4 { font-size: 110%; margin: 15px auto 2px auto; font-weight: bold; color: #333; } .postBody h5 { font-size: 100%; margin: 15px auto 2px auto; font-weight: bold; color: #333; } .postBody a:link, .postBody a:visited, .postBody a:active { text-decoration: underline; } .postCon a:link, .postCon a:visited, .postCon a:active { text-decoration: underline; } .postBody ul, .postCon ul { margin-left: 2em; } .postBody li, .postCon li { list-style-type: disc; margin-bottom: 1em; } .postBody blockquote { background: url('images/comment.gif')) no-repeat 25px 0px; min-height: 35px; _height: 35px; line-height: 1.6em; color: #333; } /*****第四部分結束*******************************/ .myposts_title { font-weight: bold; text-align: center; } #sideBar { font-size: 14px; } #sideBar h3{ font-size: 14px; } /** 本身添加的 回到頂部組件和二維碼支持*/ div#backTop { width: 50px; height: 50px; position: fixed; bottom: 40px; right: 40px; z-index: 101; background-color: #ededed; display:none; } div#backTop:hover { box-shadow: 1px 1px #888; background-color: #aecce9; } #topdiv { font-family: "Arial","Microsoft YaHei","黑體","宋體",sans-serif; font-size: 30px; text-align: center; margin-bottom: 0; padding-top: 20%; }