那些容易忘记但是又经常用到的前端技巧

盒子模型(Box Model)

设置页面内容是html 编码格式是utf-8:

超链接各种状态设置:

页面跳转方法:

常用短语元素样式:

abbr:缩略语

br:换行

em:标志着重强调一段文字

i:表示与周边内容兼容不同的一段文字,比如来自另一种语言

span:一个没有自己语意的通用元素,可以用在希望引入一些全局属性却又不想引入额外语义的情况

strong:表示重要内容

wbr:表示可安全换行的地方

blockquote:表示引自他处的大段内容

nav:表示有意集中一起的导航元素

canvas:生成一个动态的图形画布

progress:嵌入目标进展或任

Web安全字体组合:

Serif 字体(有衬线字体)

sans - serif字体(没有衬线的字体)

Monospace 字体(等宽字体)

WEB安全色:

WEB SAFE COLORS

颜色的三种表示方式:

十六进制色 color:#0000ff; //若能简化可简化为#00f

RGB 颜色 color:rgb(255,0,0);

RGBA 颜色 color:rgba(255,0,0,0.5);//alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)

HSL 颜色 color:hsl(120,65%,75%);//HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度)

HSLA 颜色 color:hsla(120,65%,75%,0.3);//alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)

预定义/跨浏览器颜色名

检查网页背景是否和文本/链接颜色有较好的对比度

WebAIM Color Contrast Checker

CSS的三种引入方式

一、行内样式:使用style属性引入CSS样式。

示例:

二、内部样式表:在style标签中书写CSS代码。style标签写在head标签中。

示例:

三、外部样式表:CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。

语法:

用图片代替列符号

向列表

,添加list-style-image属性:

给大家推荐我的web前端资料分享群:64596,

5538有免费学习资料,还有各种趣味案例,欢迎大家加入!

收藏图标(favorites icon)设置

用于网页标题栏前小图标,例如:

背景设置

相对链接方式

1、直接使用当前目录或当前子文件夹下的文件:

href="index.html"

href="img/c.jpg"

2、使用../返回当前目录上级目录

href="../index.html"

或先返回上级目录,在向下选用文件

href="../img/c.jpg"

做一个对话框

减少代码耦合

一个参数在多个文件中使用,修改一个地方会影响全局。防止耦合可使用传参的方式。

减少重复代码

将重复代码封装成一个函数(模块、插件、类等)。

页面元素推拽

样式规则的权重计算方式

绝对定位层下margin:auto会失效

定位就不能用margin了, 要用left/top/right/bottom等。如设置left:50%,然后margin-left的值为层的宽度的一半,就可在达到margin:auto的效果。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180627A1MBFF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券