第十一篇：添加超链接a
上篇把整体的大框架给做出来了，这次把小框框的标题栏填充一下。
本篇涉及的问题：
1，如何让一排行内元素分开分布到一行的两端？
方案，先在每个行内元素外套一个块元素，然后在所有块元素外套一个整体的块元素，两个块元素外层在套一个块元素，最后把需要的元素分别放入不同的块中，在最外层的块元素中写如下样式：display:flex;flex-direction:row;justify-content:space-between;
2，字体如何做到上下左右都居中？
方案，在外层块元素的样式中写下：line-height：框的高度；这个是行高，保证了字体上下居中，然后是：text-align：center；这个是水平居中。
3，行内元素无法设置宽高，例如a超链接无法设置，所以需要将其外层套一个块状元素，好像也可以把超链接转换成快装元素，转换后就可以设置宽高和边框了。
这是上篇结束时的最终效果。
按照设计样板的比例，进行了转换，发现距离有些不太一致，先看下效果，然后在修改样式。
效果有了，就是有些扎堆，然后这些字体没有居中。先把距离分散开。
把相同字数的宽度调整的一样。
这个。。。。。。。为什么还是在一堆挤着？这个问题，费解呀。
查看了开发者模式，发现设计的是65px，但是窗口中显示的是32，什么情况，等我去网络中搜寻一番。
。。。。。。。
嗯，这个是正常情况，网上是这么说的，然后如何改善呢，就是给超链接加一个块来限定位置大小，就是a的外边套一个div。好的，先试几个标签看看效果。
索性全部添加了，真的费手指。
我c，什么情况，待我再去网络进修一番。
。。。。。。
嗯，我知道了，div是块，是单独的一行，如果要让他们显示到一行，就需要进行转换，让他从块状元素转换为行内元素。使用的是display：inline-block。
然后效果又是有些不太一样
为什么装不下？
可以看出，宽度没有问题了，那就是我的数学问题了。
标题的宽度90/90/65/65/65/65//65/65//90/65/
总长度：90+90+65+65+65+65++65+65++90+65+=，哎呦喂，也没有问题呀。
都减小到了，还是分行，什么意思？
减小到px才算是可以，感觉应该还是哪里有问题，但是不知道问题出在哪里，说是要设置margin，我再试试。还有的说是可以设置左边的居左对齐，右侧的居右对齐。感觉对齐这个方便，先试试。
修改了头尾，先试试。
头秃了，不行，然后回去又看了看，是我写的不够完美，再改。
不断的测试，试了text-align，试了text-align-last，试了jusitify，都不行，只是字体在左右变化，框没有动，还是挤在一堆。
功夫不负有心人，最终还是找到了正确的解决方案，就是应用弹性盒子方案，就是使用display：flex。把我们的框架转换为弹性盒子，然后，再次对它们进行设置，首先是排列方式是行排列：flex-direction:row;然后是排列方式，justify-content:space-between，完整的语句如下：
display:flex;flex-direction:row;justify-content:space-between
这个方案，完美解决。
但是又有最初的问题产生了，滚动条又出现了，莫名其妙的。先不管了，同样的方法，把下侧的导航栏页设置一下。
添加完了，复制了上方标题栏的设置，也采用了flex的弹性盒子模型。
位置没有什么问题了，接下来还有一个就是字体的大小和位置，现在的文字都是靠着框的最上边，设计稿中是居中显示的。
回到设计稿，查看CSS的样式，发现还有两个设置没有用到。
字体大小和字体的对齐方式。这里设置一下。
全部添加完成。
左右居中了，但是上下没有居中，看来还有设置没有设置对，如果每一个都设置外边距就太麻烦了，去搜一下看看有什么方法。
这个简单，使用line-height行高，将行高设置的跟标题栏的高度一致即可。
这个看起来就差不多了。
对比一下跟设计稿的效果。
回看下北大的效果
左侧的字与字之间还有一个短的竖线，属于是边框线，观察后，可以看出，只要每个超链接的框加上左侧框线就可以了，然后是下方标题栏的字体明显大一些。先把竖线加上。
使用了border-left:2pxsolidblack;左侧边框线：粗细实线黑色。
不是很理想，他们的线段明显比较短。先写到这里，我去找下解决方案。