发表于: 2017-03-04 21:10:25

1 816


一、今天完成的任务:

 1,下拉菜单:

 简单的概括为一句话就是:通过bootstrap的布局方式利用display:none隐藏属性、display:block的独占一行的属性,以及三角形border- radius的制作方法来实现下拉菜单,

 因为我的三个button都在一个容器内,所以我给予button一个margin-right值33.3%,也就是相当于三个button都具有这个值,于是就有了三分天下的效果

如果想要更精确一点  你可以设置margin-right为负值-1%,也就是说三个button相互叠加在了一起,再给予三个button33.9999999%,这样就会比三分天下更精确一些。

二、遇到的问题:

 footer里的三个照片,使用和下拉菜单同样的方法,但是没有使用bootstrap的布局方式,只是使用了margin-right三分天下,虽然做到了也做到了均分,但是无法做到自适应,没有找到自适应的办法。(还请师兄不吝赐教

送上我的footer的代码:

  .footer{                                    

       bottom:0;                            

       background-color:yellow;                 

 .footer img{                                

       margin-left:3%;                         

             }


<div class="footer" >

<img src="images/write.png"><img src="images/fangzi.png">

<img src="images/niuren.png">

<div>首页</div>

<div>我的</div>

</div>

 

三、明天的计划

 footer底部logo的布局,如果顺利的话  明天大致应该就可以做好了,也就剩一些大小,比例,色彩细节问题,对了,还有底部logo的超链接。


返回列表 返回列表
评论

    分享到