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

<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. jeecg项目将workbook 的Excel流添加到zip压缩包里导出

    1.直接献出代码 Map<String,List<ConfidentialInformation>> typeMap = new HashMap<>(); try ...

  2. nginx rewrite + 排错方法 + server_name 172.19.134.43

    upstream space.two.cn { ip_hash; #ip hash:每个请求按访问ip的hash结果分配,这样每个访客固定访问一个后端服务器,可以解决session的问题. serve ...

  3. Double类型的数值 在写入excel时 如何去掉 科学计算法的 后面数值+ E的 情况

    Double start = 20190724100000.000; 写入excel时 是 201907E+13 但想要输出的是 20190724100000 这种格式 Java在java.math包 ...

  4. python面试题--初级(一)

    一. Python 中有多少种运算符? 这类面试问题可以判断你的 Python 功底,可以举一些实例来回答这类问题. 在 Python 中我们有 7 中运算符: 算术运算符.关系 (比较) 运算符.赋 ...

  5. P1012拼数

    这是一道字符串的普及—的题. 输入几组数字,怎样组合起来才可以使最后结果最大.一开始这道题类似于那道删数问题,每次删除递增序列的最后一位,达到最小.而这个题我也是想到了贪心做法,于是想逐位判断,让在前 ...

  6. java 覆盖

    作者:又见那斯 java中覆盖基于面向对象三大特征之:继承,同时又和另一特征:多态有重要的联系,本文中讨论的有关java中覆盖的一些知识,其实在写代码的时候或许不会用到,不过知道的话总会有用处.如有错 ...

  7. HTML-美化

    1.美化文本 1.1第一部分 font-size:字体大小,常用em.px.%.rem作单位,预设值small.large.medium,可继承, font-weight:加粗字体,属性为bold,加 ...

  8. Houdini:也许是你未曾听过的最振奋人心的 CSS 进化

    原文链接:Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of更多译文将陆续推出,欢迎点赞+收藏+关注我的 ...

  9. 前端为什么要学习 Selenium

    如果你正在阅读本文,那么可能希望从手动测试升级为自动化测试.你是对的,因为你需要学习 Selenium.我这样说是因为自动化测试已经风靡全球,而且业界正很缺少 Selenium 认证专家. 你可能还想 ...

  10. SSM获取前台参数的方式

    1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交.若"Content-Type"="application/ ...