《从0到1:HTML+CSS快速上手》PPT,视频课,源码

  • 更新时间:
  • 4822人关注
  • 点击下载

给大家带来的是《从0到1:HTML+CSS快速上手》PPT,视频课,源码,介绍了关于HTML、CSS、web前端方面的内容,本书是由人民邮电出版社出版,已被270人关注,由热心网友徐艳蓉 提供,目前本书在web前端类综合评分为:8.8分

编辑推荐

源自阅读量破6000万的人气教程 
适合零基础初学者,1小时快速上手,3天轻松入门 
通俗易懂,风趣幽默,原来前端还能这么好玩儿 
每一节都配有微视频,每一章都配有大量练习 
同步视频+配套练习+课件PPT+源码素材+作者答疑 

如果你需要的不是大而全,而是恰到好处的前端开发教程,那么不妨试着看一下这本书。本书源于作者在绿叶学习网分享的超人气在线教程。由于教程的风格****、质量很高,因而累积获得超过十万读者的支持。为了更好地帮助零基础的小伙伴快速上手,每章后面都有习题,每一节都录制了配套的高质量视频,小伙伴们可直接扫码观看。本书的配套资源包括:习题答案、源码文件、配套PPT教学课件,以及各种工具手册。

内容简介

作者根据自己多年的网站开发及教学经验,站在零基础读者的角度,详细介绍了HTML和CSS的基础知识,以及大量的前端开发技巧。
全书分为2大部分:第1部分是HTML基础,主要介绍各种标签的使用;第二部分是CSS基础,主要介绍样式布局操作。此外,作者还结合实际工作及前端面试,精心挑选了大量高质量的练习题放在每章最后,读者可以边学边练,更好地掌握本书内容。
本书提供了所有案例的源代码、配套视频课程,以及各种工具手册。另外,为方便老师教学,还提供了配套的PPT教学课件。
本书适合零基础的初学者使用,可以作为前端开发人员的参考书,也可作为培训学校、大中专院校相关专业的教学参考书。

作者简介

莫振杰,毕业于暨南大学信科院计算机科学与技术专业,从事前后端开发4年多,开发过绿叶学习网、广州智能工程研究会网站、大量在线应用工具及其他各种类型网站,著有多本编程书且销量过万, 现为绿叶学习网的站长,该网站用于分享其在前后端开发中的一些经验,其制作的前后端开发在线教程在互联网引起广泛关注,每一个教程都广受网友称赞与推崇,今年还开发了系列前端线上付费课程。

目录

  • 第 一部分 HTML 基础 n
  • 第 1 章 HTML 简介 3 n
  • 1.1 前端技术简介 3 n
  • 1.1.1 从“网页制作”到“前端开发” 3 n
  • 1.1.2 从“前端开发”到“后端开发” 4 n
  • 1.1.3 学习路线 6 n
  • 1.2 什么是HTML ? 6 n
  • 1.3 常见问题 7 n
  • 第 2 章 开发工具 9 n
  • 2.1 开发工具 9 n
  • 2.2 使用HBuilder 10 n
  • 第3 章 基本标签 13 n
  • 3.1 HTML 结构 13 n
  • 3.2 head 标签 15 n
  • 3.2.1 title 标签 15 n
  • 3.2.2 meta 标签 16 n
  • 3.2.3 style 标签 18 n
  • 3.2.4 script 标签 18 n
  • 3.2.5 link 标签 19 n
  • 3.2.6 base 标签 19 n
  • 3.3 body 标签 19 n
  • 3.4 HTML 注释 20 n
  • 3.5 本章练习 21 n
  • 第4 章 文本 22 n
  • 4.1 文本简介 22 n
  • 4.1.1 页面组成元素 22 n
  • 4.1.2 HTML 文本 23 n
  • 4.2 标题标签 24 n
  • 4.3 段落标签 26 n
  • 4.3.1 段落标签
  •  26 n
  • 4.3.2 换行标签 n
  •  27 n
  • 4.4 文本标签 29 n
  • 4.4.1 粗体标签 29 n
  • 4.4.2 斜体标签 30 n
  • 4.4.3 上标标签 31 n
  • 4.4.4 下标标签 31 n
  • 4.4.5 中划线标签 32 n
  • 4.4.6 下划线标签 33 n
  • 4.4.7 大字号标签和小字号标签 33 n
  • 4.5 水平线标签 34 n
  • 4.6 div 标签 35 n
  • 4.7 自闭合标签 37 n
  • 4.8 块元素和行内元素 38 n
  • 4.8.1 块元素 38 n
  • 4.8.2 行内元素 40 n
  • 4.9 特殊符号 40 n
  • 4.9.1 网页中的“空格” 40 n
  • 4.9.2 网页中的“特殊符号” 42 n
  • 4.10 本章练习 44 n
  • 第5 章 列表 45 n
  • 5.1 列表简介 45 n
  • 5.2 有序列表 46 n
  • 5.2.1 有序列表简介 46 n
  • 5.2.2 type 属性 47 n
  • 5.3 无序列表 48 n
  • 5.3.1 无序列表简介 48 n
  • 5.3.2 type 属性 49 n
  • 5.3.3 深入无序列表 50 n
  • 5.4 定义列表 53 n
  • 5.5 HTML 语义化 54 n
  • 5.6 本章练习 56 n
  • 第6 章 表格 57 n
  • 6.1 表格简介 57 n
  • 6.2 基本结构 57 n
  • 6.3 完整结构 59 n
  • 6.3.1 表格标题:caption 59 n
  • 6.3.2 表头单元格:th 60 n
  • 6.4 语义化 62 n
  • 6.5 合并行:rowspan 65 n
  • 6.6 合并列:colspan 66 n
  • 6.7 本章练习 67 n
  • 第7 章 图片 68 n
  • 7.1 图片标签 68 n
  • 7.1.1 src 属性 68 n
  • 7.1.2 alt 属性和title 属性 69 n
  • 7.2 图片路径 71 n
  • 7.2.1 page1.html 引用图片 72 n
  • 7.2.2 page2.html 引用图片 73 n
  • 7.3 图片格式 75 n
  • 7.3.1 位图 75 n
  • 7.3.2 矢量图 76 n
  • 7.4 本章练习 78 n
  • 第8 章 超链接 80 n
  • 8.1 超链接简介 80 n
  • 8.1.1 a 标签 80 n
  • 8.1.2 target 属性 82 n
  • 8.2 内部链接 83 n
  • 8.3 锚点链接 84 n
  • 8.4 本章练习 87 n
  • 第9 章 表单 88 n
  • 9.1 表单简介 88 n
  • 9.1.1 表单是什么? 88 n
  • 9.1.2 表单标签 89 n
  • 9.2 form 标签 90 n
  • 9.2.1 form 标签简介 90 n
  • 9.2.2 form 标签属性 91 n
  • 9.3 input 标签 92 n
  • 9.4 单行文本框 93 n
  • 9.4.1 单行文本框简介 93 n
  • 9.4.2 单行文本框属性 93 n
  • 9.5 密码文本框 95 n
  • 9.5.1 密码文本框简介 95 n
  • 9.5.2 密码文本框属性 97 n
  • 9.6 单选框 98 n
  • 9.6.1 单选框简介 98 n
  • 9.6.2 忽略点 99 n
  • 9.7 复选框 102 n
  • 9.8 按钮 104 n
  • 9.8.1 普通按钮button 104 n
  • 9.8.2 提交按钮submit 105 n
  • 9.8.3 重置按钮reset 106 n
  • 9.8.4 butto标签 108 n
  • 9.9 文件上传 108 n
  • 9.10 多行文本框 109 n
  • 9.11 下拉列表 110 n
  • 9.11.1 下拉列表简介 110 n
  • 9.11.2 select 标签属性 111 n
  • 9.11.3 optio标签属性 113 n
  • 9.13 本章练习 115 n
  • 第 10 章 框架 117 n
  • 10.1 iframe 标签 117 n
  • 10.2 练习题 118 n
  • 第二部分 CSS 基础 n
  • 第 11 章 CSS 简介 121 n
  • 11.1 CSS 简介 121 n
  • 11.1.1 CSS 是什么 121 n
  • 11.1.2 CSS 和CSS3 121 n
  • 11.2 CSS 引入方式 122 n
  • 11.3.1 外部样式表 122 n
  • 11.3.2 内部样式表 123 n
  • 11.3.3 行内样式表 124 n
  • 11.3 本章练习 125 n
  • 第 12 章 CSS 选择器 126 n
  • 12.1 元素的id 和class 126 n
  • 12.1.1 id 属性 126 n
  • 12.1.2 class 属性 127 n
  • 12.2 选择器是什么? 127 n
  • 12.3 CSS 选择器 129 n
  • 12.3.1 元素选择器 129 n
  • 12.3.2 id 选择器 130 n
  • 12.3.3 class 选择器 132 n
  • 12.3.4 后代选择器 134 n
  • 12.3.5 群组选择器 135 n
  • 12.4 本章练习 138 n
  • 第 13 章 字体样式 139 n
  • 13.1 字体样式简介 139 n
  • 13.2 字体类型:font-family 140 n
  • 13.3 字体大小:font-size 141 n
  • 13.3.1 px 是什么? 142 n
  • 13.3.2 采用px 为单位 142 n
  • 13.4 字体粗细:font-weight 143 n
  • 13.5 字体风格:font-style 145 n
  • 13.6 字体颜色:color 146 n
  • 13.6.1 关键字 146 n
  • 13.6.2 16 进制RGB 值 147 n
  • 13.7 CSS 注释 148 n
  • 13.8 本章练习 150 n
  • 第 14 章 文本样式 152 n
  • 14.1 文本样式简介 152 n
  • 14.2 首行缩进:text-indent 152 n
  • 14.3 水平对齐:text-align 154 n
  • 14.4 文本修饰:text-decoration 155 n
  • 14.4.1 text-decoratio属性 155 n
  • 14.4.2 3 种划线的用途分析 157 n
  • 14.5 大小写:text-transform 157 n
  • 14.6 行高:line-height 158 n
  • 14.7 间距:letter-spacing、word-spacing 160 n
  • 14.7.1 字间距 160 n
  • 14.7.2 词间距 161 n
  • 14.8 本章练习 162 n
  • 第 15 章 边框样式 163 n
  • 15.1 边框样式简介 163 n
  • 15.2 整体样式 164 n
  • 15.2.1 边框的属性 164 n
  • 15.2.2 简写形式 166 n
  • 15.3 局部样式 167 n
  • 15.4 本章练习 170 n
  • 第 16 章 列表样式 171 n
  • 16.1 列表项符号:list-style-type 171 n
  • 16.1.1 定义列表项符号 171 n
  • 16.1.2 去除列表项符号 173 n
  • 16.2 列表项图片:list-style-image 174 n
  • 16.3 本章练习 176 n
  • 第 17 章 表格样式 177 n
  • 17.1 表格标题位置:caption-side 177 n
  • 17.2 表格边框合并:border-collapse 179 n
  • 17.3 表格边框间距:border-spacing 180 n
  • 17.4 本章练习 182 n
  • 第 18 章 图片样式 183 n
  • 18.1 图片大小 183 n
  • 18.2 图片边框 184 n
  • 18.3 图片对齐 185 n
  • 18.3.1 水平对齐 185 n
  • 18.3.2 垂直对齐 187 n
  • 18.4 文字环绕:float 189 n
  • 18.5 本章练习 191 n
  • 第 19 章 背景样式 192 n
  • 19.1 背景样式简介 192 n
  • 19.2 背景颜色:background-color 192 n
  • 19.3 背景图片样式:background-image 194 n
  • 19.4 背景图片重复:background-repeat 196 n
  • 19.5 背景图片位置:background-position 198 n
  • 19.5.1 像素值 198 n
  • 19.5.2 关键字 199 n
  • 19.6 背景图片固定:background-attachment 201 n
  • 19.7 本章练习 202 n
  • 第 20 章 超链接样式 203 n
  • 20.1 超链接伪类 203 n
  • 20.1.1 超链接伪类简介 203 n
  • 20.1.2 深入了解超链接伪类 205 n
  • 20.2 深入了解:hover 206 n
  • 20.3 鼠标样式 208 n
  • 20.3.1 浏览器鼠标样式 208 n
  • 20.3.2 自定义鼠标样式 209 n
  • 20.4 本章练习 210 n
  • 第 21 章 盒子模型 212 n
  • 21.1 CSS 盒子模型 212 n
  • 21.2 宽高:width、height 215 n
  • 21.3 边框:border 218 n
  • 21.4 内边距:padding 219 n
  • 21.4.1 padding 局部样式 219 n
  • 21.4.2 padding 简写形式 220 n
  • 21.5 外边距:margin 222 n
  • 21.5.1 margi局部样式 222 n
  • 21.5.2 margi简写形式 226 n
  • 21.5.3 浏览器审查元素 227 n
  • 21.7 本章练习 228 n
  • 第 22 章 浮动布局 230 n
  • 22.1 文档流简介 230 n
  • 22.1.1 正常文档流 230 n
  • 22.1.2 脱离文档流 231 n
  • 22.2 浮动 233 n
  • 22.3 清除浮动 236 n
  • 22.4 本章练习 238 n
  • 第 23 章 定位布局 240 n
  • 23.1 定位布局简介 240 n
  • 23.2 固定定位:fixed 240 n
  • 23.3 相对定位:relative 243 n
  • 23.4 绝对定位:absolute 245 n
  • 23.5 静态定位:static 247 n
  • 23.6 本章练习 248 n
  • 附录A HTML 常用标签 249 n
  • 附录B 常用表单标签 251 n
  • 附录C CSS 常用属性 252 n
  • 附录D W3C 十六色 254
展开阅读
精选笔记1:jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

2小时11分钟前回答

弹出层用来向用户展示详细的信息,交互性非常强。弹出层有对话框、模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的。一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层。

jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

效果展示        源码下载

我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式、甚至js方法调用。我们最终做出来的弹出层效果应该是响应式的,也就是说可以在桌面PC端和移动端都可以很好展示的弹出层,并且是兼容现代浏览器的。在demo中,我使用了Bootstrap样式,当然你也可以自己写个样式来完成页面布局。

一个基本的弹出层应该满足以下需求:

1、点击按钮/链接触发弹出层,弹出层应该有半透明的遮罩层;

2、点击弹出层的关闭按钮、取消按钮或者遮罩层会关闭隐藏弹出层;

3、使用Esc键也可以关闭弹出层;

4、它是响应式的,并且兼容现代主流浏览器。

HTML

首先我们在页面放置一个用来触发弹出层的链接,也可以是个按钮button,注意的是我们给它设置一个data-show-layer属性,这个属性值对应的就是弹出层的id,也就是说通过data-show-layer来关联弹出层。

<a class="btn btn-info btn-lg show-layer" data-show-layer="hw-layer" role="button">点击弹出层</a> 

很显然,上面的链接关联的弹出层的id是hw-layer。那好,选择我们来准备弹出层hw-layer的html代码。

<div class="hw-overlay" id="hw-layer"> 
<div class="hw-layer-wrap"> 
<span class="glyphicon glyphicon-remove hwLayer-close"></span> 
<div class="row"> 
<div class="col-md-3 col-sm-12 hw-icon"> 
<i class="glyphicon glyphicon-info-sign"></i> 
</div> 
<div class="col-md-9 col-sm-12"> 
<h4>你确定吗?</h4> 
<p>这是HTML+CSS+Javascript实现的一个弹出层效果,它是响应式的,它可以在所有现代浏览器上工作(包括PC和移动端)。</p> 
<button class="btn btn-success hwLayer-ok">确 定</button> 
<button class="btn btn-warning hwLayer-cancel">取 消</button> 
</div> 
</div> 
</div> 
</div> 

我们弹出层的最外层,也就是遮罩层.hw-overlay,我们会使用CSS控制它是一个半透明的层,用来隔开弹出层和页面主体内容。r然后在.hw-layer-wrap主体层内,我们可以设置弹出层的内容,当然内容由你来定,我们本文结合实例弹出层的内容是一个确认对话框,类似window的confirm()。内容使用了bootstrap的col-*栅格布局,还用了glyphicon字体图标。其实最关键的就是需要遮罩层和主体层,内容可以根据项目需求自定义,因为它可能是个表单、也可能是个纯文字说明的内容。

CSS

CSS也是关键的部分,我们先设置遮罩层,它默认情况下应该是不可见的,位置上fixed固定的,并且是覆盖整个页面的,它还是半透明的,我们这里设置了背景黑色、透明度0.3,如background-color: rgba(0,0,0,0.3)。然后主体层.hw-layer-wrap,我们设置它的宽度,计算它的位置。宽度我们可以预设一个值,高度由于内容多少不确定,这里我们不用设置一个具体的值,在后面的js部分会对高度处理,然后设置居中以及边框阴影等效果。有关水平和垂直居中的设置可以参阅Helloweba文章:如何让DIV水平和垂直居中。弹出层里面的内容样式可以自由设置,最后就是使用media query来设置小屏幕下的弹出层居中的问题。

.hw-overlay{display:none; position: fixed; top:0;left:0;width:100%;height:100%; background-color: rgba(0,0,0,0.3);z-index:10;} 
.hw-layer-wrap{box-sizing:border-box; width:570px; position:absolute;left:50%;top:50%; margin-left:-285px; border-radius:3px; background-color:#fff; box-shadow:1px 2px 4px 0 rgba(0,0,0,0.12); padding:45px 50px;} 
.hwLayer-close{position:absolute; right:20px; top:20px; width:20px; height:20px; cursor:pointer; font-size:20px; color:#ccc;} 
.hw-layer-wrap .hw-icon{color:#b4d8f3;font-size:86px;text-align:center;} 
.hw-layer-wrap h4{margin:5px 0 30px; font-size:24px; color:#383c3e;} 
.hw-layer-wrap p{margin:30px 0; line-height:22px; color:#595d60; text-align:left;} 
@media (max-width:768px){ 
.hw-layer-wrap{width:350px; margin-left:-175px; margin-top:-200px; padding:45px 50px; text-align:center;} 
} 
@media (max-width:400px){ 
.hw-layer-wrap{width:250px; margin-left:-125px;padding:25px 30px;} 
} 

Javascript

我们使用jQuery来处理触发弹出层和关闭弹出层效果,应此需要预先加载jQuery库。showLayer(id)是一个自定义的函数,用来展示弹出层。当点击按钮或链接调用这个showLayer(id)函数,它会渐现的效果展示,并且计算弹出层的高度位移距离,使得弹出主体层水平和垂直方向的居中。而函数hideLayer()就是隐藏弹出层,fadeOut()或者hide()就能实现。最后再加上触发遮罩层的时候关闭弹出层以及使用Esc按钮的时候关闭弹出层的代码。

$(function(){ 
//展示层 
function showLayer(id){ 
var layer = $('#'+id), 
layerwrap = layer.find('.hw-layer-wrap'); 
layer.fadeIn(); 
//屏幕居中 
layerwrap.css({ 
'margin-top': -layerwrap.outerHeight()/2 
}); 
} 
//隐藏层 
function hideLayer(){ 
$('.hw-overlay').fadeOut(); 
} 
$('.hwLayer-ok,.hwLayer-cancel,.hwLayer-close').on('click', function() { 
hideLayer(); 
}); 
//触发弹出层 
$('.show-layer').on('click', function() { 
var layerid = $(this).data('show-layer'); 
showLayer(layerid); 
}); 
//点击或者触控弹出层外的半透明遮罩层,关闭弹出层 
$('.hw-overlay').on('click', function(event) { 
if (event.target == this){ 
hideLayer(); 
} 
}); 
//按ESC键关闭弹出层 
$(document).keyup(function(event) { 
if (event.keyCode == 27) { 
hideLayer(); 
} 
}); 
}); 

其实到这里,一个基本的弹出层效果已经做好了。我们这里只是做一个基本的弹出层,你也可以进行继续扩展代码。我们看过很多弹出层插件,很多都是动态直接操作DOM的,也就是通过js代码先createElement,然后在将内容append到body里的,这种方式如果是频繁操作DOM的话会消耗一定的性能,所以从性能角度考虑的话,我推荐使用本文提供的弹出层方式。

好了,接下来我们将弹出层的代码封装成一个简单的jQuery插件,以插件的形式来调用,满足各种不同弹出层效果的需求,敬请关注。

展开阅读
精选笔记2:javascript+html5+css3自定义提示窗口

22小时17分钟前回答

javascript自定义提示窗口效果图:

javascript+html5+css3自定义提示窗口

源码:

1.demo.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>自定义提示窗口</title>
  <script type="text/javascript" src="js/myAlert.js"></script>
  <script type="text/javascript">
    function bodyOnload() {
      var myInput = document.getElementById("myInput");
      myInput.style.border = "none";
      myInput.style.backgroundColor = "rgba(223, 230, 223, 0.3)";
      myInput.value = "请输入你的名字:";
      myInput.onfocus = function () {
        myInput.style.outline = "none";
        myInput.value = "";
      };
      var image_div = document.createElement("div");
      image_div.style.width = myInput.offsetHeight ;
      image_div.style.height = myInput.offsetHeight;
      image_div.style.float = "right";
      image_div.style.cursor = "pointer";
      image_div.onclick = function () {
       new MyAlert().alert("系统提示","click the image_div",5000);
      };
      var outer_div = document.createElement("div");
      outer_div.style.border = "1px solid red";
      outer_div.style.width = parseInt(myInput.offsetWidth) + parseInt(image_div.style.width);
      outer_div.style.height = myInput.offsetHeight;
      document.body.appendChild(outer_div);
      outer_div.appendChild(myInput);
      outer_div.appendChild(image_div);
    }
  </script>
</head>
<body onload="bodyOnload()">
   <input id="myInput" type="text" name="name" title="名字"/>
</body>
</html>

2.myAlert.js

/**
 * Created by zhuwenqi on 2017/6/20.
 */
/**
 * @param options 基本配置
 * @constructor 
 */
function MyAlert(options) {
  this.options = options ;
}
/**
 * 提示窗口
 * @param title 提示标题,默认为""
 * @param content 提示内容,默认为""
 * @param closeTime 提示窗口自动关闭时间,单位为ms,默认为2000ms
 */
MyAlert.prototype.alert = function (title,content,closeTime) {
  var div_background = document.createElement("div");
  div_background.style.position = "absolute";
  div_background.style.left = "0";
  div_background.style.top = "0";
  div_background.style.width = "100%";
  div_background.style.height = "100%";
  div_background.style.backgroundColor = "rgba(0,0,0,0.1)";
  div_background.style.zIndex = "1001";
  var div_alert = document.createElement("div");
  div_alert.style.position = "absolute";
  div_alert.style.left = "40%";
  div_alert.style.top = "0";
  div_alert.style.width = "20%";
  div_alert.style.height = "20%";
  div_alert.style.overflow = "auto";
  div_alert.style.backgroundColor = "rgba(255,255,255,0.5)";
  div_alert.style.zIndex = "1002";
  div_alert.style.border = "1px solid blue";
  div_alert.style.borderRadius = "10px";
  div_alert.style.boxShadow = "0 0 10px gray";
  var div_title = document.createElement("div");
  div_title.style.backgroundColor = "rgba(0,255,0,0.3)";
  div_title.style.textAlign = "center";
  var span_title = document.createElement("span");
  span_title.style.fontSize = "20px";
  span_title.style.fontWeight = "bold";
  var text_title = document.createTextNode((title === undefined || title === null) ? "" : title) ;
  span_title.appendChild(text_title);
  div_title.appendChild(span_title);
  div_alert.appendChild(div_title);
  var div_content = document.createElement("div");
  div_content.style.lineHeight = "35px";
  div_content.style.paddingLeft = "10px";
  var span_content = document.createElement("span");
  var text_content = document.createTextNode((content === undefined || content === null) ? "" : content);
  span_content.appendChild(text_content);
  div_content.appendChild(span_content);
  div_alert.appendChild(div_content);
  document.body.appendChild(div_background);
  document.body.appendChild(div_alert);
  setTimeout(function () {
    document.body.removeChild(div_alert);
    document.body.removeChild(div_background);
  },(closeTime === undefined || closeTime === null || closeTime === "") ? 2000 : closeTime);
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

展开阅读

web前端相关资源

  • 移动网页设计与开发:HTML5+CSS3+JavaScript

    移动网页设计与开发:HTML5+CSS3+JavaScript

    将落伍的网址打导致更为灵便、友善,而且令其充分运用不一样机器设备和电脑浏览器的与众不同优点。根据《移动网页设计与开发HTML5+CSS3+JavaScript》,您将为投身第一线开发充分准备! *內容

    大小:30.2 MB移动开发

    立即下载
  • HTML5+CSS3+JavaScript 前端开发基础

    HTML5+CSS3+JavaScript 前端开发基础

    大小:510 MB前端开发

    立即下载
  • HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通 第3版 共分为19章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特

    大小:65.2 MB网页制作

    立即下载
  • HTML+CSS+DIV网页设计与布局

    HTML+CSS+DIV网页设计与布局

    本书主要内容包括认识网站开发、网页文字和图片、超链接、表格、多媒体、滚动字幕、列表、表单、框架、设置文本样式、设置网页背景样式、设置边框和边距样式、设置表格和列表样式、控

    大小:28.7 MB前端设计

    立即下载
  • 疯狂HTML5+CSS3+JavaScript讲义

    疯狂HTML5+CSS3+JavaScript讲义

    大小:132.1 MB前端

    立即下载
  • 零基础学HTML+CSS

    零基础学HTML+CSS

    零基础学编程:零基础学HTML+CSS(第3版) 站在零基础学习的角度,以通俗易懂的语言,结合丰富多彩的实例,来帮助初学者学习和掌握HTML语言和CSS样式设计。本书列举了大量的小型实例、综合

    大小:65.5 MB前端

    立即下载
  • 从零开始学HTML5+CSS3

    从零开始学HTML5+CSS3

    本书循序渐进介绍使用HTML5与CSS3创建Web应用的专业知识,包含CSS基础知识,CSS选择器,使用CSS插入内容,HTML5视频和音频的应用和控制,使用Canvas和SVG绘制图形等内容

    大小:175.4 MBWeb应用

    立即下载

学习笔记

21小时59分钟前回答

javascript+html5+css3自定义弹出窗口效果

本文实例为大家分享了js自定义弹出窗口效果展示的具体代码,供大家参考,具体内容如下 效果图: 源码: 1.demo.jsp %@ page contentType="text/html;charset=UTF-8" language="java" %htmlhead title自定义弹出窗口/title script type="text/javascript" src="js/myLayer.js"/script style type="text/css" button{ width: 50px; height: 50px; border: 1px solid blue; background-color: blue; color: red; border-radius: 5px; -webkit-box-shadow: 2px 2px 2px gray; -moz-box-shadow: 2px 2px 2px gray ; box-shadow: 2px 2px 2px gray ; } button:hover{ background-color: green; cursor: pointer; } /style script type="text/javascript" function openWindow() { new MyLayer({ top:"10%", left:"10%", width:"80%", height:"80%", title:"我的标题", content:"操作成功" }).openLayer……

13小时50分钟前回答

CSS3,HTML5和jQuery搜索框集锦

添加搜素框或网站搜索功能是为了方便用户能够轻松、快捷地找到自己需要的信息。因此,在网站中添加一个搜索框已经成为网页设计的主流元素之一。添加一个搜索框到网站会使得用户界面更加友好,也能帮助用户轻松愉快地浏览。 脉动的CSS3输入搜索框 输入搜索框带有边框和类似脉冲的阴影跳动。 纯CSS的建议搜索框 这是一个使用纯CSS构建扩展建议搜索框的简单教程。 CSS的扩大搜索框 扩大搜索框是一个点击或输入东西时会变宽的一个简单搜索框。 使用CSS转换扩大搜索栏 我们将利用CSS转换扩展了的搜索栏。搜索栏最初在视图中隐藏的,当点击搜索标签时它能顺利地扩展到视图。 在CSS客户端全文检……

22小时44分钟前回答

html、css和jquery相结合实现简单的进度条效果实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: !DOCTYPE htmlhtml xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8"/titlejquery实现进度条/titlestyle type="text/css"body{ padding:30px; margin-left:450px; margin-top:200px; width:350px; border: 1px solid #98AFB7;}.progressBar{ width:280px; height:20px; border: 1px solid #98AFB7; border-radius:8px; background:#e1dfdf;}input{ margin-bottom:15px;}span{ position:relative; top:-20px; left:290px;}#bar { width: 0px; height: 20px; border-radius: 7px; background: #5EC4EA;}/style//引入Jquery文件script src="Jquerys/jquery.js"/scriptscript type="text/javascript"function progressBar() { $("#bar").css("width", "0px"); var speed =20;//进度条的速度 bar = set……