css样式相关小知识

文字超出一行显示省略号

overflow: hidden;   /*自动隐藏文字*/
text-overflow: ellipsis; /*文字隐藏后添加省略号*/
white-space: nowrap; /*强制不换行*/

文字超出两行显示省略号

overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制行数 */
-webkit-box-orient: vertical;

样式优先级关系

!important > 内联样式 > id选择器样式 > 类选择器样式 > 元素选择器样式

过渡样式

transition: property duration timing-function delay;

transition-property:指定过渡的css属性名;当设置多个属性过渡时,属性之间用逗号隔开

transition-duration:过渡时间;规定了完成过渡需要花费的时间,可以为s或ms

transition-timing-function:规定属性过渡效果的速度曲线,取值可以为ease(默认值,慢速开始,快速变化,慢速结束) / linear(始终保持相同的速度) / ease-in(慢速开始,加速效果)/ease-out(有减速的效果) / ease-in-out(慢速开始和结束,先加速再减速)

transition-delay:过渡延迟,即多长时间以后再执行过渡效果,取值为秒或毫秒

禁止元素点击事件

.no-click{ pointer-events:none;}

webkit内核美化滚动条

/*整体部分*/
::-webkit-scrollbar
{
width: 10px;
}
/*滑动轨道*/
::-webkit-scrollbar-track
{
background: none;
}
/*滑块*/
::-webkit-scrollbar-thumb
{
background-color: rgba(255,255,255,.75)
}
/*滑块效果*/
::-webkit-scrollbar-thumb:hover
{
background-color: rgba(85, 85, 85, 0.4);
}

选取第n个元素

li:first-child{
background:#fff /* 首个元素 */
}
li:last-child{
background:#fff /* 最后一个元素 */}
li:nth-child(3){
background:#fff /* 指定第3个元素 */
}
li:nth-last-child(3){
background:#fff /* 指定倒数第3个元素 */
}

自定义博客cnblogs样式的必备前端小知识——css的更多相关文章

  1. 自定义博客cnblogs样式的必备前端小知识——js、jq

    JQ.JS相关小知识 任意元素自动点击 $(".editicon").trigger('click') 添加子元素 append() - 在被选元素的结尾插入内容 prepend( ...

  2. 【转】CnBlogs自定义博客样式

    文章有一个好的排版,将能够增加阅读者对其内容的兴趣. 本文总结了如何美化博客园中文章的部分显示样式. 1.美化文章标题的显示样式 2.增添LaTex数学公式的显示 3.目录索引的显示 4.添加文章末尾 ...

  3. CnBlogs自定义博客样式

    弄了半个晚上的时间,总算马马虎虎搞好了博客的样式. 整个博客是蓝色的基调,比较激情,我喜欢. 比较郁闷的是,rightmenu 和 main都是position:absolute 布局的.要添加一个f ...

  4. web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址

    web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址   Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=rs ...

  5. 【技术博客】基于vue的前端快速开发(工具篇)

    一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...

  6. Chrome 插件自定义博客编辑界面

    总觉得博客园的编辑器太白了,特别是在晚上,太明亮了刺眼.在后台设置里面找不到任何可以修改UI的地方,考虑用浏览器插件自己改一下.要是做得好,可以给大家一起用. 新建目录 E:/cnblog.js,添加 ...

  7. vue koa2 mongodb 从零开始做个人博客(一) 登录注册功能前端部分

    0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.准备工作 1.1前端框架 前端使用了基于vue.js的nuxt.js.为什么使用nuxt.js? 首先我做的是博客的项目 ...

  8. 基于 Laravel 开发博客应用系列 —— 项目必备软件安装

    1.概述 通过本项目我们将会构建一个简单.清爽.优雅的博客系统,以及维护管理该博客的后台. 本项目源码公开在GitHub上:https://github.com/ChuckHeintzelman/l5 ...

  9. 前端小知识(转载http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html)

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

随机推荐

  1. 备战省赛组队训练赛第十七场(UPC)

    upc:传送门 A: 题解[1] G: 题解[1] D,G,H,J,L 题解 by 鲁东大学

  2. LR性能测试自动化集成JENKINS

    LR11不支持JENKINS集成,解决方案可以使用BAT代替执行,JENKINS定时调用BAT执行性能测试用例.   1. 先随便录制l一个LR脚本,保存为 D:\TEST\test01 2. 打开 ...

  3. H3C 三种生成树协议特性的比较

  4. centos虚拟机Ping不通网关

    centos虚拟机Ping不通网关 今天在VMware中安装了centos mini版本,安装完成后,用xshell连接一直连不上,本来以为是mini版本没有安装ssh server,于是就用命令: ...

  5. 【Jenkins】pipeline-hello-world项目

    1.New Item 2.Pipeline Definition 3.Build Error 4.Solution 5.Console Output

  6. Delphi中的Val函数和iif函数(出错的时候,会有索引值)

    在delphi中Val是一个将字符串转换为数字的函数,Val(S; var V; var Code: Integer)第一个参数是要转换的字符串,第二个参数存放转换后的数字,可以是整数或浮点数,第三个 ...

  7. Python3_函数参数传递、可变与不可变对象、变量作用域、函数返回值

    参数传递: 在 python 中,类型属于对象,变量是没有类型的:(变量都仅仅是一个对象的引用,没有类型之分)a=[1,2,3] a="Runoob" 以上代码中,[1,2,3] ...

  8. Microsoft Edge 离线安装包下载

    Microsoft Edge 现已准备就绪 下一版 Microsoft Edge 已准备好进行企业评估. 立即下载离线安装程序.查看管理策略并尝试 Internet Explorer 模式. http ...

  9. Java图形打印 上下对称三角星

    记录记录 @Test public void name03() { int row = 9; for (int i=0,k=row,m=0;i< row;i++){ for(int l=m-i; ...

  10. X-Admin&ABP框架开发-代码生成器

    在日常开发中,有时会遇到一些相似的代码,甚至是只要CV一次,改几个名称,就可以实现功能了,而且总归起来,都可以由一些公用的页面更改而来,因此,结合我日常开发中使用到的页面,封装一个适合自己的代码生成器 ...