发表于: 2017-03-04 21:10:25
1 819
一、今天完成的任务:
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的超链接。
评论