在线html代码生成器,支持网页快速排版 CSS代码一键生成的在线设计工具

在线html代码生成器,支持网页快速排版 CSS代码一键生成的在线设计工具用户体验现在作为很多工作的重中之重,设计师们更要把用户体验放在第一位,如果你曾经尝试过想把你的板面调整到最适合阅读的状态,就会知道多么令人抓狂。但是懒人总是会创造出新科技,国外开发者为我们带来了今天要讲的协助设计网页排版及字型等相关属性的便利工具。typeanything前段时间登上国外媒体网站后深获好评,这是一项非常方便的在线工具,功能设计很简单,主要提供一段文章模板(里头包含h1、h2…

大家好,又见面了,我是你们的朋友全栈君。

用户体验现在作为很多工作的重中之重,设计师们更要把用户体验放在第一位,如果你曾经尝试过想把你的板面调整到最适合阅读的状态,就会知道多么令人抓狂。但是懒人总是会创造出新科技,国外开发者为我们带来了今天要讲的协助设计网页排版及字型等相关属性的便利工具

type anything 前段时间登上国外媒体网站后深获好评,这是一项非常方便的在线工具,功能设计很简单,主要提供一段文章模板(里头包含 h1、h2 标题和文字),用户透过快速按钮来切换字型、文字大小、行高、字重、边缘等相关属性,预览效果。

当调整到你觉得最舒服的排版后,一键将 css 程序代码输出就能套用至自己网站。

step 1

开启 type anything 后,左侧是调整工具,右侧为默认的文章模板,你也可以把自己的文章复制贴上,透过这项在线服务来进行排版调整,从网页浏览器上实时看到效果。

01c6aa5dc5724f8fe0dab7ef28ae6323.png

step 2

它跟一般的文本编辑器有点相似,选取文字段落后可将它切换为 h1、h2 或 h3 标题,或加入粗体、斜体及底线效果,在设定完标题及内文位置后,利用左侧来进行样式编辑。

3e19fbf26d9f998211ac3e2ce23e4a7e.png

step 3

type anything 能切换调整不同的字型组合,输入字型名称就能实时搜寻 google fonts 里收录的免费字型,不过这里目前还无法使用中文字型,因此你可以先选择任一字型,最后导出 css 后再进行细部修改。提供免费的中文网页字型服务包括:

1a071dad7305c2d00a565c44f060dcff.png

step 4

从 type anything 左侧工具栏来进行排版的细节调整,包括字号、字重、行高、透明杜、顶部距离、底部距离、字距和全部显示为大写小写等设定值。

1456dba54a744060d6891dcdf62deb5f.png

最后,点选右上角的「get the code」就会产生刚才的排版 css 样式表单,之后应该知道该怎么做了吧?此外,type anything 会加载由 google fonts 提供的网页字型,若你是使用中文字型,可以将它做适当调整。

f380b629b241376a48aaa666852b723e.png

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/143598.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • springboot自动装配原理简书_万能轧机的装配原理

    springboot自动装配原理简书_万能轧机的装配原理学习SpringBoot,绝对避不开自动装配这个概念,这也是SpringBoot的关键之一本人也是SpringBoot的初学者,下面的一些总结都是结合个人理解和实践得出的,如果有错误或者疏漏,请一定一定一定(不是欢迎,是一定)帮我指出,在评论区回复即可,一起学习!篇幅较长,希望你可以有耐心.如果只关心SpringBoot装配过程,可以直接跳到第7部分想要理解spring自动装配,需要明确两个含义:装配,装配什么?自动,怎么自动?文章目录1.Warmup1.1 setter注入1

    2022年8月22日
    8
  • 深信服(scsa认证)学习过程[通俗易懂]

    深信服(scsa认证)学习过程[通俗易懂]今天我们来说说关于企业招聘的文艺2级标题3级标题四级标题五级标题六级标题

    2022年6月20日
    67
  • 多维数组转化为一维数组_数组的大小长度可以改变吗

    多维数组转化为一维数组_数组的大小长度可以改变吗allocaalloca是GNUlibc中的内存分配函数。voidfunc(){void*p=alloca(size);//dosomethingusingp//…}一般来说,alloca的内存是在调用alloca的函数func的栈上分配的,当func返回或者异常退出的时候,分配的内存或自动释放。以上说的是一般的情…

    2025年6月30日
    3
  • plsql激活码/注册码 PL/SQL Developer激活码注册码全版本永久激活

    plsql激活码/注册码 PL/SQL Developer激活码注册码全版本永久激活注册码:ProductCode(产品代号):4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserialNumber(序列号):601769password(密码):xs374ca

    2022年7月14日
    593
  • Stata:合成控制法程序分享

    Stata:合成控制法程序分享原文链接:https://www.lianxh.cn/news/bf1839debd082.htmlYiqingXu-R程序-一般化合成控制法 一个完整的合成控制法Stata范例-包含数据、假设检验和图形展示等||-PDF- Atooltorunapoolofsyntheticcontrols,conductinference,andproducevisualizations. 原文链接:https://www.lianxh.cn/news/b..

    2022年6月11日
    29
  • 使用JAX-WS构建Web Services

    使用JAX-WS构建Web Services 使用JAX-WS构建WebServicesJAX-WS简写为JavaApiForXmlWebService。JAX-WS是使用XML构建WebService与Client进行交流通信的技术。在JAX-WS中,WebService操作调用表现为以XML为基础的协议如SOAP协议。SOAP定义了封装架构,编码规则以及WebService中调用和回应表现的规则。这些调用和

    2022年7月15日
    13

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号