发表于： 2019-04-22 23:13:10
2 915
今天完成的事情：
一、学习了媒体查询
使用
@media screen and (max-width: 768px) {
}
内部的元素会根据屏幕宽度像素使用样式
max-width=小于等于宽度
min-width=大于等于宽度
二、做下拉菜单浪费了大量时间，只完成了一小部分主页的手机端修改
遇到的问题：
一、复习使用select和option制作下拉框
结果发现用这个方法实现不了效果
改用hover，
如果要用hover控制另一个元素的话，必须是父子级关系，或者同级元素，父元素不同的两个元素不能使用hover控制
把下拉图标单独拉出来重新编写，同级元素使用“+”号链接，参考：http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp CSS 相邻兄弟选择器
display: none;
}
.tag:hover + .option {
display: block;
transition: 2s;
}
但是这种方式不能做出渐变效果，transition没有效果
试着添加opacity来实现渐变效果，依然没用
结论：display无视transition效果
明天计划：
继续任务8手机端
收获：
再次回顾了大量旧知识，包括：select,option,hover,box-shadow
回顾了bootstrap栅格布局参数
返回列表
评论