发表于: 2021-05-01 23:39:12
1 1016
今天完成的事情:
开始任务14
默认样式
css中 h1 、p、li、a、标签都有自己的默认样式
比如现在市面上比较主流的浏览器,火狐,ie,谷歌。。。
在没有给html设置样式或者元素的时候,这些浏览器可能会根据自己的默认的样式给html进行布局,
但是每个浏览器的布局样式是不同的,
简单的理解,就是每个浏览器的内核对一个标签的解释是不同的,所以说可能在同一个页面而在不同一个浏览器之中存在不同的差异
使用css样式重置的方法可以使得页面的效果展现的一致
平时在任务之中关于全局的css基础重置都是直接使用通配符选择器,直接简单粗暴 *{margin: 0; padding: 0}
对于组件库的理解
一个样式可以看成由两部分组成:基础样式和个性样式,个性样式可以由排列和颜色,大小等多个部分组成,所以说组件库可以看成是一般样式的拆分,他的优点也显而易见,复用性强,易修改,方便维护。
任务思路就是把需要用到的组件。样式进行封装,之后布局的时候就像使用bootstrap,一样直接把需要用到的样式调用就好了。
然后用一个css文件给装起来,在写html的时候在引入,写好的组件和样式
先把默认样式给重置
然后添加需要用到的组件,添加默认样式 参考一些bootstrap 样式
开始尝试写一个响应式导航栏
1.先设置响应式导航栏宽高,和去除a、li、的默认样式,使用flex把首页、职业、企业、关于的位置调整好
2.使用媒体查询,开始制作小于992px时的效果,先把首页4个导航菜单给隐藏,
3.给他添加一个按钮,当点击按钮的时候会垂直展开导航菜单栏
这里我使用的label来实现按钮
4.现在来写垂直呈现导航菜单栏
5.最后一步,使用label来关联input 让他点击按钮的时候会弹出垂直导航栏菜单,
最后把label跟垂直导航栏菜单 关联起来
剩下的就是把input隐藏起来就好了
明天计划的事情:手写轮播图,正确把第一个页面做出来。
遇到的问题:主要是做出来的响应式导航栏,不是很满意,明天稍微完善他
收获:响应式导航栏、初步了解组件库,
评论