专栏首页网页开发/美化AntUI文字书写范例(util/writing)

AntUI文字书写范例(util/writing)

h1 - h6 标题

<h1>标题文字 h1</h1>
<h2>标题文字 h2</h2>
<h3>标题文字 h3</h3>
<h4>标题文字 h4</h4>
<h5>标题文字 h5</h5>
<h6>标题文字 h6</h6>

格式

<p>段落普通文本</p>
<p><small>段落内小号字文本</small></p>
<p><strong>段落内加粗字文本</strong></p>
<p><em>段落内斜体字文本</em></p>
<p><del>段落内删除线文本</del></p>
<p><ins>段落内下划线线文本</ins></p>
<p><mark>段落内高亮文本</mark></p>

align 对齐相关

<div class="am-ft-left">文字左对齐</div>
<div class="am-ft-center">文字中对齐</div>
<div class="am-ft-right">文字右对齐</div>

size字体大小

<div class="am-ft-20">20px</div>
<div class="am-ft-xl">特大18px</div>
<div class="am-ft-lg">较大17px</div>
<div class="am-ft-md">正常16px</div>
<div class="am-ft-sm">小14px</div>
<div class="am-ft-13">13px</div>
<div class="am-ft-12">12px</div>

color 颜色相关

<div class="am-ft-black">【黑色】文本主色 输入框标签,输入内容</div>
<div class="am-ft-darkgray">【深灰色】tab文字,文本</div>
<div class="am-ft-gray">【灰色】列表下方说明,表单右侧说明</div>
<div class="am-ft-lightgray">【浅灰色】暗提示</div>
<div class="am-ft-blue">【蓝色】链接色</div>
<div class="am-ft-orange">【橙色】重点提示色</div>
<div class="am-ft-red">【红色】红色文字,用于警示</div>
<div class="am-ft-white">【白色】仅用于标题按钮和深色内容</div>

more 特殊设置

<div class="am-ft-ellipsis">根据父元素宽度截取 文字单行自动截取文字单行自动截取文字单行自动截取文字单行自动截取文字单行自动截取</div>
<div class="am-ft-ellipsis" style="width:200px;">限制宽度200px 文字单行截取文字单行截取文字单行截取文字单行截取文字单行截取</div>
<div class="am-ft-ellipsis" style="width:100px;">限制宽度100px 文字单行截取文字单行截取文字单行截取文字单行截取文字单行截取</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AntUI卡片Cards

    爱知汇
  • AntUI常规Forms表单

    爱知汇
  • html+js开发模拟考试在线评分系统

    爱知汇
  • AntUI卡片Cards

    爱知汇
  • CSS,注意点!!!!!!!

    4、用css给body标签加个 margin:0(用于消除body边框和浏览器间的空白部分)

    Wyc
  • jQuery学习笔记之概念(1)

    jQuery学习笔记之概念(1) ——————————————————————学习目录———————————————————— 1.概念 2.特点 ...

    王小雷
  • 【可视化】Vue基础

    Vue框架,框架的作者,尤雨溪,组件化,快速开发的特点。 生命周期 beforeCreate:组件刚刚被创建 created:组件创建完成 生成

    达达前端
  • 解读mpvue官方文档的Class 与 Style 绑定及不支持语法

    在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

    honey缘木鱼
  • 初识SignalR~仿QQ即时聊天(群发,单发)(Web,WPF等Demo演示)【中】

    第二个阶段: QQ聊天案例,先讲一种常规的方法,下面会讲一种简单方法 先看看gif效果图把 ? 定义一个BaseHub类,里面用 qqModeList来...

    逸鹏
  • NEC html规范

    HTML规范 - 整体结构 HTML基础设施 文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”。 必须申明...

    用户1197315

扫码关注云+社区

领取腾讯云代金券