1.移动端最小设置字体为12px,如果想要更小字体效果:

-webkit-transform:scale(0.9);

2.文字超过两行时,末尾显示点点的效果:

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

3.文字不换行,长度超过60px时显示点点的效果:

width: 60px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;

4背景图片的兼容性写法:

background: url("../img/header_bg.png") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 55px;

5.线性渐变条的兼容性写法:

background: -moz-linear-gradient(bottom, #F66E22, #FFD260);
background: -webkit-linear-gradient(bottom, #F66E22, #FFD260);
background: -o-linear-gradient(bottom, #F66E22, #FFD260);

6.多使用flex布局(一般处理上下左右居中)

display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
当然还有其他一些常见的,比如:
flex: 1;(自适应长度)
-webkit-flex: 1;
flex-direction: culumn;(对齐方式)
-webkit-flex-direction: column;
flex-wrap: wrap;(启用换行,默认不换行)
-webkit-flex-wrap:wrap; 不再赘述,详细请参考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 7.div模拟输入框 设置placeholder 高度自适应
  首先contenteditable="true"
div{
width: 100%;
min-height: 20px;
/*设置最小高度*/
max-height: 300px;
/*设置最大高度超过300px时出现滚动条*/
margin-left: auto;
margin-right: auto;
outline: 0;
color:#000;
font-size: 14px;
line-height: 24px;
word-wrap: break-word;
word-break:break-all;
overflow-x: hidden;
overflow-y: auto;
}
div:empty::before {
color:#666;
content:attr(placeholder); }

  

css 页面特殊显示效果的更多相关文章

  1. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  2. Css - 页面标签页图标

    Css - 页面标签页图标 <head>     <meta charset="utf-8" />     <title>京东(JD.COM)- ...

  3. CSS 页面布局、后台管理示例

    CSS 页面布局.后台管理示例 页面布局 1.头部菜单 2.中间内容/中间左侧菜单 3.底部内容 <div class='pg-header'> <div style='width: ...

  4. CSS页面排版的一点笔记

    CSS页面排版 字体族 字体族的值是一个字体备选列表,多个字体使用英文逗号隔开,字体名称如果有空格则需要引号. font-family: "Georgia Pro", " ...

  5. CSS页面乱码 GB2312、UTF-8格式问题解决方案

      如同左图所现,出现了页面乱码问题本来应该是显示gb3212字符的"关闭"文字了.. 解决方案一: 在所调用的CSS页面的第一行添加下边的这一句代码, 注意:一定要是在CSS的头 ...

  6. js+css页面横屏

    <!DOCTYPE html> <html lang='zh'> <head> <meta charset="utf-8" /> & ...

  7. CSS页面布局常见问题总结

    在前端开发中经常会碰到各种类型布局的网页,这要求我们对css网页布局非常熟悉.其中水平垂直居中布局,多列布局等经常会被使用到,今天就来解决一下css布局方面的问题. 水平垂直居中的几种方法 说到水平垂 ...

  8. css页面组件

    页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 m ...

  9. dic+css页面布局分享

    HTML部分代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

随机推荐

  1. 201521123053《Java程序设计》第十周学习总结

    ---恢复内容开始--- 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 在java多线程程序中,所有线程都不允许抛出未捕获的checked excepti ...

  2. 201521123045 《JAVA程序设计》第1周学习总结

    1. 本周学习总结 学习了入门的java知识,知道了jdk.eclipse等基础软件,了解了如何编译最基础的java程序.知道了java的基本原理以及java的几种数据类型.掌握使用简单编译器编写ja ...

  3. html css 前端基础 学习方法及经验分享

    前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...

  4. 32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址

    32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址 一丶基址,随机基址的理解 首先,全局变量的地址,我们都知道是固定的,是在PE文件中有保存的 但是高版本有了随机基址,那么要怎么解决这 ...

  5. 《MySQL必知必会》[02] 多表联合查询

    1.基本连接 不同类型的数据,存储在多个表中,而所谓多表连接,就是将多个表联合返回一组输出. 1.1 等值连接 基本的连接方式非常简单,只需要在WHERE子句中规定如何关联即可,如下: SELECT ...

  6. svn服务器配置与客户端的使用

    1, Apache Subversion 官网下载地址: http://subversion.apache.org/packages.html#windows 官网下载提供的一般都是最新版本的,如果想 ...

  7. Spring Security研究(2)-高级web特性

    1, 添加 HTTP/HTTPS 信道安全 <http> <intercept-url pattern="/secure/**" access="ROL ...

  8. activiti07- Task

    任务 用户任务: 用户任务,用来对那些需要人参与完成的工作进行建模.当流程执行到这样的用户任务时,会在被分配到该任务的用户或用户组的任务列表中创建新的任务. 用户任务中可以包含描述.事实上,任何BPM ...

  9. memcached readme

    memcache======== http://www.cnblogs.com/jeffwongishandsome/archive/2011/11/06/2238265.html # 命令 ## 存 ...

  10. Glide 这样用,更省内存!!!

    一.前言 Glide 是 Google 官方推荐的一款图片加载库,使用起来也非常的简单便利,Glide 它帮我们完成了很多很重要,但是却通用的功能,例如:图片的加载压缩.展示.加载图片的内存管理等等. ...