浅谈前段设计师应该如何做到各司其职

2022-05-26 20:48:31 0 199

本文作为小白入门级,相对基础,是写给现在想了解一点前端知识的设计师同行们,今天这章用设计师熟悉的PS来解释前端相关的术语,通俗易懂幽默风趣,绝对是小白入门的好教程。

今天要讲三个东西:文件路径关系、各式文本和继续排版

看不懂的童鞋,不要偷懒,去把前面的补一下。

一、路径关系——各司其职

上一节中,要调用图片的时候用了这么一句:

background:url(imges/01.jpg);

图片、链接地址、样式文件、js文件……等都是经常需要外界支持的东西,浏览器通过html标签内的各式url地址去一一找到然后呈现出来,一旦地址错误,比如找不到样式文件或者图片,那网页所呈现出来的就不知道神马鬼了。所以,虽然大多数文件都可以浏览选择并不需要手动去敲,但是了解个中关系,对处理问题也是有一定好处的。

如下图,一个相对较完整的文件夹是酱紫的,包含主页index和所需的样式文件、images、js等,哪怕样式文件就一个都要单独建立一个文件夹,html文件一般放在其他文件的上层,但是html文件很多,或者分模块的情况下也是需要建文件夹哒。看个人喜好啦……

index.html中要是需要引用images下的图片01,地址为:images/01.jpg。

正常情况下,当然不是所有东西都在一个页面上处理啦,不仅样式要单独放在一个.css文件中,所有图片也是要单独放个文件夹的。

不同层级间要引用其他地方的文件时路径该怎么写呢?下面举几类的例子。

1)同级

以index.html为参考点,若再增加一张图片(此处为举例添加的02.jpg文件) ,要引用与自己同等级文件,不用写别的了,直接文件名就OK了。例:url(02.jpg);

2)下级

同样,以index.html为参考点,它要引用比他低一级的01.jpg,首先,01往上找,是它所属的images文件夹,这个文件夹刚好与参考点同一级,即与01之间只跨一级,则使用一个斜杠“/”,(向下两级则是两个斜杠哦)index想要引用images下的文件,首先得经过images的同意,所以路径还要带上它的“签名”,最后得来路径则是:url(images/01.jpg);

3)上级

以index.css 为参考点,想引用02.jpg ,首先还是得往上看,参考点属于css文件夹,而02.jpg跟他爹“同辈”,但是不能直呼其名啊,所以用两点“..”来代替,其实这两点也可以是总文件夹的代替名,因为对index.css来说并无多大意义。

好了,找到规律了没?如果index.css要找index.js文件该怎么找捏?这个,留给大家思考一下,嘿嘿……(提示一下,先往上找,再往下找)

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

免责声明:内容来自用户上传发布或新闻客户端自媒体,本站仅提供信息存储空间服务,如违规请联系删除。

玩技资源 国内新闻 浅谈前段设计师应该如何做到各司其职 https://www.52diyhome.com/2022/05/11418.html

如遇资源失效请马上联系微信进行退款

常见问题
  • 答:资源大部分来源于网络和本站作者若有侵权请您联系管理员删除2523030730
查看详情
  • 玩技平台的主要负责内容是提供给作者售卖资源的平台,买家有对作者投诉的权利,投诉成功后会获取相应的补偿机制。官方唯一投诉通道客服QQ:2523030730转接人工服务,投诉专属客服工号【2】
查看详情
  • 本站已开启了作者实名认证,在购买商品时请尽量选择已认证的作者,不用担心跑路和无人售后的问题。如果出现问题,本站将采取报警的方式来指正作者进行诈骗行为,并将其身份资料提供给警方处理。
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 工作日在线 专业服务

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    资源总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

资源在于分享,创作来源想象