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

样式覆盖

id选择器大于class选择器。

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

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

响应式

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

@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

element.style {
    top: 0;
    right: 0;
    border: 0;
    z-index: 100;
    position: fixed;
}

透明的输入框

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

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;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博客

C#基础知识系列四(运算符汇总)

   本节主要来讲C#中的各种运算符。主要包括is运算符、as运算符、checked和unchecked运算符、sizeof运算符、空接合运算符(??)、&和&...

534
来自专栏前端知识分享

第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。

783
来自专栏西安-晁州

日期加减一天

对数据库查询出的datetime格式的时间数据做范围查询时,如果直接使用如下"<="方式比较的话,会出现查询结果不包含截止时间的问题,一个小技巧是直接给当前时间...

1930
来自专栏coding

vue自定义transition样式前缀名

默认情况下,控制 transition 样式的类名是以 'v-' 为前缀,我们可以自定义前缀名

712
来自专栏LeoXu的博客

Flex笔记_使用Spark列表控件 原

ListBase ->  SkinnableDataContainer -> SkinnableContainerBase -> SkinnableCompo...

723
来自专栏杨龙飞前端

页面重绘和回流(重排)以及优化

1334
来自专栏张善友的专栏

Enumerable#zip特性

看到文章Zip operator in Linq with .NET 4.0, Enumerable#zip是Ruby 1.8开始出现的特性,.NET 4/Si...

1819
来自专栏LeoXu的博客

[翻译]Ext JS 教程-组件 原

一个ExtJS 应用程序是由一个或者更多个叫做组件的窗口小部件组成的。所有的组件都是Ext.Component类的子类,它允许它们参与到自动的生命周期管理中去...

943
来自专栏林德熙的博客

win10 uwp 反射

本文在h神的指导下完成。 反射是强大的好用的,我们可以添加新功能不修改之前的代码,通过使用反射得到。 本文下面和大家说如何做一个和WPF一样的反射功能,如何才能...

342
来自专栏飞扬的花生

Bootstrap学习------Tabel

     Bootstrap的表格和Html表格大同小异,只是封装了一些css供我们使用 <table>标签必须引用class="table"基类样式,我们可以...

1785

扫描关注云+社区