发表于: 2021-03-29 23:31:59

1 984


今天完成的事情:

修改任务五,在模拟移动端页面不让底部挡住内容


有两种方法

方法一

  给html<body>标签加上一个padding-bottom属性,这样正常文档流的内容距离body底部就会产生一个padding-bottom设置的距离。 缺点是,考虑到现在项目上线之后模块的复用及经常需要合并css文件,当其他页面不需要这个悬浮块,就会给不需要<footer>fixed定位的页面造成负担,不推荐使用这种方法。

方法二

  在<footer>块之外再包裹一层div,然后再增加一个与<footer>同级的<div>块,这个<div>块的高度设置为与<footer>同样高,不包含任何内容,这样就可以起到一个占位符的效果,在页面最底占据与<footer>同样高度的空间,当然页面滑到最下方,原本的<footer>悬动块就会与这个占位块完美重叠。且不会对其他页面产生影响。

我使用第二种方法直接

了解什么是html语义化

什么是语义元素?

语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如,当浏览器解析到<h1></h1>标签时,它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题。

为什么要语义化?

代码结构: 使页面没有css的情况下,也能够呈现出很好的内容结构

有利于SEO: 爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息

提升用户体验: 例如title、alt可以用于解释名称或者解释图片信息,以及label标签的灵活运用。

便于团队开发和维护: 语义化使得代码更具有可读性,让其他开发人员更加理解你的html结构,减少差异化。

方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式来渲染网页。


使用CssSprite.exe 制作雪碧图



明天计划的事情:完成任务6


遇到的问题:还不知道如何移动从雪碧图中拉出来的图片移动


收获:对雪碧图有深刻的了解


返回列表 返回列表
评论

    分享到