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

相关文章

来自专栏运维小白

Windows7自带便签

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

2096
来自专栏林德熙的博客

win10 UWP 动画 动画入门

在 UWP 移动元素的动画,可以使用 RenderTransform 移动,然后使用动画修改 RenderTransform 进行动画。关于元素移动,请看 wi...

1201
来自专栏菜鸟前端工程师

html+css学习笔记006-伪类

1002
来自专栏Young Dreamer

canvas绘图不清晰的解决方案

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

18810
来自专栏calmound

CSS格式化排版

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

29310
来自专栏小樱的经验随笔

【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从...

3338
来自专栏pangguoming

CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技...

39310
来自专栏Nian糕的私人厨房

CSS 布局_3 Position元素定位

我们之前已经介绍过行元素,块元素及行内块元素的属性了,能够知道它们是具有自己默认的显示方式的,即元素会按照文档流 (document flow) 的方式,自上而...

1054
来自专栏DeveWork

WordPress 编辑器快捷键——让写作来得更方便些吧!

偶然在网络上看到的,所以转载在本站DeveWork.com 。这个是默认编辑器的快捷键,也很好记,有了这个,就能更加方便进行写作了。据说现在Markdown 语...

2175
来自专栏分享达人秀

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

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

1856

扫码关注云+社区