![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html
星星的泪痕
这个作者很懒,什么都没留下…
展开
-
Css 实现图片局部模糊
利用CSS3 filter(滤镜) 属性 设置一张图片作为底图,一张用div包起设置定位和宽高通过设置filter模糊 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&原创 2021-01-07 16:37:40 · 2232 阅读 · 0 评论 -
禁止页面的所有a链接跳转(css、js方法)
禁止页面的所有a链接跳转 1.css方法: a { pointer-events: none; } 2.js方法: <script type="text/javascript"> var a = document.getElementsByTagName("a"); function stop(event) { //IE和Chrome下是window.event 火狐下是event event = event || window.event; if (event.prevent原创 2020-12-28 17:14:57 · 1863 阅读 · 0 评论 -
购物商城系统设计与实现总结_购物车
用户进入购物车页面对其进行查看和管理。系统在商品详情页提供了加入购物车按钮,用户在浏览时遇到自己心仪的商品,但又暂时不想购买或犹豫不决,可以将其加入购物车以便二次查询。 在购物车里中点击商品可以进入对应商品详情页再次浏览,除此之外还提供了全选,单条/选中删除,结算等功能。购物车内标题栏有全选框,显示的每条商品信息前也有勾选框,点击批量删除或结算可以一次性对选中的商品进行对应功能处理。购物车界面如图 删除单条产品,当用户点击某条商品信息后对应的红色删除按钮时,即可删除对应商品。 删除所有选中的产品.原创 2020-07-01 17:01:53 · 2579 阅读 · 0 评论 -
购物商城系统设计与实现总结_商品列表展示页的实现
商品分类展示页面和关键字搜索所显示的商品页面,只是传入的信息不同,重复调用了相同的子组件。子组件为商品列表组件和详细信息组件,点击列表页展示的商品时,跳转到对应商品详情页。列表页用到的分页功能单独制作为分页组件,通过父子组件传值来与商品列表组件联系,点击分页组件的上/下一页以及对应页号时可以展示不同的商品。 商品列表分页功能主要通过数据库查询语句select-limit来实现,点击不同分类时传入对应字段category的值以及预先设定好的展示数量,查询数据库product表将对应数据返回渲染到页面。而搜索原创 2020-06-15 16:37:10 · 4010 阅读 · 1 评论 -
购物商城系统设计与实现总结_登录功能的实现
用户只有登陆系统后才能使用全部功能,例如购物车和个人订单,否则点击这些功能都会跳转到登录页面。登陆页面填写信息有误时,都会显示错误提示,可以点击重置按钮,将输入框置空重新输入。若没有账号,可点击左下角提示文字跳转到注册页面进行注册。登陆成功后会弹出提示框提示成功。 <template> <div id="Login"> <div class="login_box"> <!-- 头像区域 --> <div .原创 2020-06-14 18:08:24 · 1861 阅读 · 0 评论 -
vue+express开发,利用axios交互。总结
Vue 响应式数据绑定和组件化开发(单页应用) Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。响应式实现页面数据和代码数据的自动同步更新,使开发可以简化为操作业务数据,跟视图层分离 组件化开发将页面不同功能的模块独立开发,使开发更加条理清晰和独立 vue-cli 是 运行在 NodeJS 环境下 帮助我们开发 基于Vue框架的项目 的脚手架。 创建的项目目录结构: ├──原创 2020-06-02 11:18:23 · 1498 阅读 · 0 评论 -
用@keyframe实现图片轮播
通过keyframe实现4张图片轮播 通过无序列表放置5张图片,第5张和第1张相同,使当第4张播放时后方不会出现空白 每个li放置一张,li浮动,使图片位于一行,超出框子的隐藏(框子设置overflow:hidden;) 通过ul向左移动,第四张移出后返回原位,再次重复移动,实现轮播的效果 未隐藏时效果图 <!DOCTYPE html> <html lan...原创 2020-01-08 21:50:29 · 2298 阅读 · 2 评论 -
HTML 引用小图标
阿里巴巴矢量图标库里有各种类型小图标,引用这些图标代替绘制或PS很方便。 阿里巴巴矢量图标库 将需要的图标加到自己项目里,会生成链接代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...原创 2020-01-07 11:46:24 · 3520 阅读 · 2 评论 -
HTML 学习 表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-27 11:38:56 · 85 阅读 · 0 评论 -
HTML 学习 表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-27 11:23:22 · 88 阅读 · 0 评论 -
HTML 学习 列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-27 09:18:35 · 97 阅读 · 0 评论 -
HTML 学习 超链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-27 08:44:39 · 122 阅读 · 0 评论 -
HTML 学习 img
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compati...原创 2019-12-27 08:33:56 · 225 阅读 · 0 评论