发表于: 2018-07-09 22:57:37

1 752


    今天完成的事情:

1.写桌游精灵任务。

2.CSS编辑小圆点及hover的使用。

3.巩固之前的知识,熟练使用flex盒子。


    明天计划:

完成桌游精灵任务。

学习CSS半透明。


    遇到的问题:

使用hover触发隐藏时遇到点小问题。


    收获总结:


    任务收获:


使用纯CSS书写小圆点:一种比较简单的方法

.circle { width: 10px;       

            height: 10px;   //设置宽高相等,形成方形盒子     

            background: #fff;        //设置背景 

            border-radius: 50%;   //设置半角,形成圆形        

            border: 1px solid #fff;} //设置边框大小,形成实心或空心圆。

CSS书写三角形:

.triangle {        

            border: 10px solid transparent;    //形成透明实心矩形框 

            border-top: 10px solid #fff;  }       //一段顶点,形成三角形


   使用hover触发隐藏显示:

设置隐藏很简单,使用 display:none; 就直接能设置为不显示;

可是要如何使用hover触发显示?

需要各种选择器结合使用:

.box: hover  .hidden {display:block;}

//从隐藏的元素所在的BOX 选择 触发hover,

再 选择(hidden)被隐藏了的类,使用display:block;显示为块。


   今天还使用了下栅格布局

运用Bootstrap的栅格系统,首选需要准备一个class=container的div
紧接着需要一个class=row的 div,表示再挨着的div,就是列了。

通过class="col-xs-x"设置有多少列,可以设置最后这个值为1,2,。。。。

来改变列数默认最大12列,之前一直不熟悉,不知道是怎么回事情,

今天使用了下还是比较简单的。


    今天主要时在写桌游精灵任务,任务比较简单,就是页面有点多,感觉

自己写的还是有点慢吧(),一天还没写完,明天结束.


            




   


返回列表 返回列表
评论

    分享到