本文主要是介绍【CSS】CSS练习,改自己博客园,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
:root{
}
*{
user-select: none;
}
body{
background-image: linear-gradient( 103.3deg, rgba(252,225,208,1) 30%, rgba(255,173,214,1) 55.7%, rgba(162,186,245,1) 81.8% );
}
#navigator{
}
#navigator #navList{
list-style: none;
display: flex;
justify-content: flex-start;
flex-direction: row;
}
#navigator #navList li{
transition: .4s;
border-radius: 8px;
width: 80px;
height: 40px;
margin-left:5px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
cursor: pointer;
box-shadow:
inset 2px 2px 4px rgba(0,0,0,.1),
inset -2px -2px 4px rgba(255,255,255,.1);
}
#navigator #navList li:hover{
transition: .4s;
box-shadow:
inset 2px 2px 4px rgba(255,255,255,.1),
inset -2px -2px 4px rgba(0,0,0,.1),
2px 2px 4px rgba(0,0,0,.1);
}
#navigator #navList li:active{
transition: .4s;
box-shadow: none;
}
#navigator #navList li a{
color: #666;
text-decoration: none;
}
#navigator #navList li:hover{
transition: .4s;
}
.blogStats{
font-size: small;
display: flex;
justify-content: flex-end;
padding-right: 60px;
}
.day{
margin: 10px 40px;
border-radius: 3px;
}
.day .postTitle,.day .postCon,.day .postDesc{
margin-left: 20px;
margin-right: 20px;
padding: 0 40px;
border-left: solid 1px #999;
border-right: solid 1px #999;
}
.day .dayTitle{
margin-top: 20px;
font-weight: 700;;
padding:10px;
}
.day .postTitle{
padding-top: 20px;
border-top: solid 1px #999;
}
.day .postCon{
color:#666;
font-size: small;
display: flex;
}
.day .postCon .c_b_p_desc{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.day .postCon .c_b_p_desc a{
text-align: end;
}
.day .postSeparator{
height:10px;
}
.day .postDesc{
color:#666;
padding-top: 5px;
border-bottom: solid 1px #999;
padding-bottom: 20px;
font-size: small;
display: flex;
display: flex;
justify-content: flex-end;
}
.day .postDesc *{
padding-left: 10px;
}
这篇关于【CSS】CSS练习,改自己博客园的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!