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

<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. 【Qt开发】【VS开发】【Linux开发】OpenCV、Qt-MinGw、Qt-msvc、VS2010、VS2015、Ubuntu Linux、ARM Linux中几个特别容易混淆的内容

    [Qt开发][VS开发][Linux开发]OpenCV.Qt-MinGw.Qt-msvc.VS2010.VS2015.Ubuntu Linux.ARM Linux中几个特别容易混淆的内容 标签:[Qt ...

  2. 多线程14-Barrier

    , b => Console.WriteLine());         ; i <= ; i++)             {                 Console.Write ...

  3. zookeeper 分布式协调服务

    分布式协调服务作用是将多机协调的职责从分布式应用中独立出来,以减少系统的耦合性和增加扩展性. 而zookeeper采用分布式中经典的主从架构:master->slave,通常以动态的存储分布式应 ...

  4. P1313计算系数

    这是2011年提高组第一题,一个数论题.如果当年我去的话,就爆零了wuwuwu. 题目:(ax+by)^k中询问x^m*y^n这一项的系数是多少?拿到题我就楞了,首先便是想到DP,二维分别存次数代表系 ...

  5. uboot初识

    一. 什么是uboot 1.1. uboot的由来 1.1.1. uboot是SourceForge上的开源项目 1.1.2. uboot就是由一个人发起,然后由整个网络上所有感兴趣的人共同维护发展而 ...

  6. mybatis oracle 批量新增

    假定场景:批量导入用户信息 一般批量新增使用 SELECT … INSERT INTO 和 INSERT INTO … SELECT 我们这次使用第二种 一.先建一张用户信息表模拟批量导入用户信息 c ...

  7. How to download and compile Android kernel goldfish ?

    Prerequisites Assuming that we already downloaded the android-ndk-r12b and sdk. w4118@w4118:~/utils$ ...

  8. P4050 [JSOI2007]麻将

    传送门 怎么好像没什么人写 $dp$ ...? 设 $f[i][j][k][0/1]$ 表示当前处理完前 $1$ 到 $i$ 的数,上一位开始的顺子有 $j$ 个,当前位开始的顺子有 $k$ 个,是否 ...

  9. 锋利的jQuery ——jQuery中的事件和动画(四)

    一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){}  方法内注册的事件, ...

  10. 前端Unicode字符图标

    前端Unicode字符图标 原文链接地址:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141225979.html