HTML5+CSS3+JavaScript 阶段性实践小案例——京东购物车
目录
一.素材提取方法
二.图标
三.实现
（1）效果图
（2）图片素材
（3）代码
花了三天时间将HTML4，HTML5，CSS2,CSS3大致学习了一下，现在来做一个网页实践一下，我是准备专攻后端开发的，所以前端只是浅尝辄止，定有不足，欢迎指正。
一.素材提取方法
1.以保存图片为例，F12来点击响应图片获取相应信息，其中有图片链接（获直接右键图片复制图片链接也可）
2.如果想保存整个网页的所有图片，直接Ctrl+S，就会保存整个网页的所有数据（其中有图片）
二.图标
以前以为图标都是些小图片，其实不然，下面给大家讲解一下图标的生成步骤。
1.首先登录阿里矢量图标库iconfont-阿里巴巴矢量图标库，注册一个账号登录。
2.搜索自己想要的图标，例如房子：
挑选自己想要的图标加入购物车。
然后点击购物车，选择下载代码
3.将下载的文件解压，再在项目下新创建一个icon（名字自己随便取）文件，再将解压后的文件的最里层的那些文件全部放到icon文件中。
再利用link标签将iconfont.css文件（路径根据自己的存放情况会有不同）引入html文件中
<link rel="stylesheet" type="text/css" href="../icon/iconfont.css" />找到demo_index.html文件打开并运行，
图中红框框起来的就是相应的图标对应的Unicode编码。
4.<i>标签的class必须命名为iconfont，和引入的图标css文件名一致，i标签中间放对应图标的Unicode编码！
<li><a href=""><i class="iconfont">
HTML5+CSS3+JavaScript 阶段性实践小案例——京东购物车相关推荐
- 《HTML5+ CSS3+JavaScript 网页设计实战（视频教学版）》代码下载、简介与前言
代码下载:https://pan.baidu.com/s/1o8aBMjw(密码:f3u2) 图书简介 本书由浅入深,系统.详尽地介绍了HTML5.CSS3和JavaScript相关技术及其在Web前 ...
- 《HTML5+CSS3+JavaScript前端开发从零开始学（视频教学版）》简介
#好书推荐##好书奇遇季#<HTML5+CSS3+JavaScript前端开发从零开始学(视频教学版)>,京东当当天猫都有发售.定价69元.本书配套本书配套示例源代码.PPT课件与同步教学 ...
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.4 真正的HTML5
本节书摘来异步社区<移动网页设计与开发 HTML5+CSS3+JavaScript>一书中的第1章,第1.4节,作者:[英]Peter Gasston,更多章节内容可以访问云栖社区&quo ...
- 哆啦A梦主题网站(HTML5+CSS3+Javascript)
哆啦A梦主题网站 1 简介 2 技术介绍 3 项目演示和获取方式 4 打开方式 5 页面图片展示 6 部分代码展示 1 简介 作为一名哆啦A梦的粉丝,也可以说是哆啦A梦的爱好者.我小时候特别喜欢看哆啦 ...
- html网页特效微课,网页设计与制作(HTML5+CSS3+JavaScript)（第4版）（微课版）
网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版) 编辑 锁定 讨论 上传视频 <网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版)& ...
- html5+css+javascript深入学习实录pdf,HTML5+CSS3+JavaScript从入门到精通 微课精编版.pdf...
作 者 :前端科技 出版发行 : 北京:清华大学出版社 , 2018.08 ISBN号 :978-7-302-50220-3 页 数 : 529 原书定价 : 79.80 主题词 : 超文本标记语言- ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <! ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYP ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!D ...
最新文章
- 【求助】哪个软件负责在屏幕右下角显示类似“caps lock on/off”的？ - 技术封存区 - 专门网论坛 -...
- 关于《如何阅读一本书》
- sql,插入最大值加1
- MySQL的日志管理
- Linux文件系统为,浅析Linux文件系统
- WPF调用图片路径，或资源图片
- ffmpeg 0.8.7在windows环境mingw环境的编译
- java poi 页码,apache poi页码
- QT下添加*.qrc(图标Icon、图像)资源
- 一个生成验证码的Jsp页面
- PostgreSQL 创建分区表（转 仅供自己参考）
- 静态成员对比实例成员（static修饰符解析）
- 关于导出聊天记录这件事……
- 2023年南开大学税务专硕考研上岸前辈备考经验指导
- c++游戏服务器方向需要多少功底？
- Vulcan 基于Meteor的APollO框架 ， grapesjs 用于可视化生成Html 页面
- C语言度化为度分秒的方法,一句话转换度:分:秒格式为度.度度度
- 解决ubuntu无法解析域名、无网络连接问题
- MathType使用技巧之 改变字体大小
- 计算机学术为啥分要比专硕低那么多,专硕，凭什么是鄙视链最底端的一群人
热门文章