文档章节

PC常见CSS效果锦集 - 01

J
 Jia。
发布于 2016/12/11 22:04
字数 306
阅读 4
收藏 1
点赞 0
评论 0

各个主流浏览器内核

  • IE: Trident
  • Safari: webkit 内核
  • Opera: 以前是presto 内核,现在改用Google Chrome 的Blink内核
  • Chrome: Blink(基于webkit,Google与Opera Software 共同开发)
  • 360: 双内核(极速模式:webkit,兼容模式:Trident;)
  • Firefox: Geoko

常见的css效果

文本多行溢出

  • css 代码实现
            display: -webkit-box !important;
            overflow: hidden;

            text-overflow: ellipsis;
            word-break: break-all;

            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
  • 经过测试,在Google、Opera、360极速模式下正常显示,IE、Firefox、360兼容模式下没有效果,还需要使用height来限制内容高度

文本单行溢出

  • css 代码实现

            overflow: hidden;

            white-space: nowrap;

            text-overflow: ellipsis;
  • Google、Opera、360、IE、Firefox都正常显示

背景透明

  • raba(90,183,232,.6)
    经过测试,Google、Firefox、Opera、360极速模式都可以正常显示透明度,IE8和360兼容模式(IE8)不能够正常显示透明度

  • opacity= 0.6
    经过测试,oogle、Firefox、Opera、360极速模式都可以正常显示透明度,IE8和360兼容模式(IE8)不能够正常显示透明度

  • 解决IE8下背景透明问题

filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#cc12485d',endColorstr='#cc12485')

以颜色值 #FF99CC00 为例,其中,FF是透明度,99是红色值, CC是绿色值, 00是蓝色值。

© 著作权归作者所有

共有 人打赏支持
J
粉丝 0
博文 4
码字总数 1627
作品 0
深圳
前端工程师
前端常用CSS小技巧

Genius only means hard-working all one's life. 注意:以下前缀兼容性写法注释 -o-:Opera -ms://IE10 -moz://火狐 -webkit://Safari 4-5, Chrome 1-9 17. 实现按比例计算浅红到深红的颜...

Neuro_annie ⋅ 2017/11/21 ⋅ 0

Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie ⋅ 2017/12/27 ⋅ 0

UI设计师/前端开发工程师 招聘

职位描述 1、负责PC端、负责Html5网站及移动端Web App开发; 2、Html5网站系统的性能稳定和优化升级; 3、为产品后期运营提供升级、维护等技术支持。 4.与后台开发工程师协作,完成各种数据交...

mahb520 ⋅ 2016/08/01 ⋅ 1

史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp ⋅ 2017/01/13 ⋅ 0

快切响应式 css 框架发布 v1.4 版本

快切开源响应式css框架发布v1.4版本,新增了计数器counter组件!更改了网站主色调为#698绿色,新增css3图片移上去放大类img-scale,修正了导航naver的响应式bug及增加了css3动画效果,增加了...

qietuwang ⋅ 2015/07/12 ⋅ 10

12款非常精致的免费 HTML5 & CSS3 网站模板

01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历、摄影师和平面设计师的个人作品展示。 演示 下载 02. Folder Folder是一款响应式 HTML5 网站模板...

未来十年 ⋅ 2013/08/12 ⋅ 0

炙手可热的12款网站模板推荐

每周极客标签都将推出两篇荟萃内容的文章,内容覆盖了Bootstrap、CSS、Javascript、HTML5等当前最热门的特效和应用,本周我们推荐的这12款网站设计模板不仅带有独立的在线演示,并且依旧全部...

gbin1 ⋅ 2014/04/23 ⋅ 1

给你的移动网站加点料:移动旋转菜单的实现方案

在github上看到有人用HTML5 + CSS3 + Javascript实现了jQuery Wheel Menu(旋转菜单),因为本人供职于移动网站的开发,又不是一个专业的前端开发,所以看到这么炫的东东肯定就垂涎三尺,想移...

幸福2胖纸 ⋅ 2013/08/31 ⋅ 0

通过响应式web设计,使本站支持手机浏览

2014-01-28 14:49:14 现在越来越多的人通过手机来上网,手机由于屏幕尺寸的原因,当浏览为PC端浏览器设计的网页的时候,往往会出现各种各样的问题。 糊涂僧的这个小博客也一样,为了让本站在...

squanchao ⋅ 2016/06/29 ⋅ 0

Oracle RMAN 实践

Copyright (c) 1982, 2005, Oracle. All rights reserved. 连接到目标数据库: ORCL (DBID=1248612147) RMAN> EXIT 恢复管理器完成。 C:/Documents and Settings/Administrator>RMAN 恢复管理......

晨曦之光 ⋅ 2012/03/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout推荐算法之SlopOne

一、 算法原理 有别于基于用户的协同过滤和基于item的协同过滤,SlopeOne采用简单的线性模型估计用户对item的评分。如下图,估计UserB对ItemJ的偏好 图(1) 在真实情况下,该方法有如下几个...

xiaomin0322 ⋅ 9分钟前 ⋅ 0

LVM讲解

LVM是什么 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制,Linux用户安装Linux操作系统时遇到的一个常见的难以决定的问题就是如何正确地...

李超小牛子 ⋅ 18分钟前 ⋅ 0

mysql更改密码、连接mysql、mysql常用命令

1. 更改mysql的root账户密码: mysql中root账户和系统root不是一个账户 1.1 更改环境变量PATH,增加mysql绝对路径 由于mysql安装目录为/usr/local/mysql/,所以系统不能直接使用mysql,需把/...

laoba ⋅ 19分钟前 ⋅ 0

阿里云发布企业数字化及上云外包平台服务:阿里云众包平台

摘要: 阿里云正式发布旗下众包平台业务(网址:https://zhongbao.aliyun.com/),支持包括:网站定制开发,APP、电商系统等软件开发,商标、商品LOGO、VI、产品包装设计、营销推广、大数据人...

猫耳m ⋅ 19分钟前 ⋅ 0

阿里云发布企业数字化及上云外包平台服务:阿里云众包平台

摘要: 阿里云正式发布旗下众包平台业务(网址:https://zhongbao.aliyun.com/),支持包括:网站定制开发,APP、电商系统等软件开发,商标、商品LOGO、VI、产品包装设计、营销推广、大数据人...

阿里云云栖社区 ⋅ 23分钟前 ⋅ 0

1.03-Maven中使用ueditor富文本编辑器

起因:在maven仓库未找到百度的ueditor的jar包 操作: 1.下载百度的ueditor的jar包 2.打开命令行,切换到ueditor的下载位置,运行一下命令: mvn install:install-file -Dfile=ueditor-1.1....

静以修身2025 ⋅ 28分钟前 ⋅ 0

几道Spring 面试题

1、BeanFactory 接口和 ApplicationContext 接口有什么区别? ApplicationContext 接口继承BeanFactory接口 Spring核心工厂是BeanFactory BeanFactory采取延迟加载,第一次getBean时才会初始...

职业搬砖20年 ⋅ 38分钟前 ⋅ 0

包饺子

http://storage.slide.news.sina.com.cn/slidenews/77_ori/2018_24/74766_826131_625489.gif

霜叶情 ⋅ 39分钟前 ⋅ 0

xml解析

方法一: String s_xml1 = "<xml>" + "<head>lalalalal</head>" + "<body>1234</body>" + "</xml>"; try { DocumentBuilderFactory documentBuilderFactory......

GithubXD ⋅ 51分钟前 ⋅ 0

reuse stream

Although Java streams were designed to be operated only once, programmers still ask how to reuse a stream. From a simple web search, we can find many posts with this same issue ......

idoz ⋅ 52分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部