没有合适的资源?快使用搜索试试~ 我知道了~
HTML5+CSS3电商项目综合实战1
需积分: 0 1 下载量 80 浏览量
2022-08-03
14:03:39
上传
评论
收藏 471KB PDF 举报
温馨提示
试读
19页
HTML5+CSS3电商项目综合实战1
资源推荐
资源详情
资源评论
愿景:"让编程在难学,让技术与活加有趣" 多课程请访问xdclass.net
第章 前期准备
第1节 课程简介及项实战效果演示
第2节 分析结构以搭建架构
愿景:"让编程在难学,让技术与活加有趣" 多课程请访问xdclass.net
第章 搜索框及商品分类
第1节 初始化样式以及顶部栏布局
简介:讲解的先骤初始化样式以及顶部栏的布局
初始化样式
* {
margin: 0;
padding: 0;
}
body,
button,
input {
font: 12px arial;
}
li {
list-style: none;
}
a {
color: #666;
text-decoration: none;
}
input,
第2节 详解搜索框下拉字提示
简介:讲解搜索框的布局以及下拉字提示的实现
监听按钮松开事件,显示下拉提示
监听失去焦点事件,隐藏下拉提示
监听获取焦点事件,显示下拉提示
button {
border: none;
outline: none;
}
body {
background-color: #f8fafc;
}
.w {
width: 1190px;
margin: 0 auto;
}
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
}
searchInput.addEventListener("keyup", showKeyword, false);
searchInput.addEventListener("blur", hideKeyword, false);
searchInput.addEventListener("focus", showKeyword, false);
第3节 商品分类轮廓布局及原分析
简介:讲解商品分类的布局以及实现原
实现原:
绝对定位定位级分类
hover属性控制级分类的显示和隐藏
第4节 详解级分类实现()
第5节 详解级分类实现()
简介:讲解级分类的布局以及控制级分类的显示隐藏
定位+hover属性
.nav-list {
position: relative;
}
.nav-list .item-menu {
display: none;
position: absolute;
left: 200px;
top: 0;
width: 900px;
min-height: 500px;
background-color: #fff;
box-shadow: 2px 2px 9px rgba(0, 0, 0, .2);
z-index: 999;
}
.list-item:hover .item-menu {
display: block;
}
剩余18页未读,继续阅读
资源评论
巴蜀明月
- 粉丝: 30
- 资源: 302
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功