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

<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. ionic3构建过程中遇到的找不到AndroidManifest.xml的问题

    问题如下: Failed to install 'ionic-plugin-keyboard': Error: ENOENT: no such file or directory, open '/Us ...

  2. 使用cython库对python代码进行动态编译达到加速效果及python第三方包的制作安装

    1.测试代码:新建  fib.pyx # coding:utf-8 import matplotlib.pyplot as plt import numpy as np from sklearn.cl ...

  3. 在搭建Maven项目时导入elasticsearch架包时遇到的问题

    <!-- 使用elasticsearch 需要导入两个包,从网上复制的可能因为有特殊字符报 cvc-complex-type.2.3: Element 'dependency' cannot h ...

  4. java基础笔记(2)

    java中成员变量是有默认初始值的,而局部变量是没有的: 构造方法名和类名相同,没有返回值,即结构如下:public 构造方法名(): 实例化类的本质就是调用了类的构造方法: 如果自定义了构造方法,就 ...

  5. Lucky Boy

    Lucky Boy Problem Description Recently, Lur have a good luck. He is also the cleverest boy in his sc ...

  6. Tomcat域名与服务器多对多配置

    参考: https://www.cnblogs.com/yueshutong/p/9381566.html

  7. 列表and元组操作

    一.列表  列表是我们以后比较常用的数据类型之一,通过列表我们可以实现对数据的存储.修改等操作. 首先,我们看一下列表的定义: 有了列表以后,我们可以通过下标来访问列表中的元素.注意:下表是从0开始的 ...

  8. node搭建个人博客promise警告解除

    警告 (node:8500) UnhandledPromiseRejectionWarning: undefined (node:8500) UnhandledPromiseRejectionWarn ...

  9. TCP/IP四层协议

    1.数据链路层 数据链路层实现了网卡接口的网络驱动程序,处理数据在物理媒介(以太网,令牌环)上的传输,常用协议包含ARP(地址解析协议),RARP(逆地址解析协议)两个协议,他们实现了IP地址和物理地 ...

  10. vue.js(20)--vue路由

    后端路由 对于普通的网站,所有的超链接都是url地址,所有的url地址都对应着服务器上的资源 前端路由 对于单页面应用程序来说,主要通过单页面中的hash(#)来进行页面的切换.hash的特点是htt ...