After spending half the night on it, I finally managed to roughly finish the style of the blog. Copy code The code is as follows:<div id="myFooter" style="position: fixed; bottom: 0px; width: 100%; height: 85px; background: none repeat scroll 0px 0px rgb(0, 120, 216);"> <p id="myFootText">Knowledge changes destiny, programmers save lives</p> <p id="myFootCopy">ohmygirl@2014</p> </div> 2. At the same time, the annoying promotional links and advertising banners at the bottom of the article are removed. It looks much cleaner. The CSS code is: Copy code The code is as follows:/* advertise */ #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{ width:0; height:0; display:none; overflow:hidden; } 3. The position and size of the comment button at the bottom of the article are rather awkward; it is too far to the left and the clickable area is too small. Here are posted together: Copy code The code is as follows:#RecentCommentsBlock li { margin: 0; width: 275px; } #RecentCommentsBlock li.recent_comment_body { border-radius: 0; margin: 0; } #RecentCommentsBlock li.recent_comment_title { border-radius: 5px 5px 0 0; margin: 3px 0 0; } #RecentCommentsBlock li.recent_comment_author { border-radius: 0 0 5px 5px; margin: 0; } .desc_img{ width:75px; max-width:75px; } #blog-calendar{ background:white; } /* comment */ div.commentform{ margin-bottom:100px; } #commentform_title { background: url("<a href="http://static.cnblogs.com/images/icon_addcomment.gif">http://static.cnblogs.com/images/icon_addcomment.gif</a>") no-repeat scroll 0 2px; color: #0078d8; font-size:14px; } div.commentform p{ margin-bottom:10px; } .comment_btn { height: 35px; width: 90px; background: none repeat scroll 0 0 #0078d8; border: 0 none; border-radius: 5px; color: white; cursor:pointer; } .comment_btn:hover{ background:#317ef3; } #commentbox_opt,#commentbox_opt + p { text-align:center; } #tbCommentBody{ width:100%; resize:none; } #tbCommentAuthor,#tbCommentBody{ border:1px solid #0078d8; } #tbCommentBody:hover{ border:1px solid #fca021; } #comments > h3 { background: none repeat scroll 0 0 #0078d8; border-radius: 3px; color: white; padding: 8px; border:0 none; font-size:14px; } #comments{ font-size: 13px; } #comments h4{ margin-top:10px; } #comments h4 span { color: #6c6351; font-size: 12px; } .comment_actions { border-bottom: 1px dashed #0078d8; display: block; padding-bottom: 10px; } .blog_comment_body { color: #111; font-size: 13px; margin-bottom: 10px; margin-top: 10px; } #comment_nav { font-size: 14px; margin-top: 10px; text-align: right; } Finally, the CSS code for the blog theme is: Copy code The code is as follows:/* header */ #header{ border:1px solid #044e97; background:#0078d8 repeat; box-shadow:0 0 5px; } h1{ background: none; border-bottom:0 none; } #main{ margin-top:5px; border-right:0 none; min-height:1040px; } #Header1_HeaderTitle{ color:white; font-weight:bold; font-size:24px; text-shadow:1px 5px 1px #000; } #Header1_HeaderTitle:hover{ color:#fca021; } #tagline{ color:white; } p.date{ background: none repeat scroll 0 0 #0078d8; border-bottom: 1px solid #aaa; border-radius: 5px; color: white; font-size: 14px; font-weight: bold; margin: 10px 10px 0 50px; padding: 10px; } .postFoot, p.postFoot{ padding-bottom:2px; border-bottom:1px solid #0078d8; } .postTitle{ padding:5px 0; } .postTitle a{ font-size:15px; padding:2px 0; } .post h2{ border-bottom: 1px dashed #0078d8; font-size: 1em; margin-top: 10px; padding: 0 0 10px; } .c_b_p_desc_readmore:hover{ color:#faa123; } #cb_post_title_url{ font-size:18px; } #MySignature{ border: 1px dashed #0078d8; display: block; padding: 5px; } #green_channel{ border: 1px dashed #0078d8; } /* right menu */ #rightmenu{ border:1px solid #0078d8; background:#0078d8; border-radius:10px; } #rightmenu ul{ background:white; } #rightmenu li{ background: none repeat scroll 0 0 #3385ff; border: 1px solid #3385ff; border-radius: 5px; color: white; margin: 10px; padding: 5px; width: 150px; } #rightmenu li a{ color:white; padding-left:10px; } #rightmenu li:hover{ background:#317ef3; } #rightmenu h3{ color:white; padding:2px 0 5px 10px; font-size:18px; border:0 none; } #blog-calendar{ background:white; } div.commentform{ margin-bottom:100px; } /* advertise */ #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{ width:0; height:0; display:none; overflow:hidden; } /* calendar */ .Cal{ border:0 none; width:100%; height:200px; font-size:14px; } .CalTitle{ font-size:15px; } .CalTodayDay{ background:#0078d8; } .CalTodayDay au{ color:#fc6700; text-decoration:none; } |
<<: About the selection of time date type and string type in MySQL
>>: Linux system repair mode (single user mode)
How to write configuration files and use MyBatis ...
There are two ways to deploy Angular projects wit...
[LeetCode] 184. Department Highest Salary The Emp...
Table of contents How to operate Operation proces...
Table of contents 1. Learning Objectives 1.1. Mas...
MySQL 5.7.13 installation tutorial for Mac, very ...
Recently, two accounts on the server were hacked ...
I just started working a few days ago and install...
Professional web design is complex and time-consu...
When we are writing a page, we often encounter a ...
Optimistic Locking Optimistic locking is mostly i...
1. Data flows from QT to JS 1. QT calls the JS fu...
In rows, dark border colors can be defined indivi...
Preface In today's increasingly convenient In...
1. Create a repository in the specified directory...