First list all the codes currently in use
HTML part:
Blog sidebar announcement < div the above mentioned id = "Tsidebox" > / * function bar suspension * / < A href = "# Ttop" the above mentioned id = "Tsidebox_content" > TOP </ A > </ div > Top HTML code < div the above mentioned id = "Ttop" > </ div > / * Anchor tags, the advantages and disadvantages are obvious * /
CSS part:
1 body {/ * insert background image * / 2 background-image : url ("https://cdn.pixabay.com/photo/2015/01/04/02/20/pirates-587988_960_720.jpg") ; 3 background -repeat : no-repeat ; 4 background-size : cover ; 5 background-attachment : fixed ; 6 } 7 8 #home {/ * Adjust the panel to be translucent * / 9 background-color : rgba (255,255,255,0.5) ; 10 } 11 12 #Tsidebox{/ * Right side function bar * / 13 position : fixed ; 14 right : 200px ; 15 background : rgba (0,0,0,0.1) ; 16 border-radius : 12px ; 17 text-align : center ; 18 font -size : 12px ; 19 line-height : 50px ; 20 } 21 22 #Tsidebox_content {/ * At present, only a function to return to the top through the anchor tag * / 23 text-decoration :none ; 24 color : black ; 25 font-family : Arial ; 26 display : block ; 27 height : 50px ; 28 width : 50px ; 29 } 30 31 #Tsidebox: hover {/ * Simple selection of hover bar to beautify * / 32 background : rgba (0,0,0,0.2) ; 33 } 34 35 div [id * = 'sidebar_'] {/ * The intention here is to unify the background color of the right sidebar with the panel, but the result is a problem. The form is still pure white * / 36 background-color : rgba (255,255,255,0.5) ; 37 } 38 39 #navigator {/ * Simple beautification of the top form * / 40 border-top-color : rgba (0,0,0,0.5) ; 41 border- bottom : none ; 42 } 43 44 #footer {/ * Simple beautification of the footer * / 45 border-top-color : rgba (0,0,0,0.5) ; 46 }
Next is the current effect
I did not disable the default template , I simply modified it based on the blog skin SimpleMemory
The tasks that have not yet been completed are:
1. The background color of the search box and list in the right sidebar has not been resolved
2. Since the essay has not been published yet, the display effect of the essay cannot be seen temporarily
The author is a pure white who has just begun to learn CSS knowledge, and is working hard to improve. Anyone who comments is welcome.
I will be able to write my own skin in the future ~