博客园主题修改中用到的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 条评论
登录 后参与评论

相关文章

来自专栏一个爱瞎折腾的程序猿

自定义滚动条样式(layui.v1)

2921
来自专栏V站

CSS毛玻璃效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

1822
来自专栏分享达人秀

屏幕宽高不够,滚动视图ScrollView来凑

前面几期学习了ProgressBar系列组件、ViewAnimator系列组件、Picker系列组件和时间日期系列组件,接下来几期继续来学习常见的其他组...

1946
来自专栏calmound

CSS格式化排版

 用CSS样式为网页中的文字设置字体,字号,颜色等属性 字体:      body{font-family:"Microsoft Yahei"} 字号,颜色: ...

29610
来自专栏Spring相关

UI设计-详解四种布局

LinearLayout又称为线性布局,是一种非常常用的布局.这个布局会将它所包含的控件在线性方向上依次排列.

1212
来自专栏运维小白

Windows7自带便签

在开始——>輸入 stikynot 输入之后便会出现下图 ? 相关功能快捷键 Ctrl + E:居中对齐 Ctrl + L:居左对齐 Ctr...

2156
来自专栏HTML5学堂

SVG - 动画制作

SVG - 动画制作 HTML5学堂:SVG - 动画制作。上一篇文章讲解了SVG的基本属性,大家能够利用SVG的基本属性进行绘制图像,那么如何让绘制好的图像动...

52010
来自专栏菜鸟计划

CSS布局(五) 网页布局方式

网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块。 三种关系:相邻,嵌套,重叠。 下面介绍网页布局的常用几种方式 ? 1.一列布局: 一般都是固定的宽高...

3866
来自专栏Young Dreamer

canvas绘图不清晰的解决方案

现象描述   同样大小的图片(60x60px)用canvas和DOM绘制,结果发现canvas的画面质量要差很多。结果如下图所示。 ?   上图中,左侧红框中的...

20110
来自专栏极乐技术社区

wxss学习《四》字体,组件及API的思维导图

一:字体 一.字体:font。设置对象的文本特性。 1.font-style:文字样式。 取值:normal 正常的字体, italic 斜体字, o...

19710

扫码关注云+社区