发表于: 2018-08-14 23:42:53

1 629


Today

1.重做了雪碧图,为啥我切出来的图片这么大,还要设置缩小一半...昨天的几张切图没导出png24,浪费了好多时间



2.菜单栏第一列<li>我全设置了右边有bottom了,但是第三列是没有右边的border 


3.3个<li>平分宽度的时候,设置父容器display:flex ,子元素flex:1 



#nav li ul {
display: none;
}

表示隐藏下拉菜单


4.

#nav li:hover ul {
display: block;
background-color: #ffffff;
z-index: 999;
}

表示鼠标放在列表显示下拉菜单


5.鼠标放到一级菜单的时候,另外两个一级菜单中二级菜单的border-right 也显示了,改成<a>的border-right


6.对#nav li :text-align:center  可以让子菜单也居中


7.display只是改变了元素的显示方式,但是不能改变元素的性质


8.

overflow: hidden;text-overflow:ellipsis;white-space: nowrap;

实现单行文本溢出时显示省略号


9.写蓝色箭头:

.iconInfoDate {
display: inline-block;
width: 10px;
height: 10px;
border-top: 2px solid #5fc0cd;
border-right: 2px solid #5fc0cd;
transform: rotate(45deg);
}


10.灰色小箭头:

.selectArrow {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #afbac0;
margin-left: 1rem;
}

灰色小箭头位置,对<a>设置display:flex,箭头放在<a>里


11.overflow:auto 内容被修剪浏览器显示滚动条,设置这一行左右布局搞了半天

然后想到上面三个下拉菜单用flex:1 来平分,就试了下还真行,仔细看了看flex:1 到底啥意思


Tomorrow

1.完善任务6并提交

2.修改下拉菜单用select写

Gain

1.用css画小箭头


2.用css写下拉菜单


3.flex布局



Pain


1.button 鼠标放上去不显示小手,


2.果园的园怎么看起来是下沉的...

3.整个页面的高度好像没有占满,鼠标放在头部和尾部会出现上下滚动条,找了半天发现时footer的高度去掉就好了,设置最小高度就够了


4.这两个部分设置了压缩出现省略号为啥没效果:

这部分和下拉菜单





返回列表 返回列表
评论

    分享到