网站前端开发三个实用的小技巧

2020-08-06    分类: 网站建设

在进行网站开发的时候,如何合理使用代码标签让网站建设更简单?成都网站开发公司工作人员教你以下三个小技巧,让前端开发更轻松。

一、a标签打开与刷新页面标签作为常用标签,当跳转链接时,常用属性target,

_self:默认值。在相同的框架或窗口中载入目标文档。即当前;

_blank:在一个新的未命名的窗口载入文档。即新开窗口;

_parent:把文档载入父窗口或包含了超链接引用的框架的框架集,如果没有,则行为类似_self。即上级窗口中;

_top:把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架。如果没有上下文环境,则行为类似_self。即顶级窗口中。

不过,target属性还有一个特征,可以自定义内容或URL。

二、网页一键换肤优化实现将一个网页的颜色相关一键切换

links[0].href = val

通过JS控制标签的href属性切换引用的css文件

弊端:如果网站需要切换的内容过多,每次引用CSS的加载会有一定量的延时,不具有流畅感,交互体验较差。

有趣的title属性 在实现一键换肤的其他方法之前,要聊一下这个在标签中的title属性。

当标签具有title属性且有值时,link标签就变成一个可控制的特殊元素,即可以通过DOM对象的disabled属性控制link是否渲染。

但是,在实测过程中,除IE外无论link标签是否具有title属性,都可以直接使用DOM对象的disabled属性,但IE确实需要title。

let links = document.getElementsByTagName('link'); links = [].slice.call(links); links[0].disabled = true;

alternate备选 在标签中,rel属性有很多值,常用的是stylesheet,但是还有一个alternate表示当前文档的替代版本,也就是加载但不执行。

利用这个特性,结合DOM对象的disabled属性,可以提前加载另一套css方案,解决交互性问题。代价是多一点点流量。

三、CSS矢量图内联在前端项目中,使用到的图标类大多会使用SVG来实现,静态文件的减少有利于性能的提升。当然,可以用静态资源缓存(blog链接)减少文件请求,高速渲染,引用地址使用内联,即直接将SVG放入路径(不建议超级大图,会极大增加文件体积)。

采用base64

采用标签直接内联

在直接引入之前,需要对一些特殊符号进行转译",%,#,{,},<,>。(IE也兼容的!)

网站标题:网站前端开发三个实用的小技巧
文章转载:https://www.cdcxhl.com/news/84799.html

成都网站建设公司_创新互联,为您提供企业建站做网站网站建设定制网站网站设计网站收录

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

微信小程序开发