首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

101种让你的网站更棒的方法

所以我列了一个我们在AwesomeWeb中所做的事情的清单(当然还有一些是还没做的)。 我可以打包票…… ……如果你符合清单中的每一项,你将拥有一个非常棒的站点 你怎么确定?...如果你上传了一个很大的图片用来做博客的特征图,同时你想要把这张图展示在侧边栏等位置,那么你就应该确保展示的是缩小后的图片而不是原图。 给每个图片和链接加上标签和标题。...使用和代替和来定义加粗和斜体文字。他们的效果是一样的,但是却有本质上的区别。是一种样式,而则是指出了这个内容的意义。 处理掉冗余的HTML。...它将会使Google知道你所有页面的位置并且应当在你加入新内容时自动更新。通过 Webmaster Tools将文件提交到Google。...通过给不经常更新的页面设定有效期限来减少浏览器缓存。浏览器缓存会告知浏览器去加载本地磁盘之前下载好的页面,取代通过网络加载。 在服务器配置中允许gzip压缩。

1.3K40

移动端引入的字体文件过大处理方法

一.背景 前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体.这时,我们可能会采用两种方案 1.使用photoshop将文本图层单独导出成图片;  2.直接引入改字体的字体库.ttf文件   首先第一种方案的缺点...第二种方案,解决了上述的一些问题,但是由于汉字数量太大,导致中文字体文件也较大,通常都会有几M大小,不适合在项目中使用.尤其是移动端项目,由于字体加载速度很慢,体验会十分不好.本篇博客将介绍两种自动化工具...三.Font-Spider(字蛛) 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。.../demo/*.html 页面依赖的字体将会自动压缩好,原来几M的字体文件现在只剩下几k了, 是不是很爽呢.  4.使用gulp,grunt插件   除了直接进行编译,font-slider还提供了gulp...四.使用Fontmin   Fontmin 是由百度推出的一个字体子集化方案。

7.6K220
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS基础

    如果你这个css样式是定义在某个html网页中的话,那其他网页是无法使用的,但可以把 把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在内(不是在...就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明。...通用选择器 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色: * {color:red...这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。...属性是没有反应的,而使用letter-spacing调整中文字间距的时候,会同时拉开英文字母的距离,使得在中文排版页面中的英文显得不美观; (经本人测试,中文字之间加空格之后,会对word-spacing

    1.7K50

    前端字体截取技术,做炫酷网站再也不用怕中文字体数据量大啦!【实战】

    可是中文字体非常庞大,很多时候“全量”加载某个字体文件是不现实的。特别是对于一些动态页面且每个页面只有少量字符用到该字体的情况下。...当然,也不是每个页面都会用到一个字体文件中的所有字符,全量加载本身也极其浪费。...首先是CSS中的unicode-range`属性,我们称之为“软截取技术”,因为它只是在本地既有字体或者浏览器已经下载的字体基础上做一个指向子集的“软链接”,并不能真正减小浏览器下载文件的大小。...“Ampersand”(英文&符号)的字体,这个字体“截取”自本地字体Times New Roman,而这个字体只包含一个字符: U+26 ( 26 是英文&符号的十六进制Unicode码点,对应的十进制值是...要分析的远程文件(这里是一个本地Web服务): http://127.0.0.1:8080/index.html --family='custom' 指定只分析以上页面中应用了 font-family:

    3K20

    Axure RP 9 for Mac(原型设计软件)

    Axure RP 9 for Mac是一款交互式原型设计软件,使用axure rp9以最佳的方式展示您的作品,优化现代浏览器并为现代工作流程设计。同时确保您的解决方案正确完整地构建。...“库”窗格中库自动刷新双击.rplib以加载或编辑库 笔记 一次查看页面上的所有注释为窗口小部件分配多个注释可以取消分配和重新分配注释在注释中包括窗口小部件文本在注释中包括窗口小部件交互注释可以按层次结构组织...相互作用没有分心 新的交互构建器已经过全面重新设计和优化,易于使用。从基本链接到复杂的条件流,可以在更短的时间内以更少的点击次数将您的原型变为现实。...很容易分享 单击一个按钮,axure rp 9 mac将您的图表和原型发布到云端或本地的 Axure Share 。只需发送一个链接(和密码),其他人就可以在浏览器中查看您的项目。...选择要在HTML中或包含屏幕截图的自动生成的Word文档中显示哪些注释。 更简单的团队合作 Axure RP允许多人同时处理同一文件,使您的团队更容易协同工作。

    1.6K20

    提高 JavaScript 开发效率的高级 VSCode 扩展之二!

    该模式可以在你在页面编辑文件时启用,效果是全屏化你的编辑框,然后带有若隐若现的云雾效果。 打开方式:文件 > 首选项 > 设置 > 用户设置 > 工作台 > 禅模式 ? ? 3....具有连字的字体 文字的风格使阅读变得简单方便,你可以使用好看连字的字体使编辑器看起来更友好。 这里是支持连字的6种最佳字体 (根据www.slant.co) ?...它支持对下面一行中的任何变量进行日志记录,并在代码结构之后自动添加前缀。...Live server 这是一个非常棒的扩展,可以帮助你启动一个本地开发服务器,为静态和动态页面提供实时重新加载功能,它对 HTTPS、CORS、自定义本地主机地址和端口等主要特性提供了强大的支持。...Breadcrumbs(面包屑) 编辑器的内容上方现在有一个被称为 Breadcrumbs 的导航栏,它显示你的当前位置,并允许在符号和文件之间快速导航。

    1.8K30

    群分享:关于Markdown,你可能想知道的

    它用简洁的语法代替排版,而不像一般我们用的字处理软件 Word 或 Pages 有大量的排版、字体设置。它使我们专心于码字,用「标记」语法,来代替常见的排版格式。...更加专注于写作内容本身 Markdown 只是标记语言,当它转换为 HTML 时,控制排版的是 CSS 样式文件,同样的 Markdown 文本配上不同的 CSS 样式,会展现出不同的 HTML 排版风格...部分编辑器会在标题文字前后都加上数量相等的#,效果是一样的。...粗体是两个星号,斜体是一个星号。 **粗体**是两个星号,*斜体*是一个星号。 块引用 在引用文字的第一行最前面加上一个>(像不像一个指示箭头?),整段文字都会以缩进形式显示。...有序列表每行前面是数字序号,无需列表是一个小符号。 有序列表是以(数字 + . + 空格)的格式来标记的,但是不需要数字有顺序,甚至一样也没关系。

    1.5K120

    可嵌入字体,性能大幅提升,你更新了吗?

    同时,我们也改进了包含大量切片的设计文档的性能,尤其是在放大内容的时候,会更加顺滑。这些只是我们在此版本中进行的性能升级的一部分,但是幕后还有很多事情要做-它们大大提高了您日常工作流程的速度。...在Mac应用程序中,这意味着与您共享文档的任何人都可以打开和编辑该文档,就像他们安装了字体一样(即使他的电脑上没这款字体)。...上传之前,您可以重命名并确认文档在正确的团队或项目中。而且,如果将文档拖到“库”选项卡中,它将自动成为云端库。...您也可以从Mac应用程序的“ 文件”菜单将任何Cloud文档转换为Cloud Library 。 其它更新调整和bug修复 更好的表情符号 -在文字图层中使用表情符号时,不会再拉长文本框的高度。?...因此,您可以在所需的任何地方放上表情符号,并且所有内容将完美对齐。? 更智能的全选操作 -全选现在更具上下文识别功能。默认情况下,它现在选择当前组中的所有层。

    1.6K20

    28 个提升开发幸福度的 VsCode 插件

    Emmet 是 VSCode 中一个很好的例子,然而,有时候,你只是想要一些简单明了的东西。例如自动更新标签,它在你输入开始标签时自动生成结束标签。...与任何EditorConfig插件一样,如果未指定root = true,EditorConfig将继续在项目外部查找.editorconfig文件。...该模式可以在你在页面编辑文件时启用,效果是全屏化你的编辑框,然后带有若隐若现的云雾效果。...具有连字的字体 文字的风格使阅读变得简单方便,你可以使用好看连字的字体使编辑器看起来更友好。...Breadcrumbs(面包屑) 编辑器的内容上方现在有一个被称为 Breadcrumbs 的导航栏,它显示你的当前位置,并允许在符号和文件之间快速导航。

    9.7K30

    图标字体应用实践

    而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点。 雪碧图 雪碧图实例:淘宝PC端 ?...生成的svg是fill:none 这个时候需要手动改一下svg文件,把fill:none改成随便一个色值即可,如fill:#000000....使用一个脚本自动导出svg 在上面的操作中,都是要先执行PS导出再到AI里面执行导出,其实有一个脚本,能够自动执行这两步:PSD to SVG, 支持PS CS6,不支持CC,还可以把这个脚本设置一个快捷方式...hadf22');   或者更彻底的:改变文件名、路径名。 3. 多人协作 icomoon免费版的数据是存储在浏览器的本地数据库的, 商业版交点钱可以把数据放在云端,从而实现多人协作。...如果实再是要使用多色的图标,甚至带一些特殊效果的那就使用SVG吧。 结合使用SVG 对于多色的图标,可以在页面插入一个SVG: ?

    2.3K20

    网络安全攻击与防护--HTML学习

    需要注意的是,我们在使用face属性时,可以为这个属性赋一个或多个值,即可以为网页指定多种字体,这时,浏览器会按你赋值的顺序来读取,并尽量用你为标记指定的字体来显示,如果赋的第一个值,即第一种字体本地没有安装...设计网页的时候(不论是用DW做还是手工写),都难免会需要插入一些空格,这在WORD里很简单,没什么难的,但在HTML里不一样,即使我们在代码里按了很多个空格,但浏览器解析的时候仍然显示的只有一个空格,这是因为浏览器自动把那些多余的空格过滤掉了...我们需要理解的是,框架与框架之间是各自独立的,在每个框架中可以显示任意网页,这些框架就等于是一个单独的新的页面,只不过框架是把这些不同的页面给它们组合到一起放到一个页面里了,这样我们在表面上看来,效果跟一个网页一样...="0">   改完后我们再来看一下执行效果:   可以看到,这是一个跟空白页面一模一样的页面,所以说效果是相同的,只是这个页面确实包含了4个框架。...我慎重的填完表演格,交给工作人员,同时提交了打印版的个人简历。工作人员看到我的简历后,“您是中专学历?”全场有一些其它的应聘者都惊奇地看着我,“是的,我是”。

    3K10

    html学习笔记第一弹

    换行标签 在HTML中,一个段落的文字会从左到右依次排列,知道浏览器窗口的右端,然后自动换行。如果想强制在某个地方换行,可以使用标签,是break的缩写,意为打断,换行。...> 定义下标文本 定义上标文本 定义小号字体,使文本比周围字体小一号,下限1号 定义大号字体,使文本比周围字体大一号,上限7号 注意: 在上面的标签中,更推荐使用后者实现相同的功能...="300" height="200"> 路径 在实际工作中,我们的文件不会随便乱放,否则在使用的时候很难找到他们,因此我们需要一个文件夹来管理他们。...绝对路径 绝对路径以web站点根目录为参考基础的目录路径。之所以称为绝对,指当所有网页引用同一个文件时,所使用的路径都是一样的。...超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的页面或者当前网页中的某个部分。

    7610

    html学习笔记第一弹

    换行标签 在HTML中,一个段落的文字会从左到右依次排列,知道浏览器窗口的右端,然后自动换行。如果想强制在某个地方换行,可以使用标签,是break的缩写,意为打断,换行。...> 定义下标文本 定义上标文本 定义小号字体,使文本比周围字体小一号,下限1号 定义大号字体,使文本比周围字体大一号,上限7号 注意: 在上面的标签中,更推荐使用后者实现相同的功能...像素 设置图像的高度 Border 数字 设置图像边框的宽度(css文件改动属性,默认为黑色) 路径 在实际工作中,我们的文件不会随便乱放,否则在使用的时候很难找到他们,因此我们需要一个文件夹来管理他们...绝对路径 绝对路径以web站点根目录为参考基础的目录路径。之所以称为绝对,指当所有网页引用同一个文件时,所使用的路径都是一样的。...超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的页面或者当前网页中的某个部分。

    1.5K30

    ISUX Xcube智能一键生成H5

    作为设计师我们的本职工作是关注并定义视觉符号的内容,其中包含了颜色、logo、字体、图形、影响等视觉层面的内容。...由此我们可以充分具像化视觉符号(颜色、图形、字体、文案、影像等)并体现在我们的运营活动页面当中。...运营活动页 活动页面是用户感知我们的一个主要场景,所有运营位置的banner素材基本上都是以活动页面的头部进行的拓展,可见一个活动页面头部的重要性。...每一个产品经理都会有自己常用的活动类型,我们首先按照这些活动类型制作常用的活动组件,然后搭配好相应活动类型的模板,产品可以直接在首页选择一个常用模板进行编辑,也可以从空白新建一个新的活动页面。...cp不用在进行繁琐的垒页面和改尺寸的任务,相同的或者更少的时间可以用来制作素材,而且这些素材也可以保存在系统的素材库中进行重复使用;视觉也不用再花额外的时间去进行审核工作,产品也省去了跟多方沟通的时间,

    1.5K20

    我的LaTeX入门

    我的一点理解: 在稍微了解一点 LaTeX 后,你会发现 LaTeX 的工作方式类似 web page,都是由源文件(.tex or .html)经由引擎(TeX or browser)渲染产生最终效果...两者极其神似,包括语法规则与工作方式。所以呢,与 HTML 一样,入门其实很简单。 一般的规范写法中都是在 HTML 文件中写入 web page 的结构与内容,再由 css 控制页面生成的样式。...同样,在 LaTeX 有着同样的情况,你可以在 tex 源文件中同时写入内容和样式,也可以内容与样式分离,以网络上流传广泛的 清华大学 LaTeX 模板为例,以.cls(class)结尾的 thuthesis.cls...这跟 C 语言的 include 是一致的,将文件加载进来进行使用。利用宏包,我们可以使用很多现成的好用的样式。当然了,如果要编写一个自己的个性化的宏包也是可以的,不过需要学习成本。...通过手写识别 LaTeX 符号,识别率很高。尤其是当看到一个符号却不知道其 LaTeX 命令的时候它很有用。只要画出记忆中符号的样子,就会自动出现各种可能想要的表示方法。

    2.7K20

    最新iOS设计规范七|10大视觉规范(Visual Design)

    暗模式是动态的,这意味着当界面位于前景(例如,弹出框或模式表)中时,背景颜色会自动从基本颜色变为高色。该系统还使用增强的背景色在多任务环境中的应用程序之间以及多窗口上下文中的窗口之间提供视觉隔离。...系统提供的颜色会自动使这些项目在半透明背景上看起来很棒。 如果可能的话,请使用SF符号。当你使用动态系统颜色为符号着色或对其应用活力效果时,符号在任何上下文中都看起来很棒。...九、字体排版(Typography) San Francisco (SF)是iOS中的系统字体。这种字体的设计进行了优化,使文本具有非常好的易读性、清晰度和一致性。...纽约是一种衬线字体,提供独特的色调,旨在补充SF字体。NY在图形显示环境(大尺寸)中的效果与在阅读环境(文本尺寸)中的效果一样。 ?...从iOS 14开始,系统以可变字体格式提供San Francisco和New York字体。这种格式将不同的字体样式组合到一个文件中,并支持在样式之间进行插值以创建中间的样式。

    8.1K30

    HTML5与CSS3权威指南【笔记】

    10.重新定义的small元素:专门用来标识所谓“小字印刷体”的元素,不允许被应用在页面主内容中,只允许被当做辅助信息用inline方式内嵌在页面上使用 D.文件API 1.HTML5中,添加multiple...: 本地缓存是为整个Web应用程序服务的,而浏览器的网页缓存只服务于单个网页 网页缓存是不安全、不可靠的,本地缓存是可靠的 2.Web应用程序的本地缓存是通过每个页面的mainfest文件来管理的,需要服务器添加...:first-letter:用于为某个元素中的文字的首字母或第一个字使用样式 :before:在某个元素之前插入一些内容 :after:在某个元素之后插入一些内容 :root,将样式绑定到页面的根元素...属性来指定使用什么嵌套文字符号 十五、文字与字体相关样式 1.text-shadow:length length length color,给页面上的文字添加阴影效果,可以指定多个阴影 2.word-break...,将盒内部元素变为弹性盒布局 4.使用box-ordinal-group改变元素的显示顺序 5.使用box-orient指定元素的排列方向,垂直或水平 6.使用box-pack和box-align属性来指定元素中的文字

    2.2K20

    visual studio运行程序的快捷键_visual studio快捷方式在哪

    大家好,又见面了,我是你们的朋友全栈君。...CTRL+SHIFT+N 在新窗口中打开剪贴板中的地址,如果剪贴板中为文字,则调用搜索引擎搜索该文字 CTRL+SHIFT+S 打开保存网页面板(可以将当前页面所有内容保存下来,等同于CTRL+S...+Space:将所有桌面上的窗口透明化(和鼠标移到工作列的最右下角一样意思) Win+上方向键:最大化使用中窗口(和将窗口用鼠标拖到屏幕上缘一样意思) Shift+Win+上方向键:垂直最大化使用中窗口...Ctrl+F2 打印预览 Ctrl+F10 将活动窗口最大化 Ctrl+Shift+P 定义字体大小 Ctrl+Shift+F 定义字体样式 Ctrl+Shift+L 给光标所在的行加上项目符号...(这是重构里面最常用的方法之一了,尤其是对一大堆泥团代码有用) Alt+Shift+C 修改函数结构(比较实用,有N个函数调用了这个方法,修改一次搞定) Alt+Shift+L 抽取本地变量( 可以直接把一些魔法数字和字符串抽取成一个变量

    4.8K10

    常用快捷键大全

    ,如果剪贴板中为文字,则调用搜索引擎搜索该文字 CTRL+SHIFT+S 打开保存网页面板(可以将当前页面所有内容保存下来,等同于CTRL+S) CTRL+SHIFT+W 关闭除锁定标签外的全部标签(...:在新窗口中打开剪贴板中的地址,如果剪贴板中为文字,则调用搜索引擎搜索该文字(搜索引擎可选择,Maxthon选项→搜索) Ctrl+Shift+S 功能:打开“保存网页”面板(可以将当前页面所有内容保存下来...窗口控制快速键 Win+Home: 将所有使用中窗口以外的窗口最小化(和摇动使用中窗口一样意思) Win+Space:将所有桌面上的窗口透明化(和鼠标移到工作列的最右下角一样意思) Win+上方向键:...函数插入“自动求和”公式 Ctrl+Shift+"(双引号) 将活动单元格上方单元格中的数值复制到当前单元格或编辑栏 Ctrl+'(撇号) 将活动单元格上方单元格中的公式复制到当前单元格或编辑栏...,有N个函数调用了这个方法,修改一次搞定) Alt+Shift+L 抽取本地变量( 可以直接把一些魔法数字和字符串抽取成一个变量,尤其是多处调用的时候) Alt+Shift+F 把Class中的local

    4.4K11

    房上的猫:HTML5基础

    ,同样适用于中文和英文的页面.和gb2312编码相比,国际通用性更好    在保存文件时编码方式一定要与HTML5y页面中的标签中的编码方式保持一致,否则会出现乱码   2.搜索关键字和内容描述信息...使用WebStorm工具自动生成的HTML基本结构中标签里有个属性lang="en",它的意思是表示本页面是英文的.浏览器会提示是否需要翻译 五.网页的基本标签  1.标题标签:   1)标题标签表示一段文字的标题和主题...:一个段落中可以包含多行文字,文字内容将随浏览器窗口的大小自动换行   2)换行标签表示强制换行显示,该标签比较特殊,没有结束标签,直接使用表示标签的开始和结束  说明:像换行标签    当页面的HTML结构复杂或内容较多时,需要添加必要的注释方便代码阅读和维护.同时,有时为了调试,需要暂时注释一些不必要HTML代码   特殊符号:    由于一些符号已作为HTML...   >它不支持文件压缩,也不适用于Web页   4)PNG格式:    >PNG格式是20世纪90年代中期开始开发的图像文件储存格式,它兼有GIF格式和JPG格式的优势,同时具备GIF格式不具备的特性

    1.6K120
    领券