“生活资讯网”项目血泪教训莫让后人再踩坑

项目后评价：项目结束后总结经验教训 #生活技巧# #职场生存技巧# #项目管理方法#

一开始在制作这个导航栏就先给了我一个下马威，此话怎讲呢？就是说我做那个样式花了我两天具体这个样式是个什么样呢？我下面会放一个gif动态图展示出来。

**还有！！!**对于应用Bootstrap（栅格系统）这个响应式布局从一开始接触到现在使用我都还在叫错它的名字…什么栅格化系统、删除系统…不仅学的没到位，名字也喊不对

**还有还有！！！**学的解决方法多了选择恐惧症的我就开始害怕了…这个用起来布局很方便，那个代码打起来能简单些…反正诸如此类的问题就让我纠结了好久害生活不易潘潘叹气…

**哦！对了！还有！**在布局完后基本展现出效果后，里面许多参数也是要不停的调整，一会儿这个图标掉下来了，一会儿这个图标不见了，一会儿那个图标被影响了…反正就是不停在和它玩躲猫猫…

**哦哦！还有一个！**就是这脑子呀总是把以前学的搞忘，就还需要花时间往前复习一哈…

这书读的我真的一个头两个大！啊啊啊啊啊啊~~~

问题描述：

====================================================================

导航栏在不同窗口下有不同的样式呈现：

我算是明白了，越是花里胡哨越是好看的东西背后绝对没有看到的这么简单

一开始我第一反应就是利用Bootstrap来制作！额，首先就是给一个container大容器盒子。

但是我发现一个问题，里面的子盒子会在屏幕挤压下会改变样式动来动去的不按我的要求来

原因分析：

====================================================================

首先要弄明白Bootstrap时栅格化系统原理：它将版心分成12份，然后当屏幕压缩了就会一行放不下变成两行。

解决方法：

====================================================================

解决方法：需要用媒体查询或者在Html下面写你想要的样式，不想要的样式在（大屏、中屏、小屏…）中隐藏hidden-lg、hidden-md、hidden-sm

导航栏框架代码如下：

/

不需要container 这样才能占满整个窗口/

//左边的logo

1

//中间的一列导航栏

2

//右边的图标

2

//

方法延伸：

====================================================================

对于这种适应不同窗口的方法（统称为响应式布局）flex、流式布局（百分比）、max-width来表示、Bootstrap栅格化系统。

像这种（三张图）平分版心的就可以用flex来完成：

用一个大盒子装三给小盒子

父盒子给一个display：flex；

子盒子给一个flex：1；

后话

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

网址：“生活资讯网”项目血泪教训莫让后人再踩坑 https://www.yuejiaxmz.com/news/view/544516

相关内容

装修小白血泪踩坑系列の硬装避坑指南①
过来人对卫生间改造的7点经验之谈和血泪教训，看完再装不留遗憾
[济南生活家装饰]总结定制橱柜避坑攻略，都是业主的血泪史！
老车翻新值不值？血泪教训告诉你！
项目一：《生活资讯网》开发
【网络安全知识】@年轻的你 请查收这份“避坑指南”
老年人锻炼七大误区，莫“踩雷”
这些关于网络消费的“坑”，你踩了几个？
“生活资讯网“ 的心得
数字技能培训最新资讯

随便看看