1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | 结果:首页静态轮播效果展示失败 目标:实现front效果展示 分析:仿照课程设计 实现: classify < div class = main -category> < div class = "main-bg" > < div class = "main-bg-item " style = "background-image: url('./res/i/c1.jpg');" > < div class = "main-title-1" ></ div > </ div > < div class = "main-bg-item " style = "background-image: url('./res/i/c2.jpg');" > < div class = "main-title-2" ></ div > </ div > < div class = "main-bg-item " style = "background-image: url('./res/i/c3.jpg');" > < div class = "main-title-3" ></ div > </ div > </ div > < div class = "f-nav-box" > < div class = "bg-nav" > < a class = "cur" ></ a > < a ></ a > < a ></ a > </ div > </ div > < div class = "main-category-menu" > < div class = "category" c-id = "a" > < a >< div class = "group" >数据开发</ div ></ a > </ div > < div class = "category" c-id = "b" > < a >< div class = "group" >移动开发</ div ></ a > </ div > < div class = "category" c-id = "c" > < a >< div class = "group" >后端开发</ div ></ a > </ div > < div class = "category" c-id = "d" > < a >< div class = "group" >数据库</ div ></ a > </ div > < div class = "category" c-id = "e" > < a >< div class = "group" >运维&测试</ div ></ a > </ div > < div class = "category" c-id = "f" > < a >< div class = "group" >UI设计</ div ></ a > </ div > </ div > < div class = "main-category-submenu-content" id = "a" >AAAAAAAAAA</ div > < div class = "main-category-submenu-content" id = "b" >BBBBBBBBBBBB</ div > < div class = "main-category-submenu-content" id = "c" >CCCCCCCCCCCC</ div > < div class = "main-category-submenu-content" id = "d" > DDDDDDDDDDDDDD</ div > < div class = "main-category-submenu-content" id = "e" >EEEEEEEEE</ div > < div class = "main-category-submenu-content" id = "f" >FFFFFFFFFF</ div > </ div > 3.2 index.html <!-- 实战推荐-start --> < div class = "types-block clearfix" > < h3 class = "types-title" >实战推荐</ h3 > < div class = "types-content" > < a href = "" > < div class = "course-card-container" > < div class = "course-card-top green-bg" > < span >测试</ span > </ div > < div class = "course-card-content" > < h3 class = "course-card-name" >Android自动化测试实战 工具 框架 脚本</ h3 > < p title = "找Android自动化测试工作必学的主流工具、框架和自动化脚本" >找Android自动化测试工作必学的主流工具、框架和自动化脚本</ p > < div class = "course-card-bottom" > < div class = "course-card-info" >178人在学</ div > < div class = "course-card-price" >¥179.00</ div > </ div > </ div > </ div > </ a > < a href = "" > < div class = "course-card-container" > < div class = "course-card-top pink-bg" > < span >WebApp</ span > </ div > < div class = "course-card-content" > < h3 class = "course-card-name" >AngularJS仿拉勾网WebApp 开发移动端单页应用</ h3 > < p title = "基于AngularJS,仿拉勾网开发一个招聘类的移动端单页应用" >基于AngularJS,仿拉勾网开发一个招聘类的移动端单页应用</ p > < div class = "clearfix course-card-bottom" > < div class = "course-card-info" >344人在学</ div > < div class = "course-card-price" >¥99.00</ div > </ div > </ div > </ div > </ a > < a href = "" > < div class = "course-card-container" > < div class = "course-card-top brown-bg" > < span >Django</ span > </ div > < div class = "course-card-content" > < h3 class = "course-card-name" >强力django杀手级xadmin 打造上线标准的在线教育平台</ h3 > < p title = "全面掌握django框架,轻松应对python web开发工作" >全面掌握django框架,轻松应对python web开发工作</ p > < div class = "clearfix course-card-bottom" > < div class = "course-card-info" >488人在学</ div > < div class = "course-card-price" >¥369.00</ div > </ div > </ div > </ div > </ a > < a href = "" > < div class = "course-card-container" > < div class = "course-card-top purple-bg" > < span >Python</ span > </ div > < div class = "course-card-content" > < h3 class = "course-card-name" >Python高级编程技巧实战</ h3 > < p title = "精选50个python训练任务,提升实战技能与高效编程技巧" >精选50个python训练任务,提升实战技能与高效编程技巧</ p > < div class = "clearfix course-card-bottom" > < div class = "course-card-info" >813人在学</ div > < div class = "course-card-price" >¥168.00</ div > </ div > </ div > </ div > </ a > < a href = "" > < div class = "course-card-container" style = "margin-right: 0px;" > < div class = "course-card-top green-bg" > < span >PHP</ span > </ div > < div class = "course-card-content" > < h3 class = "course-card-name" >前端后台ThinkPHP开发整站</ h3 > < p title = "用PHP+MySQL+Ajax开完新闻资讯整站,实现“小全栈”的梦想" >用PHP+MySQL+Ajax开完新闻资讯整站,实现“小全栈”的梦想</ p > < div class = "clearfix course-card-bottom" > < div class = "course-card-info" >2324人在学</ div > < div class = "course-card-price" >¥128.00</ div > </ div > </ div > </ div > </ a > </ div > </ div > <!-- 实战推荐-end --> 3.3 已打包成过 |