发表于: 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隐藏起来就好了

明天计划的事情:手写轮播图,正确把第一个页面做出来。
遇到的问题:主要是做出来的响应式导航栏,不是很满意,明天稍微完善他
收获:响应式导航栏、初步了解组件库,


返回列表 返回列表
评论

    分享到