• css控制竖直文字显示


    假如有一天,你把水平文字看腻味了......

    我建议你不妨试试垂直文字显示,就像这样:

    哈哈!

    言归正传,怎么把一段话,垂直显示呢?

    方法1:

    //把下面代码另存为html试试就知道了;

    //少些了些代码,适合有基础的同学观看,不会再问我;

    h1 span { display: block; } 
    <h1> 
    <span> N </span> 
    <span> E </span> 
    <span> T </span> 
    <span> T </span> 
    <span> U 
    <span> T </span> 
    <span> S </span> 
    </h1>

    方法2:

    //把下面代码另存为html试试就知道了;

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Vertical Text</title> <style> 
    h1 { 50px; font-size: 50px; word-wrap: break-word; } 
    </style> </head> 
    <body> 
    <h1> NETTUTS </h1> 
    </body> 
    </html>

    方法3:

    //把下面代码另存为html试试就知道了;

    <!DOCTYPE html> 
    <html> 
    <head> 
    <title>竖向排列的文字</title> 
    <style> 
    h1 { 50px; font-size: 50px; word-wrap: break-word; letter-spacing: 20px; } </style> </head> 
    <body> 
    <h1>竖向排列的文字</h1>
    </body> 
    </html>

    方法4:

    //javascript实现的,复杂化了,不过可以装逼嘛

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Vertical Text</title> <style> 
    h1 span { display: block; } 
    </style> 
    </head> 
    <body> 
    <h1> NETTUTS </h1> <script> 
    var h1 = document.getElementsByTagName(‘h1′)[0]; 
    h1.innerHTML = ‘<span>’ + h1.innerHTML.split(”).join(‘</span><span>’) + ‘</span>’; </script> 
    </body> 
    </html>

    谢谢观看!

  • 相关阅读:
    python爬取代理IP地址
    神经网络训练的过程
    机器学习中用到的数学概念
    Navicat连接Mysql错误代码1251
    mysql安装
    mysql运行找不到MSVCP140.dll
    tomcat 日志乱码
    扁平化 Flat
    常见的WEB安全及防护
    CentOS ceph 集群搭建(单节点)
  • 原文地址:https://www.cnblogs.com/lwj820876312/p/7485187.html
Copyright © 2020-2023  润新知