最近要写一个页面,需要一排文字是倾斜的,我就写了一下

<div class="qingx">倾斜导航</div>
div.qingx{
-moz-transform: translateY(-20deg);
-o-transform: translateY(-20deg);
transform: translateY(-20deg);
transform:rotate(-20deg);
-ms-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
padding:5px 10px;text-align:center;
background-color:lightskyblue;
width:80px;
height:30px;
line-height:30px;
color: white;
margin: 50px;
}

  效果图:

好啦,可以实现了,不过就是要加上那些兼容的前缀。

  

div的文字倾斜的更多相关文章

  1. 基于jQuery实现文字倾斜显示代码

    这是一款基于jQuery实现文字倾斜显示,这是一款基于jQuery实现的超酷动态文字显示效果.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. ...

  2. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  3. ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案

    原文:ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案 根据实际JPG图片进行配准后,发布的地图,利用ArcGIS API for Silverlight在网页 ...

  4. 00002、div的文字垂直居中与背景的渐变

    1.div可以放多行的文字,当显示文字较少时,文字可垂直居中 text-align: center; display: table-cell; vertical-align: middle; text ...

  5. [置顶] echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

  6. CSS div内文字显示两行,超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  7. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  8. CSS 之 div中文字超出时自动换行

          在开发中很容易遇到div中文字超出的问题,在此总结以下方法: 1. white-space :属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支 ...

  9. 关于echarts绘制树图形的注意事项(文字倾斜、数据更新、缓存重绘问题等)

    最近项目中使用到echarts的树操作,对其中几点注意事项进行下总结. 效果图: 1.基础配置 options的配置如下: { tooltip: { trigger: 'item', triggerO ...

随机推荐

  1. Vue.js系列:生命周期钩子

    开发人员提供了一个Web开发人员可以在Vue.js应用程序的整个生命周期中使用的各种方法的讨论. 生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法.从初始化开始到它被破坏时,对象都会遵循不 ...

  2. mysql定时任务/mysql作业

    转自:https://www.jb51.net/article/138569.htm 详细参考:https://www.cnblogs.com/qlqwjy/p/7954175.html(事件& ...

  3. C#基础篇之C#和 .Net框架的概念和运行原理

    一.微软平台的发展史 二..Net框架包含的东西 1.名词解释 BCL:基类库(Base Class Library)系统和底层提供的最基本的类库 CLR:公共语言运行时(Common Languag ...

  4. 前端导出excel文件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. redis进阶知识

    原文地址:https://my.oschina.net/u/4052893/blog/3001173 一.缓存雪崩 1.1什么是缓存雪崩? 回顾一下我们为什么要用缓存(Redis): 现在有个问题,如 ...

  6. Linux命令(持续更新)

    1. tail 命令    tail 命令可用于查看文件的内容,有一个常用的参数 -f 常用于查阅正在改变的日志文件. tail  -f  filename 会把 filename 文件里的最尾部的内 ...

  7. 通过修改host解决VS2019下载极慢的问题

    原文:通过修改host解决VS2019下载极慢的问题 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn ...

  8. Jmeter学习总结

    学习内容: 1.用户定义的变量 作用:多个地方使用同一个值,且该值在不同的环境下不同,方便脚本在不同环境下运行时修改. 2.基本的HTTP请求,请求方式:get 3.传入参数为json 4.HTTP信 ...

  9. Android 开发环境部署

    引言   在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环 ...

  10. redHat 安装mono 错误

    make[6]: * [do-install] Error 2 make[6]: Leaving directory /root/lindexi/mono-2.11.3/mcs/class/Syste ...