web作业——模仿腾讯视频:问题与解决(html+css)

 2023-09-05 阅读 84 评论 0

摘要:首先要提一下作业的要求了: 模仿腾讯视频,不少于4个浏览页面,同时要适配手机端 1.关于布局 我给适配手机端加了粗!唉,这就是我犯得一个最大的错误了 刚开始做的时候想着到最后再适配手机。 然后就定位,px等一通用上,直接就把

首先要提一下作业的要求了:

模仿腾讯视频,不少于4个浏览页面,同时要适配手机端

1.关于布局

我给适配手机端加了粗!唉,这就是我犯得一个最大的错误
刚开始做的时候想着到最后再适配手机。
然后就定位,px等一通用上,直接就把网页写死了。
各位看到木有,就这种情况直接变形

导致最后傻眼了,只得用媒体查询一点一点修。
所以说希望各位业余的这种的话不要跟我一样,要在开头就要考虑手机端了
或使用网格系统或是用flex布局。

2.关于优先级的问题

在做的的时候,有时候加css效果时不管咋试都加不上,
那么这时候就要考虑一下是不是优先级的问题了。
有些时候,优先级过低导致所加的效果没用。
这种情况可以提高其优先级,例如直接在html标签里加style样式等等

3.关于继承

做网页的时候总是遇到儿子继承的有父亲的某些样式,
所以有时候可以直接给父亲样式,儿子就不用给了,
让它继承父亲就好。

4.关于浮动

注意浮动的元素是不占用位置的,就是说一旦加了浮动,其本身的位置就相当于没了。其之后的标准流元素就会补上去,把位置给占了。导致出现一种元素重叠的问题。这时候就要来清除浮动。
可以用overflow:hidden
或是在浮动元素后加一个空盒子给其设置clear:both等等

5.关于命名

做一些小网页的时候还没啥
但是一旦做了大网页,最起码也得好几天才能写完的那种
就一定一定要注意命名以及加注释
若是随意的取名:叫个a,b,c,d.
或是one,two,three。等一些名字
就容易自己把自己搞迷。
你会明白第一天写的 过了几天后,咦!这写的是啥 a是啥,b是啥

6.关于调试工具

网页是个细致活,你有时候得追求1px的精确
或许多了这几px,盒子都被挤下去了
所以说f12这个调试工具可以直接修改px等一些标签的有无让你发现问题
以及找到适合的px
现在的效果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

目前的话就这几个问题,还未完工,差点东西,之后再补充。

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://808629.com/924.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 86后生记录生活 Inc. 保留所有权利。

底部版权信息