样式覆盖
id选择器大于class选择器。
对于原主题中想要覆盖的id选择器,使用!import
覆盖。
对于原主题中想要取消的css属性,使用inherit
.
浮动元素
将position
设置为fixed
, 为了让组件可以浮动在其他组件之上,设置z-index
.
fuck me on github
element.style { ???top: 0; ???right: 0; ???border: 0; ???z-index: 100; ???position: fixed;}
透明的输入框
设置background
为transparent
可以将输入框透明;
将border
设为0可以隐藏边框,然后追加bottom样式,注意顺序,后面声明的样式会覆盖前面。
input#nav_search { ???background: transparent; ???transition: all .6s ease-in-out; ???border: 0; ???border-bottom: 1px solid #fff; ???color: #fff; ???width: 5pc;}
动画
css3中同一个元素属性发生变化后可以声明一个变化过程,即transition
. transition: all .6s ease-in-out;
表示0.6s内完成动画。
图标库
引入http://fontawesome.io . 比如search的图标为fa fa-search
组件之间的间距设定
使用padding和margin来设置间距而不是声明width和hight后调整中心。
设置div圆角
#post_detail .postTitle { ???border-top-right-radius: 10px; ???border-top-left-radius: 10px;}
设置字体大小
#post_detail .postTitle { ???font-size: 30px; ???font-weight: 400;}
设置立体感的边框
#post_detail { ???box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);}
设置公告的虚线分割
.my-profile { ???border-bottom: 1px dashed #333; ???padding-bottom: 25px; ???margin-bottom: 25px;}
设置引用块左侧颜色
#cnblogs_post_body ul.post-copyright { ???border-left: 3px solid #ff1700; ???background-color: #f9f9f9;}
将分类的竖排打乱
.catListPostCategory li { ???display: inline-block;}