在线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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 手把手教您组装一台家用NAS J3455黑群晖6.1.7搭建全过程[通俗易懂]

    手把手教您组装一台家用NAS J3455黑群晖6.1.7搭建全过程[通俗易懂]不到千元!手把手教您组装一台家用NASJ3455黑群晖6.1.7搭建全过程其实,市面上那么多NAS,特别是黑群晖,到底哪一台,哪一种配置最适合家用呢?经过俺几个月的观察和尝试,最终锁定了目标:J

    2022年8月3日
    18
  • fftw_fftw3

    fftw_fftw3http://wenku.baidu.com/link?url=3TS6UqnYfVxGpVBfJIIgxjjcXCKuW9NvklxfBLZaIdWJhY0HrpUSKyyuIHsNI2s4F9tSUOhP7pl7n5PLlSFvWqQdr6XvtpejqQenhJHJ9N7

    2025年8月19日
    5
  • idm和百度云怎么组合 idm下载百度云大文件教程

    idm和百度云怎么组合 idm下载百度云大文件教程如今百度云限速想必是很多人都难以接受的,下载的速度慢如狗。那么如何配合上述的软件达到超速的下载的呢?工具/原料https://pan.baidu.com/s/1LYsnJDJGhz0zS4eTCJWFvQ方法/步骤把我们给出的链接地址软件下载,下载后解压此文件,得到一个crx文件,把它拖入浏览器上进行安装。非ie浏览器才可以使用的,电脑浏览器用不了。此时打开浏览器,搜索图二的脚本网页。进入网页后点…

    2022年6月17日
    42
  • Linux解压缩.tar.bz2

    Linux解压缩.tar.bz2.bz2结尾的文件是bzip2压缩的结果。tar命令使用-j这个参数来调用gzip压缩或者解压缩.tar.bz2。压缩$tar-cjfimages.tar.bz2./images/解压缩tar-xjfimages.tar.bz2…

    2022年6月6日
    30
  • navicat生成激活码错误【2021.7最新】

    (navicat生成激活码错误)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~M…

    2022年3月21日
    187
  • jmeter发送kafka数据key错误且无法生成时间戳解决方案「建议收藏」

    jmeter发送kafka数据key错误且无法生成时间戳解决方案「建议收藏」前言:最近在做kafka、mq、redis、fink、kudu等在中间件性能压测,压测kafka的时候遇到了一个问题,我用jmeter往kafka发消息没有时间戳,同样的数据我用python发送就有时间戳,且jmeter会自动生成错误的变量key,那我是怎么解决的呢,容我一一道来!一、jmeter怎么往kafka发送数据jmeter往kafka发送数据我之前有写过博客,大家可以参考下,遇到我前言说的问题就可以参考本篇文章二、jmeter生成错误key解决方案我们用了kafka插件后jmeter中引入

    2022年8月31日
    7

发表回复

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

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