今天任务:对电影首页页面进行优化,主要完成了添加搜索查询按钮和增加下滑式分页功能(在同伴的功能基础上进行CSS美化)
遇到的问题:在进行“添加搜索查询按钮”时,出现了搜索按钮与表单不关联以及背景图片无法显示的情况。
出现问题的原因:在添加按钮的代码中,虽将type类型设为了“button”,但是并没有給button添加点击事件,所以造成了按钮与表单无法关联的情况。
解决办法:将type类型更改为submit
下滑式分页(加载更多按钮)CSS代码:
/*加载更多*/
.btn_local {
/*position:fixed;*/
bottom:0px;
z-index:99999;
300px;
height: 35px;
text-align:center;
margin-left: 630px;
/**/
}
.btn_div { /* 按钮美化 */
180px; /* 宽度 */
height: 30px; /* 高度 */
border- 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #999999; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 14px; /* 字体大小 */
}
.btn_div:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #808080;
}