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

<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. Java中字母大小写的转换

    例:String str = "AbC"; 把字符串所有字母变成小写: System.out.println(str.toLowerCase()); 把字符串所有字母大写: Sys ...

  2. BusyBox TFTP使用(转)

    开发板上使用TFTP 帮助信息: BusyBox v1.13.3 (2009-03-25 15:48:45 CST) multi-call binary Usage: tftp [OPTION]... ...

  3. linux-导入python自定义模块的使用方法

    #!/usr/bin/python # -*- coding:utf -8 -*- import os import sys sys.path.append("/h/s/compare_f& ...

  4. 小a的轰炸游戏(差分,前缀和)

    题目传送门 题意: 给出一个n*m的矩形,然后有两个操作. 1操作,对一个给出的菱形,对菱形范围内的东西进行+1. 2操作,对一个上半菱形的区域,进行+1操作. 最后求矩形内各个数的异或和. 思路: ...

  5. 简单的物流项目实战,WPF的MVVM设计模式(二)

    往Models文件添加一个类,ConnectObject         /// <summary>        /// 链接数据库字符串        /// </summary ...

  6. Api接口管理工具推荐

    在App开发过程中少不了跟服务端打交道,各种HTTP接口调试.返回数据处理占据了不少开发时间,一款好的接口管理工具就非常有必要了.接口管理工具一方面起到链接后台开发人员和App开发人员的作用,另一方面 ...

  7. Gradle Settings 类的学习

    # 任务 了解 Settings 类作用于 Gradle 构建的哪个阶段? 了解 Settings 类与 settings.gradle 的关系 了解和使用 inlcude 方法 hook 初始化阶段 ...

  8. 简单的python笔试题

    1.输出九九乘法口诀 for i in range(1,10): for j in range(1,i+1): print('{}*{}={}'.format(j,i,i*j),end=' ') pr ...

  9. Docker学习笔记--传送门(持续更新)

    1.ubuntu下安装docker:  https://www.cnblogs.com/salmonLeeson/p/11609699.html 2.为docker配置国内镜像加速器:https:// ...

  10. VMware Workstation 卸载时卡在“正在卸载网络驱动程序(Virtual Network Editor夯死)”

    出现此种问题,以下方式均无法成功卸载: 控制面板-卸载程序(Virtual Network Editor 未响应) Geek 卸载VMware Workstation(Virtual Network ...