前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >博客园主题修改中用到的css属性

博客园主题修改中用到的css属性

作者头像
Ryan-Miao
发布2018-03-14 10:53:48
1.2K0
发布2018-03-14 10:53:48
举报
文章被收录于专栏:Ryan Miao

样式覆盖

id选择器大于class选择器。

对于原主题中想要覆盖的id选择器,使用!import覆盖。

对于原主题中想要取消的css属性,使用inherit.

响应式

当屏幕宽度不同时,隐藏部分元素。

代码语言:javascript
复制
@media (max-width:1360px) {
    #div_digg {
        bottom: 70px;
        left: 0;
        margin-left: 0;
    }
}
@media screen and (max-width:600px) {
    input#nav_search:focus {
        width: 85px !important;
    }
    input#nav_search { 
        transition: all 0.3s ease-in-out;
        border-bottom: 1px solid #fff;
        width: 40px;
    }
    .hiddenForMobile {
        display: none !important;
    }

}

浮动元素

position设置为fixed, 为了让组件可以浮动在其他组件之上,设置z-index.

fuck me on github

代码语言:javascript
复制
element.style {
    top: 0;
    right: 0;
    border: 0;
    z-index: 100;
    position: fixed;
}

透明的输入框

设置backgroundtransparent可以将输入框透明;

border设为0可以隐藏边框,然后追加bottom样式,注意顺序,后面声明的样式会覆盖前面。

代码语言:javascript
复制
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圆角

代码语言:javascript
复制
#post_detail .postTitle {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

设置字体大小

代码语言:javascript
复制
#post_detail .postTitle {
    font-size: 30px;
    font-weight: 400;
}

设置立体感的边框

代码语言:javascript
复制
#post_detail {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
}

设置公告的虚线分割

代码语言:javascript
复制
.my-profile {
    border-bottom: 1px dashed #333;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

设置引用块左侧颜色

代码语言:javascript
复制
#cnblogs_post_body ul.post-copyright {
    border-left: 3px solid #ff1700;
    background-color: #f9f9f9;
}

将分类的竖排打乱

代码语言:javascript
复制
.catListPostCategory li {
    display: inline-block;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 样式覆盖
  • 响应式
  • 浮动元素
  • 透明的输入框
  • 动画
  • 图标库
  • 组件之间的间距设定
  • 设置div圆角
  • 设置字体大小
  • 设置立体感的边框
  • 设置公告的虚线分割
  • 设置引用块左侧颜色
  • 将分类的竖排打乱
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档