《21天学通HTML&CSS3》相关(ppt+源码)

【实例简介】21天学通HTML&CSS3

【实例截图】

【核心代码】

C:.
├─源代码
│  ├─C1
│  │      1-1  静态页面.html
│  │      1-2  编写一个简单页面.html
│  │
│  ├─C10
│  │      10-1  在页面中构建Canvas元素.html
│  │      10-10  绘制二次样条曲线.html
│  │      10-11  绘制贝塞尔曲线.html
│  │      10-12  使用三种方法插入图像.html
│  │      10-13  使用裁剪区域绘图.html
│  │      10-14  取消裁剪区域.html
│  │      10-15  绘制线性渐变的矩形.html
│  │      10-16  绘制径向渐变的矩形.html
│  │      10-17  用贴图模式填充矩形.html
│  │      10-18  绘制一个圆形脸谱.html
│  │      10-19  将圆形脸谱变换成椭圆形.html
│  │      10-2  囧.html
│  │      10-20  将圆形脸谱变换成椭圆形.html
│  │      10-21  绘制文本实例.html
│  │      10-22  度量的绘制文本.html
│  │      10-23  文字和图形添加阴影.html
│  │      10-24  状态的保存与恢复.html
│  │      10-25  图像底片效果.html
│  │      10-26  碰碰球的Canvas元素.html
│  │      10-3  绘制一个黄色的矩形.html
│  │      10-4  绘制一个圆形和矩形叠加的图形.html
│  │      10-5  绘制两个半透明的圆形.html
│  │      10-6  绘制两条直线.html
│  │      10-7  多样化的图形组合.html
│  │      10-8  绘制一条弧线.html
│  │      10-9  使用arcTo()方法绘制一条弧线.html
│  │      jsgame.js
│  │
│  ├─C11
│  │      11-1  横向分割窗口.html
│  │      11-10  设置边框的边距.html
│  │      11-11  使用“name”属性给框架命名.html
│  │      11-11&11-12指定框架内实现页面跳转.html
│  │      11-12  使用“target”属性定义链接的框架.html
│  │      11-13  框架内的锚点链接.html
│  │      11-14  创建浮动框架.html
│  │      11-15  制定自己的链接主页.html
│  │      11-2  纵向分割窗口.html
│  │      11-3  框架的嵌套.html
│  │      11-4  将页面放入到窗口框架中.html
│  │      11-5  使用noframe标签注释.html
│  │      11-6  使用noresize标签固定框架的位置.html
│  │      11-7  设置滚动条.html
│  │      11-8  判定边框是否显示.html
│  │      11-9  改变边框的表现效果.html
│  │      12.html
│  │      blue.html
│  │      content.html
│  │      green.html
│  │      orange.html
│  │      red.html
│  │      silver.html
│  │      white.html
│  │      制定积分表.html
│  │      复件white.html
│  │
│  ├─C12
│  │  │  12-1  CSS的使用.html
│  │  │  12-10  使用CSS修饰页面颜色.html
│  │  │  12-11  CSS 3属性选择符.html
│  │  │  12-12  使用伪类选择符设计表格.html
│  │  │  12-13  使用伪元素选择符.html
│  │  │  12-14  个人页面.html
│  │  │  12-2  类选择器和标志选择器.html
│  │  │  12-3  HTML选择器的使用.html
│  │  │  12-4  伪类“：lang（语言）”的使用.html
│  │  │  12-5  多重样式表情况下的优先级.html
│  │  │  12-6  CSS修饰文本字体.html
│  │  │  12-7  CSS修饰文本字体大小.html
│  │  │  12-8  不同行高的对比.html
│  │  │  12-9  禁止文本自动换行.html
│  │  │  bobo.css
│  │  │  后退.html
│  │  │
│  │  ├─images
│  │  │      doc.png
│  │  │      img.png
│  │  │      pdf.png
│  │  │      test.doc
│  │  │      test.pdf
│  │  │      web.png
│  │  │
│  │  └─图片
│  │          what.png
│  │          标题.png
│  │          背景.png
│  │
│  ├─C13
│  │      13-1  为文字设置深灰色阴影.html
│  │      13-10  主色调红色的配色方案表.html
│  │      13-11  HSLA半透明效果.html
│  │      13-12  RGBA半透明效果.html
│  │      13-13  图片的半透明效果.html
│  │      13-14  半透明的遮蔽层.html
│  │      13-15  多重背景效果.html
│  │      13-16  背景的原点位置.html
│  │      13-17  背景的显示区域.html
│  │      13-18  不同尺寸的多重背景图像.html
│  │      13-19  值cover与值contain.html
│  │      13-2  为文字设置描边效果.html
│  │      13-20  信纸的效果.html
│  │      13-21  设计圆角边框.html
│  │      13-22  两组半径的圆角.html
│  │      13-23  设计图像边框.html
│  │      13-24  边框图像重复显示.html
│  │      13-25  边框的宽度.html
│  │      13-26  为边框定义多种颜色.html
│  │      13-27  使用新技术设计的网页.html
│  │      13-3  为文字设置描边效果.html
│  │      13-4  溢出文本省略标记.html
│  │      13-5  网址的边界换行.html
│  │      13-6  文字内换行.html
│  │      13-7  使用服务器端字体.html
│  │      13-8  同时定义客户端和服务器端字体.html
│  │      13-9  唐诗《游子吟》.html
│  │      borderimage.png
│  │
│  ├─C14
│  │      14-10  三栏布局下的页面.html
│  │      14-1了解通过层来定位页面内容的位置.html
│  │      14-2  层的基本定位.html
│  │      14-3  层的叠加.html
│  │      14-4  框模型的大小.html
│  │      14-5  使用自定义图像来作为空距.html
│  │      14-6  不同页面内容的边距相邻档.html
│  │      14-7  使用“overflow”属性.html
│  │      14-8  display属性.html
│  │      14-9  使用Hack.html
│  │
│  ├─C15
│  │  │  15-1  一个简单的三栏网页.html
│  │  │  15-10  给盒元素添加阴影效果.html
│  │  │  15-11  设计盒子的描边效果.html
│  │  │  15-12  设计盒子的内阴影.html
│  │  │  15-13  盒子尺寸的计算方法.html
│  │  │  15-14  盒子溢出内容处理.html
│  │  │  15-15  设计网站服务条款页面.html
│  │  │  15-16  可以调整大小的div元素.html
│  │  │  15-17  使用外轮廓渲染登录表单.html
│  │  │  15-18  伪装的按钮.html
│  │  │  15-19  给元素添加内容.html
│  │  │  15-2  竖向显示三个栏目.html
│  │  │  15-20  设计一个省份选择盘.html
│  │  │  15-3  反向显示三个栏目.html
│  │  │  15-4  调整子元素的显示位置.html
│  │  │  15-5  具有空间弹性的菜单栏.html
│  │  │  15-6  多个子元素的弹性空间分配.html
│  │  │  15-7  自适应居中的登录框.html
│  │  │  15-8  把图片布局在盒元素底部.html
│  │  │  15-9  使用新型盒布局设计网页.html
│  │  │
│  │  └─images
│  │          Code4-5.html
│  │          doc.png
│  │          IL1.jpg
│  │          IL2.jpg
│  │          IL3.jpg
│  │          IL4.jpg
│  │          IL5.jpg
│  │          img.png
│  │          login.png
│  │          Pattern.pdf
│  │          pdf.png
│  │          sky.jpg
│  │          test.doc
│  │          web.png
│  │
│  ├─C16
│  │  │  16-1  把一篇文章分成多列显示.html
│  │  │  16-2  仅设置列的宽度.html
│  │  │  16-3  仅设置列的数目.html
│  │  │  16-4  较宽松的列间距.html
│  │  │  16-5  列与列之间的分隔线.html
│  │  │  16-6  标题跨列显示.html
│  │  │  16-7  模仿杂志的多列版式.html
│  │  │
│  │  └─images
│  │          pic.png
│  │
│  ├─C17
│  │  │  17-1  旋转的菜单.html
│  │  │  17-10  指定个别属性有过渡效果.html
│  │  │  17-11  为过渡属性指定不同的过渡时间.html
│  │  │  17-12  延迟的过渡效果.html
│  │  │  17-13  渐隐的过渡效果.html
│  │  │  17-14  滑动的菜单.html
│  │  │  17-15  变换位置的小球.html
│  │  │  17-16  变化的页面元素.html
│  │  │  17-17  永不停止的风车.html
│  │  │  17-18  线性渐变的背景.html
│  │  │  17-19  径向渐变的背景圆.html
│  │  │  17-2  放大的菜单.html
│  │  │  17-20  设计渐变的按钮.html
│  │  │  17-3  移动的菜单.html
│  │  │  17-4  倾斜的菜单.html
│  │  │  17-5  矩阵变形的菜单.html
│  │  │  17-6  多种变形的菜单.html
│  │  │  17-7  定义菜单旋转的原点.html
│  │  │  17-8  图片画廊.html
│  │  │  17-9  过渡效果.html
│  │  │  永不停止的风车.html
│  │  │  画廊1.html
│  │  │  立体盒子.html
│  │  │
│  │  └─images
│  │          bark.jpg
│  │          hourHand.png
│  │          image1.jpg
│  │          image10.jpg
│  │          image11.jpg
│  │          image12.jpg
│  │          image13.jpg
│  │          image14.jpg
│  │          image15.jpg
│  │          image2.jpg
│  │          image3.jpg
│  │          image4.jpg
│  │          image5.jpg
│  │          image6.jpg
│  │          image7.jpg
│  │          image8.jpg
│  │          image9.jpg
│  │          minuteHand.png
│  │          pic1.jpg
│  │          pic2.jpg
│  │          pic3.jpg
│  │          point.png
│  │          point2.png
│  │          secondHand.png
│  │
│  ├─C18
│  │  │  18-1  根据窗口尺寸选择不同的样式.html
│  │  │  18-2  自适应屏幕的样式表方案.html
│  │  │  18-Test.html
│  │  │
│  │  └─images
│  │          logo.jpg
│  │          pic.jpg
│  │          Scene1.jpg
│  │          Scene2.jpg
│  │          Scene3.jpg
│  │          Scene4.jpg
│  │          Scene5.jpg
│  │          Scene6.jpg
│  │          Scene7.jpg
│  │          Scenery1.jpg
│  │          Scenery2.jpg
│  │          Scenery3.jpg
│  │          Scenery4.jpg
│  │          Scenery5.jpg
│  │          Scenery6.jpg
│  │
│  ├─C19
│  │  │  tabright9.gif
│  │  │  案例一.html
│  │  │
│  │  └─图片
│  │          1.jpg
│  │          2.jpg
│  │          3.jpg
│  │          4.jpg
│  │          tabright9.gif
│  │
│  ├─C2
│  │  │  2-1  学习第一个页面.html
│  │  │  2-2  HTML文档的基本机构.html
│  │  │  2-6  页面自动跳转实例.html
│  │  │  2-7  title标签的使用.html
│  │  │  2-8   body标签的使用.html
│  │  │  2-9  一则寓言故事的页面.html
│  │  │
│  │  └─图片
│  │          MIL.JPG
│  │
│  ├─C20
│  │      bg_redbox.png
│  │      hdr_about.gif
│  │      hdr_benefits.gif
│  │      hdr_enlightenment.png
│  │      hdr_participation.gif
│  │      hdr_requirements.gif
│  │      title_hdr.jpg
│  │      案例二.html
│  │
│  ├─C21
│  │  │  article.htm
│  │  │  index.htm
│  │  │  msg.htm
│  │  │  photo.htm
│  │  │
│  │  ├─css
│  │  │      style.css
│  │  │
│  │  ├─img
│  │  │      body_bg.jpg
│  │  │      b_01.jpg
│  │  │      b_02.jpg
│  │  │      b_03.jpg
│  │  │      b_04.jpg
│  │  │      b_05.jpg
│  │  │      h4_bg.jpg
│  │  │      hover_bg.jpg
│  │  │      l_01.jpg
│  │  │      l_02.jpg
│  │  │      l_03.jpg
│  │  │      l_04.jpg
│  │  │      l_05.jpg
│  │  │      nav_bg.jpg
│  │  │      vi.jpg
│  │  │
│  │  ├─js
│  │  │      main.js
│  │  │
│  │  └─swf
│  ├─C3
│  │      3-1  旧方法：使用特殊标签.html
│  │      3-10  注册商标&reg_和版权商标&copy.html
│  │      3-11  使用acronym添加标注.html
│  │      3-12  制作无序列表.html
│  │      3-13  制作定义列表.html
│  │      3-14  列表的嵌套.html
│  │      3-15  一则会议通知.html
│  │      3-2  新方法：使用CSS.html
│  │      3-3  使用p标签.html
│  │      3-4  使用br标签.html
│  │      3-5  使用空格符号.html
│  │      3-6  使用pre标签.html
│  │      3-7  使文本段落对齐.html
│  │      3-8  对整体和局部文本使用对齐命令的效果.html
│  │      3-9  改变字体样式的标签.html
│  │
│  ├─C4
│  │  │  4-1  在页面中添加图像.html
│  │  │  4-2  在页面中对齐图片.html
│  │  │  4-3  图像于文本的对齐方式.html
│  │  │  4-4  控制图像与文本的距离.html
│  │  │  4-5  给图像添加边框.html
│  │  │  4-6  设置页面背景图像.html
│  │  │  4-7  我的宠物页面.html
│  │  │
│  │  └─图片
│  │          la图标.bmp
│  │          向左向右.jpg
│  │          图鉴1.jpg
│  │          图鉴2.jpg
│  │          图鉴3.jpg
│  │          我的宠物.gif
│  │          我的宠物banner.gif
│  │          表情1.jpg
│  │          表情2.jpg
│  │          表情3.jpg
│  │          页面背景.jpg
│  │          黑白照片.jpg
│  │
│  ├─C5
│  │  │  5-10  使用“border-bottom”属性替换链接下划线.html
│  │  │  5-11  使用“padding-bottom”属性替换链接下划线.html
│  │  │  5-12  借助Dreamweaver软件来制作热点图像链接.html
│  │  │  5-13  在新窗口中跳出链接窗口.html
│  │  │  5-14  主页：电影30目录.html
│  │  │  5-15  子页：泰坦尼克号.html
│  │  │  5-3  链接内容的路径.html
│  │  │  5-4  文本链接.html
│  │  │  5-5  设置图像链接.html
│  │  │  5-6  链接邮箱地址.html
│  │  │  5-7  同一页面内实现链接.html
│  │  │  5-8  使用标签属性修改文本链接颜色.html
│  │  │  5-9  使用CSS属性修改文本链接颜色.html
│  │  │  A.html
│  │  │  B.html
│  │  │  后退.html
│  │  │  吏部陈公诗跋.html
│  │  │  希斯莱杰.html
│  │  │  苏轼简介.html
│  │  │  蝙蝠侠之黑暗骑士.html
│  │  │
│  │  └─图片
│  │          吏部陈公诗跋.jpg
│  │          向左向右.jpg
│  │          手.png
│  │          时间表.jpg
│  │          返回主页.bmp
│  │          铁达尼克.jpg
│  │
│  ├─C6
│  │  │  6-1  计算矩形的面积.html
│  │  │  6-10  formaction特性的使用方法.html
│  │  │  6-11  list特性和datalist元素的使用方法.html
│  │  │  6-12  keygen元素的使用方法.html
│  │  │  6-13  output元素的使用方法.html
│  │  │  6-14  显式验证表单.html
│  │  │  6-15  自定义错误提示信息.html
│  │  │  6-16  监听invalid事件.html
│  │  │  6-17  使用样式表修饰表单的页面.html
│  │  │  6-18  用户注册页面.html
│  │  │  6-2  text样式的表单.html
│  │  │  6-3  checkbox样式的表单.html
│  │  │  6-4  radio样式的表单.html
│  │  │  6-5  submit样式的表单.html
│  │  │  6-6  file样式的表单.html
│  │  │  6-7  textarea对象的表单.html
│  │  │  6-8  select对象的表单.html
│  │  │  6-9  form特性的使用方法.html
│  │  │
│  │  └─images
│  ├─C7
│  │  │  7-1  Flash视频嵌入示例.html
│  │  │  7-2  视频播放快进.html
│  │  │  7-3  播放与暂停.html
│  │  │  7-4  自定义播放工具条.html
│  │  │
│  │  └─images
│  ├─C8
│  │  │  8-1  拖放页面元素的内容.html
│  │  │  8-2  遍历FileList对象.html
│  │  │  8-3  获取文件的大小和类型.html
│  │  │  8-4  FileReader接口的方法实例.html
│  │  │  8-5  FileReader接口的事件响应顺序.html
│  │  │  8-6  把图片拖入浏览器.html
│  │  │
│  │  └─images
│  │          icon1.png
│  │          icon10.png
│  │          icon11.png
│  │          icon12.png
│  │          icon2.png
│  │          icon3.png
│  │          icon4.png
│  │          icon5.png
│  │          icon6.png
│  │          icon7.png
│  │          icon8.png
│  │          icon9.png
│  │
│  └─C9
│      │  9-1  检测浏览器是否支持Web Storage.html
│      │  9-2  使用sessionStorage和localStorage.html
│      │  9-4  使用Storage对象保存页面内容.html
│      │  9-5  使用Storage对象存储Json数据.html
│      │  9-7  窗口通信Page1.html
│      │  9-8  窗口通信Page2.html
│      │  9-9  本地数据库操作页面.html
│      │
│      └─images
│              icon1.png
│              icon10.png
│              icon11.png
│              icon12.png
│              icon2.png
│              icon3.png
│              icon4.png
│              icon5.png
│              icon6.png
│              icon7.png
│              icon8.png
│              icon9.png
│
└─电子教案（PPT）
        1.ppt
        10.ppt
        11.ppt
        12.ppt
        13.ppt
        14.ppt
        15.ppt
        16.ppt
        17.ppt
        18.ppt
        19.ppt
        2.ppt
        20.ppt
        21.ppt
        3.ppt
        4.ppt
        5.ppt
        6.ppt
        7.ppt
        8.ppt
        9.ppt