顶部工具栏的html5CSS代码实现

移动应用开发专业资源库移动应用开发专业资源库北京电子科技职业学院实训项目：掌上商城

--顶部工具栏HTML、CSS代码实现学习目标1234重点难点学习方法实践过程目录5课后思考移动应用开发专业资源库学习方法重点难点实践过程课后思考学习目标本次实训完成的目标任务01理解顶部工具栏html5页面布局标签02掌握顶部工具栏外观样式学习方法重点难点实践过程课后思考学习目标重点顶部工具栏html标签难点顶部工具栏css样式学习方法重点难点实践过程课后思考学习目标教引导演示学讨论与研究做任务驱动动手实践1:开发工具学习方法重点难点实践过程课后思考学习目标素材准备Html代码CSS代码1:创建商品分类页学习方法重点难点实践过程课后思考学习目标素材准备Html代码在掌上商城项目中添加category.htmlCSS代码2:添加商品分类页样式文件学习方法重点难点实践过程课后思考学习目标素材准备Html代码在掌上商城项目的css文件夹中添加category.cssCSS代码3:设置视图与标题学习方法重点难点实践过程课后思考学习目标素材准备Html代码在category.html设置视图与标题：<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0"/><title>商品分类页</title>CSS代码4:导入商品分类页样式相关文件学习方法重点难点实践过程课后思考学习目标素材准备Html代码在category.html导入相关文件：<linkrel="stylesheet"href="css/font-awesome.css"/><linkrel="stylesheet"href="css/base.css"/><linkrel="stylesheet"href="css/category.css"/><linkrel="stylesheet"href="css/column.css"/>CSS代码5:添加顶部工具栏html代码学习方法重点难点实践过程课后思考学习目标素材准备Html代码<headerclass="jb_topBar"><ahref="index.html"class="icon_back"><iclass="fafa-angle-left"></i></a><formaction="detail.html"><inputtype="search"placeholder="分类搜索"/></form><aclass="icon_menu"><iclass="fafa-outdent"></i></a></header>CSS代码1:顶部布局样式学习方法重点难点实践过程课后思考学习目标素材准备Html代码/*定义顶部工具栏*/.jb_topBar{width:100%;height:45px;background:url("../images/header-bg.png")repeat-x;background-size:1px44px;border-bottom:1pxsolid#ccc;position:absolute;}CSS代码2:图标样式学习方法重点难点实践过程课后思考学习目标素材准备Html代码.jb_topBar>[class^="icon_"]{position:absolute;top:0;height:44px;width:40px;padding:2px10px;background:none;font-size:30px;color:#666;}CSS代码3:按钮区样式学习方法重点难点实践过程课后思考学习目标素材准备Html代码.jb_topBar>.icon_back{left:0;background-position:-20px0;}.jb_topBar>.icon_menu{right:0;background-position:-60px0;}CSS代码4:表单样式学习方法重点难点实践过程课后思考学习目标素材准备Html代码.jb_topBar>form{width:100%;height:44px;padding:040px;}.jb_topBar>form>input{width:100%;border:1pxsolid#e0e0e0;border-radius:4px;height:30px;ma