前言:
1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真正快速入门,如果有哪些不清楚的地方或者错误,欢迎联系我
2.更新时间没有规律,一般会在3天左右更新一篇(全系列预计会有12篇)因为需要工作,所以只能在闲暇之余整理,如果有喜欢的朋友可以关注我,将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友,可以联系我,在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例,帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等
另:有很多朋友私聊我说图片不能正常显示的问题,测试后发现简书上可以在windows和mac端完美显示,如果看不到图片麻烦移步简书链接
准备工作
- 工欲善其事,必先利其器,首先我们需要安装WebStorm这款超超超好用的工具,工具已经帮各位上传到网盘了,画重金搞到的mac最新版呦!windows端的小伙伴麻烦自行百度吧,毕竟资源多webStorm下载地址(已包含安装方法和汉化等方法) —— 密码:awh2
- 安装完毕后先来简单部署一下项目文件结构:这边就先创建一个imgs文件夹和一个css文件夹就好了
- 接下来创建根网页文件(index.html)
- 再创建一个css文件(index.css)
- 为了演示展示本地图片,我们就将用到的图片以本地的形式保存下来放在imgs内
- 注:图片怎么放进来?只要点击需要放进工程的图片 —— 复制图片 —— 然后选择imgs文件夹 —— 粘贴 —— OK
- 到这里,准备工作就完毕了
分析页面
- 先来看一下我们的目标网页easyicon开发中图标素材搜索神器
- 从图中可以看出,网页可以分成上、中、下3部分
- 上部:左边一张图片,右边一个登录按钮
- 中部:上边一张图片,下面一个搜索框,搜索框右边一个搜索按钮,再下面有个语音选择按钮
- 尾部:左边一组,右边一组
大概的结构就是上面描述的那样,我们可以把网页的搭建看成是房屋的建设,那么我们需要怎么来做呢?首先我们要分析每个结构用什么标签来做:
- 上部:我们用div标签包裹住图片和按钮,在分别用div包装图片和按钮
<body> <!--头部--> <div class="header"> <!--左边图片--> <div class="header-lefticon"> <a href="http://www.easyicon.net/" target="_blank"> <img src="imgs/Snip20160615_2.png" alt="easyicon图片"> </a> </div> <!--右边登录--> <div class="header-rightlogin"> <a href="http://www.easyicon.net/vip/?ref=/" target="_blank">登录</a> </div> </div> </body>
- 中部:我们用div标签包裹整个中部内容,再用div分别包裹住图片,搜索框和搜索按钮
<body> <!--内容--> <div class=
- 上部:我们用div标签包裹住图片和按钮,在分别用div包装图片和按钮