学习CSS基础后对博客主题SimpleMemory的一点小改动

首先列出目前所使用的全部代码

HTML部分:

博客侧边栏公告
<div id="Tsidebox">　　/*悬浮功能栏*/
    <a href="#Ttop" id="Tsidebox_content">TOP</a>
</div>

页首 HTML 代码
<div id="Ttop"></div>　　/*锚标签，优点和缺点都很明显*/

CSS部分:

 1 body{　　/*插入背景图片*/
 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{　　/*调整面板为半透明*/
 9     background-color: rgba(255,255,255,0.5);
10 }
11 
12 #Tsidebox{　　/*右侧悬浮功能栏*/
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{　　/*目前只写了一个通过锚标签回到顶部的功能*/
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{　　/*悬浮栏的简单选中美化*/
32     background: rgba(0,0,0,0.2);
33 }
34 
35 div[id*='sidebar_']{　　/*这里意图将右侧sidebar的背景色与面板统一，但结果出现了问题，搜索框和表单还是纯白色*/
36     background-color: rgba(255,255,255,0.5);
37 }
38 
39 #navigator{　　/*对页首表单的简单美化*/
40     border-top-color: rgba(0,0,0,0.5);
41     border-bottom: none;
42 }
43 
44 #footer{　　/*对页脚的简单美化*/
45     border-top-color: rgba(0,0,0,0.5);
46 }

接下来是目前的效果

我没有禁用默认模版，是在博客皮肤SimpleMemory的基础上进行了简单的修改

目前还没有做完的任务有:

　　1.右侧sidebar内的搜索框和列表背景颜色还未解决

　　2.由于还没有发表过随笔，暂时看不到随笔的显示效果

作者是刚开始学习CSS知识的纯小白，正在努力进步中，欢迎任何提出意见的人

以后有能力了，写一套自己的皮肤~

学习CSS基础后对博客主题SimpleMemory的一点小改动

猜你喜欢