Today

1.底部一共20个链接,等于 2*10  10*2  4*5所以这么布局:

底部链接 这样写的话比较丑,改来改去,小圆点不对齐浑身难受 :

因为flex布局只对第一层有效果.    如果 吧小圆点放在 <a>外面, 那三个字的时候小圆点上下是不对齐的,

而且最大屏时链接文字是竖直排列的,   并且 设置了<a>的行高 后 撑高了外面的 div,鼠标悬浮的时候页面有点滚动

解决: 设置<a>的宽度,并且对<a>和圆点外面的div设置 d-flex justify-content-start,并对这个div 设置和<a>一样的高度

         设置<a>的宽度 后 hover 下换线 是<a>的长度了,三个字的时候很难看, 改成<span>的hover 这样下换线就和字数对齐

2.对于<a>标签,只有写了 href 属性 才会鼠标显示 小手

3.这张表格 :

4.  直接 .text-center使内容水平

5. box-shadow :  (文字阴影 text-shadow)

     外阴影：box-shadow: X轴  Y轴  Rpx  color;

    属性说明（顺序依次对应）： 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值（大小）    阴影的颜色

    内阴影：box-shadow: X轴  Y轴  Rpx  color  inset;

       默认是外阴影   内阴影：inset 可以设置成内部阴影

或者  直接 加 .shadow  非常方便哟

eg.   <div  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/ 
                                                   0px -10px 10px #000,  /*上边阴影*/ 
                                                   10px 0px 10px green,  /*右边阴影*/ 
                                                   0px 10px 10px blue;" /*下边阴影*/ ></div>

6.

visibility="visible|hidden"，visible显示，hidden隐藏。

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

block：默认值。

当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<DIV>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<DIV>一样工作。

inline:

将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<DIV>，它也将会被组合成像<span>那样的输出流。

none：

最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

7.增加媒体查询 :

8.      在使用a标签的四种属性时，link和active一般不写，hover用的最多。同时在使用的过程中一定要按着四个“状态”的先后过程写。

         a:link ->a:hover ->a:active ->a:visited

Tomorrow

继续任务8

给首页加上 箭头 ,快速滑到页面顶部和底部

Gain

1.记一个 ps 快捷键 ,先把两个图层智能对象,按住ctrl选择不同图层,ctrl + g 创建组,再选中这个新组 来切图

2.bs中 flex 布局 只要写类名就好了,没有太特殊的样式 还蛮方便的

3类名上也可以设置  padding margin , pl pr mb mt 之类

3. 在mdn上学习 

4.一个选择器 :

p:nth-child(2){
background:#ff0000;
}

Pain 

1.bs 还得熟悉 ,有些属性可能直接有的不用自己写css

2.今天暂时没有,做得慢了点,一些问题基本解决了