在线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)
上一篇 2022年5月11日 下午3:00
下一篇 2022年5月11日 下午3:00


相关推荐

  • 错误代码0x80070570

    错误代码0x80070570u 盘存储文件时弹出错误代码 0x 怎么办 相信不少朋友应该都遇到过使用 u 盘过程中出现了 u 盘存储文件时弹出错误代码 0x 下面分享 u 盘存储文件时弹出错误代码 0x 解决方法 希望能帮到大家 nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp u 盘存储文件时弹出错误代码 0x 解决方法 1 先检查 u 盘是否能够正常被电脑识别到 如果可以识别到那么再确认 u

    2026年3月20日
    1
  • settings官方网站_phpstorm中文

    settings官方网站_phpstorm中文setting —> php,选择php版本,并点击…,选择到php.exe进入到appserv底下找到php.ini文件,查找date.timezone,去掉前面的;号,添加”Asia/Shanghai”重启appserv环境,就是重启下apache 和 mysql服务发现依然失败后面重启电脑就可以了哈哈哈哈哈哈哈哈…

    2022年8月18日
    8
  • oracle拼接字符串函数_拼接字符串

    oracle拼接字符串函数_拼接字符串concat(param1,param2)

    2026年2月2日
    7
  • 使用IDEA控制台中文乱码问题(已解决)

    使用IDEA控制台中文乱码问题(已解决)再一次启动项目时发现控制台中文出现乱码现象 解决了之后记录下方法 1 打开 IDEA 的安装路径 根据自己 IDEA 安装的位数在 bin 目录下找到 idea64 exe vmoptions 64 位 打开 在最后一行填加 Dfile encoding utf 8 保存 2 设置

    2026年3月27日
    2
  • Method org.postgresql.jdbc4.Jdbc4Statement.setQueryTimeout(int) is not yet implemented错误解决

    Method org.postgresql.jdbc4.Jdbc4Statement.setQueryTimeout(int) is not yet implemented错误解决17:25:17:166 [Druid-ConnectionPool-Create-1566729816] ERROR log=c.a.d.p.DruidDataSource,traceId=,userId=,msg=create connection SQLException, url: jdbc:postgresql://…:5432/…, errorCode 0, state 0A0…

    2022年6月24日
    32
  • python sendfile_sendfile详解(转)[通俗易懂]

    python sendfile_sendfile详解(转)[通俗易懂]在apache,nginx,lighttpd等web服务器当中,都有一项sendfile相关的配置,在一些网上的资料都有谈到sendfile会提升文件传输性能,那sendfile到底是什么呢?它的原理又是如何呢?在传统的文件传输里面(read/write方式),在实现上其实是比较复杂的,需要经过多次上下文的切换,我们看一下如下两行代码:read(file,tmp_buf,len);write(…

    2022年6月6日
    94

发表回复

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

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