前端页面实操之企业门户（一）

    开始前记录下题外话：  那就是昨天接触到一些新的知识体系，也关注了好些技术相关的订阅号。  本来是一件挺好的事情，但是越逛越迷茫了。 开始怀疑自己了，到底想干什么？？？ 啥都想学，但是每个技术门类都是经历了长时间的积淀而形成的成熟的体系。   我也很难受了额，控制不住自己。  到底想干什么呢？同时也感到有一些泄气，因为要学的知识实在事太多，自己的差距太大。 引起了一些消极的情绪。   随后在回寝室路上反思下，权当自己课外扩展发生的一点小插曲吧，毕竟自己的主要任务在哪心里还是有数的。。  不过都过去了，成功不能复制，每个人的经历也不可能完全一样，走自己的路，坚持自己所坚持的就行。

    今天要记的笔记是关于前端的。  前端三剑客： html，js,css。  自己虽然接触的较早，但是由于一些特殊的原因，自己并没有过多的练习，更别提什么经验了。  但是一次跟学长合作实践的时候，刚好自己负责前端那块，导致写的页面是要多丑有多丑。 交互的方式是要多搓有多搓。   这也让自己有了个想法那就是必须有相关的前端练习经验，不然去改html都费劲，更别说设计了，更更别说美感了。    因此练习的目的在于 有个基本的东西 傍身。  

    自己在早些时间写尝试过自己写那些布局啥的。  最终的结果是： 页面空洞，单调毫无美感；  经常对于哪块要放置哪些内容没有思绪；  对于元素间该如何布局没有思路；  布局总是错乱；。。。   等很多问题。  于是后面接触了框架啥的，其中bootstrap算是花了精力了解了下，之后再做的时候只能说稍好，还是不能看。 索性就咬紧牙关，撸起袖子练习吧！  抓基础谁怕谁。    不得不说再练习中能够将自己长期的疑惑解开。   还是可以了解到一个在自己手里本来丑到爆的元素如何就有了灵魂。  先上上效果图吧: 同时这是慕课网的一个免费课程。

 

    可以看到整个界面风格还是比较整洁，同时也是比较赏心悦目的。 

    它是采用了一种自上而下的设计方法。   简单粗暴一点就是从上到下的方式进行处理。   每一行（能够绝对对齐的元素）算成一个块。  同时采用了页面内容主题内容居中的方法。  一方面是为了更好的兼容我觉得，另一方面可能是内容不够哈哈。 实际应该是为了响应式的要求吧，猜测。    好像前端开发还真跟点线面分不开呢，是 线就对其，线之间有绝对的间隙存在这些都是要考虑的，宽度，高度，边界，边宽等等。 。 。 

     注意到它的顶部有一个设为主页，联系我们，加入收藏这种类似于小广告的功能。。  其基本没有css修饰，所以是一种裸奔状，很丑。 我想这也是把它设计的这么小的原因吧。。    前端设计还有一点比较神奇的就是，默认的元素怎么看怎么丑，但是我们只需仅仅修改一下它的颜色，大小，它们一起的效果则是完全不一样的。  我想这不仅需要我们具有较好的美术功底，同时也需要我们的实际的工作经验作支撑。   

    下面一点的那块白色的首部区域：算是一个块了。 由左右两部分构成，左边为商标啥的，注意它为一个  图片和 两排文字组成。 文字之前是默认的颜色和大小，很丑，不协调。  可以看到即调整了文字的大小，和颜色，以及位置。   这三者中，可能最不好控制的就是位置。 因为它并不像我们用office工具那样需要换行来个空格，需要转换位置直接拖动。    控制位置也算是前端一个比较纠结的问题了。   依次看看代码的构成：

    

    以上就是关于那个丑到爆的三个a链接的功能实现以及代码样式。仔细看看，也不太丑。全归功于css：

    

    可以看到，这样一个不错的效果还是写了挺多的代码呢。 而且挺漂亮，可以在实际的使用中将其直接迁移或者像背古诗那样把它记住。 

    

    需要注意的是：对那种高度不好划分，如图片与文本结合了的情况，需要划分块，按照块的思想处理。看看它的效果：

    左边为一个纯图片，右边为一个图标，两种风格的文本。其css:

 

    logo差不多就这些需要注意的。 然后需要注意下页面中部的内容全部位于中部的，所以需要有个块给包围起来：

之后就是这个比较赏心悦目的导航条了：

它的构成：

它的css:

    密密麻麻的，中间因为各种事情被搁置。导致一直为草稿状态 ，托了好几天了，就先发了吧。