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


相关推荐

  • 【蓝牙sbc协议】sbc源码阅读笔记(二)——sbc_struct详解(上)[通俗易懂]

    【蓝牙sbc协议】sbc源码阅读笔记(二)——sbc_struct详解(上)[通俗易懂]sbc_struct结构详解sbc_struct结构的定义://sbc.hstructsbc_struct{ unsignedlongflags; uint8_tfrequency; uint8_tblocks; uint8_tsubbands; uint8_tmode; uint8_tallocation; uint8_tbitpool; uint8_tendian; void*priv; void*priv_alloc_base;};typ

    2022年9月11日
  • 如何解决Ubuntu 14.04编译make menuconfig时缺少’ncurses-devel’库[通俗易懂]

    如何解决Ubuntu 14.04编译make menuconfig时缺少’ncurses-devel’库[通俗易懂]今天在使用64位的Ubuntu14.04系统编译linux源码的makemenuconfig命令时,得到了一个错误的提示,说我没有安装相应的库:Unabletofindthencurseslibrariesortherequiredheaderfiles.’makemenuconfig’requiresthencurseslibraries.Instal…

    2022年6月2日
  • 图像质量评估-NIMA(Neural Image Assessment)「建议收藏」

    1.背景图像质量和美学的量化一直是图像处理和计算机视觉长期存在的问题。技术质量评估测量的是图像在像素级别的损坏,例如噪声、模糊、人为压缩等等,而对艺术的评估是为了捕捉图像中的情感和美丽在语义级别的特征。通常情况下,图像的质量评估一般分为两种:有参照(Full-Reference,FR):PSNR(峰值信噪比)、SSIM(标准-结构相似度)等图像质量评分系统无参照(No-Referen…

    2022年4月5日
  • 手机窃听讲话推送广告_智能手机窃听原理

    手机窃听讲话推送广告_智能手机窃听原理近日有媒体报道称,“窃听风云再次上演,一条短信实现窃听”,文中“记者卧底、售价2000元、可跟踪用户GPS位置”等等字眼处处可见。所谓的“X卧底”真有这么神奇?瑞星安全专家表示,所谓X卧底不过是“手机木马加录音软件”混合体,并没有新闻中所说的那么神奇。安全专家表示,所谓的“X卧底”本质上是一款手机木马,通常不会主动传播,而是由使用者的亲密接触者(妻子、丈夫等)手工安装,安装之后没有任何主界

    2022年9月16日
  • 此视频无法播放0xc00d36c4_视频播放失败代码-30

    此视频无法播放0xc00d36c4_视频播放失败代码-30相信很多用户都遇到过视频无法播放的问题。比如将重要视频从旧电脑拷到U盘上,使用另一台电脑播放时,提示视频播放错误代码0xc00d36c4,不支持该视频播放。其实,视频无法播放的问题是很常见的,不少用户在电脑上连接相机或者手机后播放视频,也会提示0xc00d36c4。出现这样的问题要怎么解决,怎么才能修复该视频文件使其正常播放?播放MP4格式视频显示错误代码0xc00d36c4的情况大多数情况下,…

    2022年9月29日
  • spring整合redis集群配置密码_redis默认密码

    spring整合redis集群配置密码_redis默认密码创作背景springboot2集成redis集群网上的例子已经很多了,但涉及到密码几乎都是明文,这在实际生产环境中,是不允许的,特写此文章。源码片段第一步:pom.xml<?xmlversion=”1.0″encoding=”UTF-8″?><projectxmlns=”http://maven.apache.org/POM/4.0.0″xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”

    2022年9月6日

发表回复

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

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