标签分类
当前位置:首页 > 程序设计电子书 > Web应用电子书网盘下载
从零开始学HTML5+CSS3 从零开始学HTML5+CSS3
ASR-06

ASR-06 提供上传

资源
41
粉丝
22
喜欢
14
评论
12

    从零开始学HTML5+CSS3 PDF 超清版

    Web应用电子书
    • 发布时间:

    给大家带来的一篇关于Web应用相关的电子书资源,介绍了关于零基础学、HTML5、CSS3、零基础学HTML5方面的内容,本书是由机械工业出版社出版,格式为PDF,资源大小175.4 MB,胡晓霞编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:9.3,更多相关的学习资源可以参阅 程序设计电子书Web前端视频、等栏目。

  • 从零开始学HTML5+CSS3 PDF 下载
  • 下载地址:https://pan.baidu.com/s/1Md8Gffy-6a11IdsOKE7x9A
  • 分享码:h477
  • 从零开始学HTML5+CSS3

    内容精选

    1.字符串

    str.charAt(字符串索引),若索引超过字符串长度,返回空。
    str.indexof(“某字符”),找到这个字符顺序第一次出现的索引。
    str.lastIndexof(“某字符”),找到某字符串倒序最后出现的索引,若没有返回-1。
    str.Uppercase(),将str转换为大写。
    str.Lowercase(),将str转换为小写。
    str.substr(2,3),从索引为2开始,向后取3个字符。
    str.substring(2,5),取索引[2,5)的字符。str.substring(5,2)和前者结果一样。
    str.slice(2,5),取索引[2,5)的字符。str.slice(5,2)返回空,不能这么写。
    str=”welcome”,str.split(“e”),以e分割它,得到[“w”,”locm”,”“]。

    2.date

    var d=new Date();
    var year=d.getFullYear();//年
    var month=d.getMonth();//月
    var date=d.getDate();//日
    var hour=d.getHours();//时
    var minute=d.getMinutes();//分
    var second=d.getSeconds();//秒
    var milliseconds=d.getMilliseconds();//毫秒
    可以得到当前的时间。
    月份要加1,如果你想得到3月,那么输入的是2。
    日期具有自动更正的效果。如果你想知道2012年2月多少天,那么var d=new Date(2012,2,0)。

    3.css3新增
    01 :root{
    font-size:62.5%;
    }设置整个页面的文字大小为16px默认*62.5%=10px。

    02 rem,直接设置文字和根元素大小相比,em是和它的父级相比。

    03 新增选择器:
    :first-child,父元素第一个子元素。
    :last-child,父元素最后一个子元素。
    :nth-child(3),父元素的第3个子元素。
    :nth-last-child(3),父元素的倒数第3个子元素。
    :nth-child(3n+1),父元素的第1,4,7…个子元素。
    :nth-child(even/add),父元素的偶/奇数个子元素。
    以上的前提是父元素后面全是这一种子元素,若还有其他类型不同的元素,还要选到它们则要使用type。用法和child原理一样。

    04 伪类
    input{
    outline: none;/* 将浏览器默认的轮廓样式清除 */
    }
    input:focus{
    border:1px solid red;
    }
    input获取焦点时改变input边框样式,input此时type为text。
    input:enabled{
    border:1px solid blue;
    }
    input处于可用状态时改变input边框样式,input此时type为text。
    input:disabled{
    border:1px dashed pink;
    }
    input处于不可用时改变input边框样式,input此时type为text。
    input:checked{
    margin-right: 20px;
    }
    input处于选中状态时改变input边框样式,input此时type为checkbox。

    body ::selection{
    font-size:3rem;
    color:red;
    text-decoration: line-through;
    font-weight: bold;
    };选中状态,就是ctrl+a那种选中样子。

    input:read-only{
    font-size:3rem;
    color:#ff7300;
    }
    input处于只读时改变input边框样式,input此时type为text。
    readonly和disabled区别
    表单元素被提交的两个条件:
    1.元素必须是enabled
    2.元素必须有name属性
    就是disabled不能被提交。

    内容介绍

    《从零开始学HTML5+CSS3》循序渐进地介绍了使用HTML5与CSS3创建Web应用的专业知识,共23章。第1章到第14章主要介绍了HTML5的相关基础知识,包括学习前的准备,HTML5元素、属性和格式化的应用,HTML5视频和音频的应用和控制,使用Canvas和SVG绘制图形,表单与文件API操作,拖放与桌面通知API操作,本地存储与离线应用,多线程与WebSockets编程的技术。第15章到第22章主要介绍了CSS3的特性与用法,包括CSS基础知识,CSS选择器,使用CSS插入内容,设置文本样式、图片样式、背景样式、表单样式、超链接样式和鼠标样式,以及CSS3中滤镜的使用方法等。最后一章通过两个项目案例,对本书所讲内容进行回顾和总结,以提高读者的实战技能。

    目录

    • 第1章 HTML 5 CSS 3学习准备
    • 第2章 HTML元素、属性与结构
    • 第3章 HTML 5音频和视频
    • 第4章 HTML 5 Canvas
    • 第5章 HTML 5 SVG
    • 第6章 Form API
    • 第7章 File API
    • 第8章 拖放API与桌面通知API
    • 第9章 本地存储与离线应用
    • 第10章 Communication API
    • 第11章 Web Workers API与 Web SQL API
    • 第12章 WebSocket API
    • 第13章 地理位置API
    • 第14章 History API
    • 第15章 CSS基础知识
    • 第16章 CSS 3选择器
    • 第17章 使用CSS选择器插入内容
    • 第18章 使用CSS设置文本样式
    • 第19章 使用CSS设置图片与背景样式
    • 第20章 使用CSS设置列表与表单样式
    • 第21章 对超链接和鼠标应用样式
    • 第22章 CSS中的滤镜
    • 第23章 项目实战案例

    上一篇:编译与反编译技术实战  下一篇:Cocos2d-x手机游戏开发与项目实战详解

    展开 +

    收起 -

    Web应用相关电子书
    学习笔记
    网友NO.646322

    js 获取html5的data属性实现方法

    我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 !DOCTYPE htmlhtmlhead titledataset/title meta charset="utf-8"/headbody div id='div' data-index='demo' /div/bodyscript type="text/javascript"var a = document.getElementById('div');console.log(a)console.log(a.dataset.index)//demo/script/html 直接用dataset就可以获取到DOM元素的data属性 好吧,还可以 用js的获取属性的方法getAttribute() a.getAttribute('data-index')=="demo" 以上这篇js 获取html5的data属性实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

    网友NO.437939

    vue-router的HTML5 History 模式设置

    VUE是当下最火爆的前端框架之一,vue-router是vue项目中几乎都会用到的组件,然而体验一时爽,其实坑不少。本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题,并给出解决方案。 vue-router的HTML5 History 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: 'history', routes: [...]}) 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id, 就是长这样的! 不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就尴尬了。 所以,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。 目前后端服务器有Apache、nginx、原生 Node.js、基于 Node.js 的 Express、Internet Information Services (IIS)、Caddy、Firebase 主机等。 先给一个官方标准版配置的传送门,请戳这里→ https://router.vuejs.org/zh/guide/essentials/history-mode.html 既然是官方给出的配置,那肯定就会说的很官方咯~ 按照官方给出的示例,将道理是成功的,但是官方给出的只局限于这个项目在服务器的根目录……

    网友NO.946166

    原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果

    本文实例讲述了原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果。分享给大家供大家参考,具体如下: !DOCTYPE htmlhtml lang="en"headmeta charset=gbktitlewww.jb51.net 粒子效果演示/titlemeta name="description" content="HTML5/canvas demo, 500 particles to play around with." /meta name="keywords" content="html5,canvas,javascript,particles,interactive,velocity,programming,flash" /style type="text/css"html, body {text-align: center;margin:0;padding:0;background: #000000;color: #666666;line-height: 1.25em;}#outer {position: absolute;top: 50%;left: 50%;width: 1px;height: 1px;overflow: visible;}#canvasContainer {position: absolute;width: 1000px;height: 560px;top: -280px;left: -500px;}canvas {border: 1px solid #333333;}a {color: #00CBCB;text-decoration:none;font-weight:bold;}a:hover {color:#FFFFFF;}#output {font-family: Arial, Helvetica, sans-serif;font-size: 0.75em;margin-top:4px;}#footer{font-size: 0.6em;font-family: Arial, Helvetica, sans-serif;position: absolute;bottombottom:8px;width:98%;}/style/headbodydiv id="outer"div id="canvasContainer"canvas id="mainCanvas" width="1000" height="560"/canvasdiv id="output"/div/div/divscript type="text/javascript"//javascript部分(function(){var PI_2 = Math.PI * 2;var canvasW = 1000;var canvasH = 560;var numMovers = 600;var friction = 0.96;var movers = [];var canvas;var ctx;var canvasDiv;var outerDiv;var mouseX;var mouseY;var mouseVX;var mouseVY;var prevMouseX;var prevMouseY;var isMouseDown;function i……

    网友NO.306900

    Vue开发Html5微信公众号的步骤

    一、调起微信支付 在微信浏览器里面打开H5网页中执行JS调起支付,WeixinJSBridge内置对象在其他浏览器中无效。 具体参考官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7 } else if (document.attachEvent) { document.attachEvent( "WeixinJSBridgeReady", this.onBridgeReady ); document.attachEvent( "onWeixinJSBridgeReady", this.onBridgeReady ); } } else { this.onBridgeReady(); }}methods:{ // 调起微信支付 onBridgeReady() { const pay_params = this.payInfo; //创建支付返回的签名信息 WeixinJSBridge.invoke( "getBrandWCPayRequest", { appId: pay_params.appId, //公众号名称,由商户传入 timeStamp: pay_params.timeStamp, //时间戳,自1970年以来的秒数 nonceStr: pay_params.nonceStr, //随机串 package: pay_params.package, signType: pay_params.signType, //微信签名方式: paySign: pay_params.paySign //微信签名 }, res = { if (res.err_msg == "get_brand_wcpay_request:ok") { // 校验支付 alert('支付成功'); //do something... }else if(res.err_msg == "get_brand_wcpay_request:cancel"||res.err_msg == "get_brand_wcpay_request:fail"){ alert('支付失败'); } } ); },} 二、实现Web签名+截图网页+上传截图 web签名使用 jsignature 实现,由于jsignature 基于Jquery实现,需要引入Jquery。 签名完成后,使用 html2canvas 实现网页全屏截图。 截图成功后,由于Canvas的 toDataURL方法会根据签名的复杂程度返回不同长短的Base64,过长的Ba……

    Copyright 2018-2019 xz577.com 码农之家

    版权责任说明