THE SHORT STORY
You can have the following pages in two steps. (cats can blink.)
Step one: manage your blog backstage and set the blog skin to darkgreentrip.
Step 2: Paste the following code into “Page Custom CSS Code” and “Header Html Code” respectively.Don’t pick it up“Disable template default CSS)
/*-----------------------------Page customization CSS codeBody{Background: transparent;}#main{BACKground-color: RGB (236, 239, 241);}#blogTitle {Height: 270px;Background-color: blaCK;Color:white;}#blogTitle h1{Text-align: center;Margin-left: 0;Font-siZe: 2.5em;Font-family:'Lato', sans-serif;Position: relative;Left: 25%;WidtH: 50%;Letter-spacing: 5px;Top: 100px;}#Header1_HeaderTitle{Color:white;}#blogTitle h2{Text-align: center;Font-size: 1em;Font-family:'Lato', sans-serif;Margin-left: 0;Letter-spacing: 3px;Position: absolute;Top: 190px;LefT: 25%;Width: 50%;}#blogTitle a:hover{Color: white;Text-decoration: none;Letter-spacing: 8px;}#blogTitle h1:: after{Background-color: white;Content: "";Height: 2px;Display: block;Width: 45%;Margin: 10px Auto;}#navigator {Background-color: white;Position: fixed;Top: 0;Width: 100%;}.blogStats {Color: transparent;}#navList{Font-size: 0.8em;Float: right;}#navList a{Transition-duration: 0.4s;}/ / #navList a:active, #navList a:focus, #navList a:hover{/ / background-color: white;/ / color: #009688;/ / text-shadow: none;/ /)#navList a:aCtive {/ / border-top: 4PX solid #009688;/ / background: white;}.dayTitle {DisplAy: none;Font-size: 18px;Top: 3.5em;Position: relative;Border-bottom: none;}.dayTitle a {Font-size: 0.8em;Color: black;Font-family:'Lato', sans-serif;Font-style: normal;Font-weight: bold;Letter-spacing: 2px;}.dayTitle a:hover{Text-decoration: none;}.postTitle {Border-bottom: 1px solid #ccc;Font-size: 25px;Text-align: center;Letter-spacing: 3px;}.day{Border-radius: 0;BoX-shadow: none;}.postTitle a:link {Color: #0d0099;}.postTitle a:link,.PostTitleA:visited,.PostTitle a:active {Color: #0d0099;Transition: all 0.4s linear 0s;}#sIdeBar{Display: none;}#mainContent.ForFlow {Margin-left: 2em;}/ * - ---------------------cat-----------------------------------*/.cat {Position: absolute;HeIght: 150px;Width: 170px;Top: 110px;Right: 150px;}.ear {Position: absoluTE;Top: -30%;Height: 60%;Width: 25%;Background: #fff;}.ear:: before,.Ear:: after{Content: "";Position: absolute;Bottom: 24%;Height: 10%;Width: 5%;Border-radIus: 50%;Background: #161616;}.ear:: after {-webkit-transform-origin: 50% 100%;Transform-origin: 50% 100%;}.ear--left {Left: -7%;Border-radius: 70% 30% 0% 0% 0% / 100% 100% 0% 0%;-webkit-transform: rotate (-15deg);Transform: rotate (-15deg);}.ear--Left:: before,.Ear--left:: after {Right: 10%;}.ear--left:: after {-webkit-transform: rotatE (-45deg);Transform: rotate (-45deg);}.ear--right {Right: -7%;Border-radius30% 70% 0% 0% / 100% 100% 0% 0%;-webkit-transform: rotate (15deg);Transform: rotate(15deg);}.ear--right:: before,.Ear--right:: after {Left: 10%;}.ear--right:: after {-weBkit-transform: rotate (45DEG);Transform: rotate (45DEG);}.face {Position: absolUte;Height: 100%;Width: 100%;Background: #161616;Border-radius: 50%;}.eye {Position: absolute;Top: 35%;Height: 30%;Width: 31%;Background: #fff;Border-radiUs: 50% 50% 50% 50% / 60% 60% 40% 40%;}.eye:: after {Content: "";Position: absolute;TOp: 0;Left: 0;Height: 0;Width: 100%;Border-radius: 00 50% 50% / 00 40% 40%;BACKground: #161616;-webkit-animation: blink 4S infinite ease-in;Animation: blink 4S inFinite ease-in;}@-webkit-keyframes blink {0% {{Height: 0;}90% {{Height: 0;}92.5% {{Height: 100%;}95% {{Height: 0;}97.5% {{Height: 100%;}100% {{Height: 0;}}@keyframes blink {0% {{Height: 0;}90% {{Height: 0;}92.5% {{Height: 100%;}95% {{Height: 0;}97.5% {{Height: 100%;}100% {{Height: 0;}}.eye:: before {Content: "";Position: abSolute;Top: 60%;Height: 10%;Width: 15%;Background: #fff;Border-radius: 50%;}.eye--left {Left: 0;}.eye--left:: before {Right: -5%;}.eye--right {Right: 0;}.eye--right:: before {Left: -5%;}.eye-pupil {Position: absolute;Top: 25%;HeIght: 50%;Width: 20%;Background: #161616;Border-radius: 50%;-webkit-animation: look-Around 4S infinite;Animation: look-around 4S infinite;}@-webkit-keyframes look-arounD {0% {{-webkit-transform: translate (0);Transform: translate (0);}5% {{-webkit-transform: translate (50%, -25%);Transform: translate (50%, -25%);}10% {{-webkit-transform: translate (50%, -25%);Transform: translate (50%, -25%);}15% {{-webkit-transform: translate (-100%, -25%);Transform: translate (-100%)-25%);}20% {{-webkit-transform: translate (-100%, -25%);Transform: transLate (-100%, -25%);}25% {{-webkit-transform: translate (0, 0);Transform: trAnslate (0, 0);}100% {{-webkit-transform: translate (0, 0);Transform: transLate (0, 0);}}@keyframes look-around {0% {{-webkit-transform: translate (0);Transform: translate (0);}5% {{-webkit-transform: translate (50%, -25%);Transform: translate (50%, -25%);}10% {{-webkit-transform: translate (50%, -25%);Transform: translate (50%, -25%);}15% {{-webkit-transform: translate (-100%, -25%));Transform: translate (-100%, -25%);}20% {{-webkit-transform: translate (-) -100%, -25%);Transform: translate (-100%, -25%);}25% {{-webkit-transform: tRanslate (0, 0);Transform: translate (0, 0);}100% {{-webkit-transform: tranSlate (0, 0);Transform: translate (0, 0);}}.eye--left.Eye-pupil {Right: 30%;}.eye--right.Eye-pupil {Left: 30%;}.eye-pupil:: after {Content: "";Position: abSolute;Top: 30%;Right: -5%;Height: 20%;Width: 35%;Border-radius: 50%;BackgroUnd: #fff;}.muzzle {Position: absolute;Top: 60%;Left: 50%;Height: 6%;Width: 10%;Background: #fff;-webkit-transform: translateX (-50%);Transform: translateX(-50%);Border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;}/-------------hide original header----------------------------------*/#header{display:none;}
Page customization CSS code
<div id="new_header"> <div id="blogTitle"> <a id="lnkBlogLogo" href="https://www.cnblogs.com/mozi-song/"><img id="blogLogo" src="/Skins/custom/images/logo.gif" alt="Back to home page " /></a> <!--done--> <h1><a id="Header1_HeaderTitle" class="headermaintitle" href="https://www.cnblogs.com/mozi-song/">mskitten</a></h1> <h2>Lost and slack</h2> <div class="cat"> <div class="ear ear--left"></div> <div class="ear ear--right"></div> <div class="face"> <div class="eye eye--left"> <div class="eye-pupil"></div> </div> <div class="eye eye--right"> <div class="eye-pupil"></div> </div> <div class="muzzle"></div> </div> </div> </div> <div id="navigator"> <ul id="navList"> <li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/" style="color:transparent">Administration</a></li> <li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">Blogger Garden</a></li> <li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/mozi-song/">home page</a></li> <li></li> <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/category/1207554.html">Talk nonsense</a></li> <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/category/1178719.html">Formal</a></li> <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/mozi_song">mail</a></li> <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/p/9560345.html">about</a></li> <li></li> </ul> </div><!--end: blogStats --> </div><!--end: navigator Blog navigation bar--> </div><!--end: blogTitle Title and subtitle of Blog-->
Page Html code
It’s hot!
Pay attention to two points:
- I hide the “Manage” navigation option from ordinary users, but the mouse can be clicked on the far left side of the navigation bar (“Blog Garden” on the left).
- The blog headers and navigation bars are statically configured. To change their display content and links, you can search for the corresponding keywords in the header HTML code, such as “mskitten” and replace it with your blog name.
THE LONG STORY
I recently learned that my blog style can be customized and opened the door to the new world.
What is the back end of the game and the rear end is at the tip of the scorn chain? I have only two words: naive. CSS is really fun. It means that where to change, it can also integrate all kinds of small animations. (desperately controlling emotions)
principle
Basically, the principle is this: the HTML page on the blog’s home page is generated in the background, but the blog Garden opens a few backdoors here in Background Management, allowing you to add HTML and JS code in specific places, or customize the style of the entire page with css.
darkgreentripThis style is just a starting point, and it sets the basic positions of the various large modules on the blog page, such as navigation bars, Title bars, sidebars, and so on. You can also choose other styles as a starting point, and then use the browser to modify and debug manually.
cssIntroduction
Before you start to modify, you must understand some basic CSS, otherwise you will get twice the result with half the effort. MDN has a great tutorial, it’s easy to understand, and there are all sorts of fun little examples for you to practice. It takes about a couple of days to get half-done, and that’s enough for you to modify your blog page.Ren’s proposal.
If it’s almost done, you can skip to the next section.
If you are real（No)between（Tolerance)Yes（Heart)limit（Learning)，At least we should know these:
1.cssThe basic syntax of a statement: a rule =Selector {definitions}
The selector will choose which element corresponds to this definition. For example, I would like to set the background color of all descendants of div P elements to red, so that “all descendants of div P elements” can be filtered with the selector div P.
2.The basic syntax of selectors:
Selection elements:p {}
Selection class: .someClass{}
Select ID:#someID
Select Properties: knowing the simplest [attr=val] is enough. Such asli[lang=”en-GB”]
Select pseudo-Class: indicate a certain state of selecting an element. Such as a:hover Select the state of the mouse hovering on the anchor.
Select pseudo-elements: indicate a particular choice. as::after A new element will be created after the elements are formulated, usually for decoration purposes.
Composite selector: (A, B are all selectors mentioned above)
- A, B Select A and B at the same time.
- A B The selection is the B element of the descendants of A.
- A > B The B is the direct son of A.
- A + B The selection is A’s next brother’s B.
- A ~ B The selection is the B of the brother after A.
3.priority
If you have multiple selectors to style an element at the same time, which selector wins? CSS has a set of rules to define, that is, the so-called cascading. Cascading has three rules from importance to low:
- Importance：Have!importantProperty will always win.
- Particularity: CSS has a special scoring mechanism, and the higher the score, the higher the special, as long as you remember roughly, inline style is the most special, you can add 1000 points; followed by ID selector, plus 100 points; and then classes, properties, pseudo-Class selector, plus 10 pointsThe last is the pseudo-element selector plus 1 points.
- Definition order: when the above two are the same, the definition is the winner in the latter.
Note that the winner is a property instead of the whole rule.
These are just a few of the most important basics of css, and it’s easy for people who haven’t studied HTML and CSS systematically to understand them. If you don’t think that’s enough for the next section, go to MDN and see the tutorial. It’s not a long one. There’s a lot in between the lines.The basic idea of CSS, such as inheritance of property, is still very important for practice.
CSS references can be used to query various properties during debugging, writing very clear and running examples in real time, so there is no need to memorize properties. But the above selectors and priorities do not affect the speed of debugging.Degree.
Debugging with browser
It’s the most interesting part.
Here, if you have no idea what your blog should look like, you can start with a favorite page for reference. I was looking for Chen Hao’s big homepage.
Custom CSS
Open your current blog home page and click Ctrl + Shift + C on the browser to see the HTML elements and the corresponding CSS rules.
When the mouse moves to an element definition on HTML, the corresponding elements on the page will become a light blue prompt. In the above picture, I selected header div, and selected the top title and navigation bar.
To see which element doesn’t work, you can use the browser’s debugger to find the element, and then modify it directly in the displayed CSS rules to see the effect. For example, I think this sidebar is really unattractive. Looking for it, it is a div element with ID as sideBar. First rough in the browser.Edit display: none to make it no longer displayed.
Then add this rule to your “page customization CSS code” and use the ID selector directly.
Note that background settings in the blog Garden can be problematic at times, so it is best to back up your written CSS code locally in case it is lost.
Another example is that I want to put the navigation bar at the top and make it sticky (that is, when the mouse scrolls down, the navigation bar is always at the top of the page). Find the navigation bar first and find that it is a div called navigator, which is an element called header along with the title barChild elements.
Here you have to know a property called position. This property is very important and is often used. It can be viewed in CSS reference.
Here we set the position of the navigation bar to fixed, set the top to 0, and set the width to 100%, so we can get the above effect.
A cat’s face
I want a simple and cute black and white cat face animation, so I found this page on the Internet.
First copy the HTML and CSS code here, and try it locally to see if it can be displayed properly.
Note: the default CSS here is SCSS, which is a superset of CSS. Because blog backstage only supports CSS, you need to choose compiled CSS here.
htmlPart of it is div, which is wrapped in the body element.
<html> <head> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <div class="cat"> <div class="ear ear--left"></div> <div class="ear ear--right"></div> <div class="face"> <div class="eye eye--left"> <div class="eye-pupil"></div> </div> <div class="eye eye--right"> <div class="eye-pupil"></div> </div> <div class="muzzle"></div> </div> </div> </body> </html>
Using browser to open HTML file, cat face is displayed in the center of the page successfully.
Integrated cat face
My title bar is a solid black background, and I think it fits well with the black cat face, so I want to hide the cat face in the title bar.
Because the HTML elements of the title bar are fixed, it’s simple and crude here. Just remove the title bar and the navigation bar together. (removing the navigation bar is because I also want to customize the elements of the navigation bar).
Then write your own header element and add cat face. The simplest way is to copy the header element from the HTML code of the original page, rename it new_header, and then add the div element of the cat’s face. Notice that the navigation bar elements are also customized here.
<!--Page HTML code--> <div id="new_header"> <div id="blogTitle"> <a id="lnkBlogLogo" href="https://www.cnblogs.com/mozi-song/"><img id="blogLogo" src="/Skins/custom/images/logo.gif" alt="Back to home page " /></a> <h1><a id="Header1_HeaderTitle" class="headermaintitle" href="https://www.cnblogs.com/mozi-song/">mskitten</a></h1> <h2>Lost and slack</h2> <!-- Cat face--> <div class="cat"> <div class="ear ear--left"></div> <div class="ear ear--right"></div> <div class="face"> <div class="eye eye--left"> <div class="eye-pupil"></div> </div> <div class="eye eye--right"> <div class="eye-pupil"></div> </div> <div class="muzzle"></div> </div> </div> </div> <!-- Customizing navigation bar elements--> <div id="navigator"> <ul id="navList"> <li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/" style="color:transparent">Administration</a></li> <li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">Blogger Garden</a></li> <li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/mozi-song/">home page</a></li> <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/category/1207554.html">Talk nonsense</a></li> <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/category/1178719.html">Formal</a></li> <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/mozi_song">mail</a></li> <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/p/9560345.html">about</a></li> </ul> </div><!--end: navigator --> </div><!--end: new_header --> </div><!--end: blogTitle Title and subtitle of Blog-->
It’s all done!