前端
关注
分享
扫一扫
sem00000
这个作者很懒，什么都没留下…
展开
-
基于HTML5的移动Web应用——Bootstrap 样式案例：制作微票儿首页
制作微票儿首页成品效果阶段1：制作微票儿首页响应导航需求说明网页导航在浏览器中居中显示使用bootstrap响应式导航布局微票儿导航，在大于768px的微票儿导航使用媒体查询和bootstrap响应式导航实现在小于768px的屏幕下的微票儿导航运行效果阶段2：制作微票儿首页焦点图和特惠看模块需求说明使用栅格系统布局微票儿首页焦点图和特惠看模块，在小屏幕下左边和右边都是12列，其他屏幕下左边占9列，右边占3列使用轮播图插件布局和实现左边的微票儿首页焦点图功能右边的“特惠看”部分原创 2020-05-21 17:25:08 · 5898 阅读 · 4 评论 -
基于HTML5的移动Web应用——Bootstrap 样式案例：制作轮播图特效
需求说明使用轮播图插件布局网页的结构和样式图片切换的等待时间是2秒修改轮播图的样式，隐藏左右两边的控制箭头，不过点击左右两侧原来按钮的位置依然可以控制图片切换运行效果参考代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2020-05-13 12:01:34 · 3120 阅读 · 0 评论 -
基于HTML5的移动Web应用——Bootstrap 样式案例：制作搜狐新闻选项卡
需求说明使用选项卡组件布局这个新闻选项卡的页面使用fade和in给选项卡面板设置切换的过渡动画使用JavaScript的tab方法来触发选项卡切换运行效果参考代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>搜狐新闻选项卡</title> <meta name="viewport"原创 2020-05-13 12:35:33 · 3168 阅读 · 0 评论 -
基于HTML5的移动Web应用——Bootstrap 样式案例：制作百度登录框
需求说明使用模态框布局登录框的页面结构和样式使用栅格系统布局登录的表单内容通过点击“登录”按钮触发弹出登录框。并且弹出的登录框是小型的运行效果参考代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>百度登录框</title> <meta name="viewport" conte原创 2020-05-13 11:44:53 · 3089 阅读 · 0 评论 -
基于HTML5的移动Web应用——Bootstrap 样式案例：制作响应式导航条
需求说明使用响应式导航条布局页面当浏览器宽度小于768px时，表单里的搜索框和按钮隐藏点击icon图标是用来隐藏的菜单内容出现运行效果参考代码1<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <l...原创 2020-05-07 09:16:27 · 4517 阅读 · 2 评论 -
基于HTML5的移动Web应用——Bootstrap 样式案例：制作页面导航
需求说明使用无序列表布局导航结构使用小图标组件为导航项设置相应图片使用下拉菜单设置导航项的二级菜单运行效果参考代码1<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="styles...原创 2020-05-07 08:46:08 · 2028 阅读 · 0 评论 -
基于HTML5的移动Web应用——Bootstrap 样式案例：制作美联英语在线VIP页面微电影
需求说明使用container、row等栅格系统的知识布局响应式的网页，需要适配中等屏幕、小屏幕、超小屏幕使用.img-responsive设置响应式图片，使之适应不同屏幕的终端使用.img-thumbnail设置图片形状使用rgba的方式设置“学员旅行微电影 - 清迈篇”等文字的背景为颜色运行效果参考代码<!DOCTYPE html><html>...原创 2020-04-27 22:56:18 · 7207 阅读 · 0 评论 -
基于HTML5的移动Web应用——Bootstrap 样式案例：制作全国公安机关互联网管理服务平台登录页面
需求说明使用container、row等栅格系统的知识布局网页结构使用表单元素制作登录页面使用btn-success制作“搜索”按钮，用btn-danger制作“登录”按钮运行效果参考代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> &...原创 2020-04-27 22:48:29 · 6657 阅读 · 3 评论 -
基于HTML5的移动Web应用——移动端页面布局和常用事件
目录流式布局视口1、理解视口2、移动端的3种视口移动端常用事件1、Touch 事件简介2、Touch 事件的应用3、过渡和动画结束事件流式布局在PC端进行网页制作时，经常使用固定像素并且内容居中的网页布局，为了适应小屏幕的设备，在移动设备和跨平台(响应式)网页开发过程中，多数使用流式布局，本节将对流式布局进行详细介绍。流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称...原创 2020-04-16 22:54:08 · 2065 阅读 · 1 评论 -
基于HTML5的移动Web应用——文件操作
过去Web程序不能替代桌面程序的一个重要原因就在于浏览器对于文件操作API的缺失。照片处理中的裁剪、滤镜，二维码的读取与识别，文档的查看和编辑等，这些操作无一不依赖文件的操作，HTML5赋予了浏览器几乎和本地程序同等强大的文件操作能力。File API是HTML5在DOM标准中添加的功能，它允许Web内容在用户授权的情况下选择本地文件并读取内容一通过 File，FileList 和FileRea...原创 2020-04-15 15:14:26 · 548 阅读 · 0 评论 -
基于HTML5的移动Web应用——拖曳
自鼠标被发明以来，拖曳操作在计算机的操作中无处不在。例如，移动文件、图片处理等都需要拖曳。但是如此常见的操作，在Web世界只能通过模拟方式来实现。在HTML5的规范中，可以通过为元素增加draggable= "true"来设置此元素是否可以进行拖曳操作，很大程度上简化了拖曳交互的难度。其中图片、链接默认是开启的。在HTML5的拖曳操作中，首先要明确拖曳元素和目标元素。(1)拖曳元素:即页面中...原创 2020-04-14 23:02:54 · 670 阅读 · 0 评论 -
基于HTML5的移动Web应用——Geolocation地理定位
地理位置一般是用来描述地理事物的空间关系。通常情况下，用经纬度可以准确地描述地理位置。而通常所说的地理定位也是找到该地理位置的经纬度作为坐标来进行定位的。在PC端，通常使用IP来定位该IP用户的位置，移动端定位有多种方式，最准确的是GPS。在Web开发中，Geolocation API (地理位置应用程序接口)提供了准确知道浏览器用户当前位置的功能。本节将对Geolocation地理定位进行详细讲...原创 2020-04-13 20:11:18 · 2223 阅读 · 0 评论 -
基于HTML5的移动Web应用——视频与音频
在HTML5之前，网页中只能处理文字和图像数据，在HTML5中为网页提供了处理视频数据和音频数据的能力，本节针对HTML5提供的音频与视频处理标签进行详细讲解。<video>标签的使用在HTML5中，使用<video>标签来定义视频播放器，它不仅是一个播放视频的标签，其控制栏还实现了包括播放、暂停、进度和音量控制、全屏等功能，更重要的是用户可以自定义这些功能和控制栏的样...原创 2020-04-13 19:59:33 · 1962 阅读 · 0 评论 -
基于HTML5的移动Web应用——HTML5 画布
目录1、初识 canvas1.创建画布2.准备画笔3.坐标和起始点4.绘制线条5.路径6.描边7. 填充2、利用canvas绘制矩形和清除矩形3、利用 canvas绘制圆形4、利用 canvas绘制图片5、利用canvas其他方法1. clip() 方法2. save() 和restore()方法在HTML5之前，网页显示图像是用jpg、png 等嵌入式图像格式。动画通常是由Flash 实现的。...原创 2020-04-09 19:18:12 · 1933 阅读 · 0 评论 -
正则表达式的应用
了解了如何定义一个正则表达式，那么在实际的工作应用中，经常使用正则表达式验证哪些内容呢？针对新用户注册页面，需要验证的内容有用户名、密码、电子邮箱、手机号码、身份证号码、生日、邮政编码、固定电话等，主要是检查输入的内容是否是中文字符、英文字母、数字、下划线等，以及对输入内容的长度验证。例如，用户名是否只有中文字符、英文字母、数字及下划线，手机号码是否由数字组成，身份证号码的长度是否是15位或18位...原创 2020-03-24 15:21:01 · 324 阅读 · 0 评论 -
正则表达式
正则表达式前面学习了如何使用JavaScript验证邮箱、用户名、密码等文本输入内容，下面将介绍另一种表单验证技术——正则表达式。为什么需要正则表达式在开发HTML表单时经常会对用户输入的内容进行验证。例如，前面验证邮箱是否正确，当用户输入的邮箱是“june@.”，如图所示，然后单击"登录"按钮进行Email验证时，检测的结果却认为这是一个正确的邮箱地址。正在上传…重新上传...原创 2020-03-24 15:01:33 · 574 阅读 · 0 评论