肆合互动,团队始于2008,为您提供可信任的一站式网站制作和网络推广优化服务!
028-85756675
网站地图

新闻资讯

为您提供网站建设资讯、网站优化知识、主机域名邮箱、
关键词排名、网站开发常见问题等。

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

发表日期:2019/11/06 来源:肆合互动 咨询电话:028-85756675

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

  一、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也兼容的!)


相关案例
更多案例>
ARE YOU
INTERESTED
IN?
感兴趣吗?

网站建设及推广咨询电话

028-85756675
13688349946
15308030114

成都市天府新区华府大道1号蓝润置地广场T3公寓2302室

7x24 小时专业服务
专业备案全程跟进
承诺做不到退款
快速建站SEO友好

填写网站建设及SEO优化排名需求

*请认真填写需求信息,24小时内与您取得联系。
在线咨询
电话咨询

立即咨询

028-85756675
微信咨询
微信二维码
QQ咨询
返回顶部