袁进的HTML和CSS笔记(源码)

【实例截图】

【核心代码】

袁进的HTML和CSS笔记

├── 1. 概述
│   ├── index.html
│   ├── 笔记1.md
│   ├── 笔记2.md
│   └── 笔记3.md
├── 2. HTML核心
│   ├── 1. 第一个网页
│   │   ├── index.html
│   │   ├── test1.html
│   │   └── 笔记.md
│   ├── 10. 容器元素
│   │   ├── div元素.html
│   │   ├── 笔记.md
│   │   └── 语义化的容器元素.html
│   ├── 11. 元素包含关系
│   │   └── 笔记.md
│   ├── 12. 练习-百度新闻
│   │   ├── img
│   │   │   ├── adv1.png
│   │   │   ├── adv2.jpg
│   │   │   ├── banner
│   │   │   │   ├── banner1.jpg
│   │   │   │   └── banner2.jpg
│   │   │   ├── logo.png
│   │   │   ├── sncode.png
│   │   │   └── test.jpg
│   │   └── index.html
│   ├── 2. 语义化
│   │   ├── index.html
│   │   └── 笔记.md
│   ├── 3. 文本元素
│   │   ├── h元素.html
│   │   ├── pre元素.html
│   │   ├── p元素.html
│   │   ├── span元素.html
│   │   ├── 笔记.md
│   │   └── 空白折叠.html
│   ├── 4. HTML实体
│   │   ├── index.html
│   │   └── 笔记.md
│   ├── 5. a元素
│   │   ├── index.html
│   │   ├── target属性.html
│   │   ├── 测试.html
│   │   ├── 笔记.md
│   │   ├── 锚链接.html
│   │   └── 功能链接.html
│   ├── 6. 路径的写法
│   │   ├── subhtmls
│   │   │   └── a.html
│   │   ├── 笔记.md
│   │   ├── 相对路径的写法.html
│   │   └── 绝对路径的书写.html
│   ├── 7. 图片元素
│   │   ├── img
│   │   │   └── solar.jpg
│   │   ├── index.html
│   │   └── 笔记.md
│   ├── 8. 多媒体元素
│   │   ├── audio.html
│   │   ├── media
│   │   │   ├── open.mp4
│   │   │   └── shamoluotuo.mp3
│   │   ├── video.html
│   │   └── 笔记.md
│   └── 9. 列表元素
│       ├── 笔记.md
│       ├── 定义列表.html
│       ├── 无序列表.html
│       └── 有序列表.html
├── 3. CSS基础
│   ├── 1. 为网页添加样式
│   │   ├── css
│   │   │   └── index.css
│   │   ├── index.html
│   │   ├── index2.html
│   │   └── 笔记.md
│   ├── 10. 常规流
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── test3.html
│   │   └── 笔记.md
│   ├── 11. 常规流练习
│   │   ├── css
│   │   │   ├── index.css
│   │   │   └── reset.css
│   │   ├── index.html
│   │   └── 设计稿.png
│   ├── 12. 浮动
│   │   ├── hashiqi.jpg
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── test3.html
│   │   ├── test4.html
│   │   ├── test5.html
│   │   └── 笔记.md
│   ├── 13. 浮动练习
│   │   ├── css
│   │   │   ├── common.css
│   │   │   ├── movie.css
│   │   │   └── reset.css
│   │   ├── img
│   │   │   └── test.jpg
│   │   └── movie.html
│   ├── 14. 定位
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── test3.html
│   │   ├── 笔记.md
│   │   ├── 相对定位.html
│   │   └── 绝对定位元素的包含块.html
│   ├── 15. 定位练习
│   │   ├── css
│   │   │   ├── reset.css
│   │   │   ├── 弹出层.css
│   │   │   ├── 轮播图.css
│   │   │   └── 二级菜单.css
│   │   ├── img
│   │   │   ├── 1.jpg
│   │   │   ├── 2.jpg
│   │   │   ├── 3.jpg
│   │   │   └── douyu.png
│   │   ├── 笔记.md
│   │   ├── 弹出层.html
│   │   ├── 轮播图.html
│   │   └── 二级菜单.html
│   ├── 16. 更多的选择器
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── test3.html
│   │   ├── test4.html
│   │   └── 笔记.md
│   ├── 17. 更多的样式
│   │   ├── css
│   │   │   └── test1.css
│   │   ├── imgs
│   │   │   ├── bg.jpg
│   │   │   ├── bg3.jpg
│   │   │   ├── douyu.png
│   │   │   ├── icon.png
│   │   │   ├── main_bg.jpg
│   │   │   └── target.ico
│   │   ├── 笔记.md
│   │   ├── 透明度.html
│   │   ├── 雪碧图.html
│   │   ├── 背景图1.html
│   │   ├── 鼠标样式.html
│   │   └── 固定背景图.html
│   ├── 18. 背景图练习
│   │   ├── css
│   │   │   ├── index.css
│   │   │   └── reset.css
│   │   ├── img
│   │   │   ├── 1.jpg
│   │   │   ├── 2.jpg
│   │   │   ├── 3.jpg
│   │   │   ├── 4.jpg
│   │   │   ├── bg.jpg
│   │   │   ├── bg_nav.jpg
│   │   │   ├── btns.png
│   │   │   ├── logo.png
│   │   │   └── 页面效果.png
│   │   └── index.html
│   ├── 2. 常见样式声明
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── test3.html
│   │   ├── test4.html
│   │   └── 笔记.md
│   ├── 3. 选择器
│   │   ├── css
│   │   │   └── test1.css
│   │   ├── test1.html
│   │   └── 笔记.md
│   ├── 4. 层叠
│   │   ├── css
│   │   │   ├── mystyle.css
│   │   │   └── reset.css
│   │   ├── test.html
│   │   ├── test2.html
│   │   ├── 笔记.md
│   │   ├── 爱恨法则.html
│   │   └── 重置样式.html
│   ├── 5. 继承
│   │   ├── index.html
│   │   └── 笔记.md
│   ├── 6. 属性值的计算过程
│   │   ├── assets
│   │   │   └── 2019-05-17-12-27-14.png
│   │   ├── index.html
│   │   ├── reset.css
│   │   ├── test2.html
│   │   ├── 笔记.md
│   │   └── 属性值计算过程简介.pptx
│   ├── 7. 盒模型
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── test3.html
│   │   └── 笔记.md
│   ├── 8. 盒模型应用
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── test3.html
│   │   ├── test4.html
│   │   ├── test5.html
│   │   └── 笔记.md
│   └── 9. 行盒的盒模型
│       ├── pager.html
│       ├── test1.html
│       ├── test2.html
│       ├── test3.html
│       ├── test4.html
│       └── 笔记.md
├── 4. HTML进阶
│   ├── 1. iframe元素
│   │   ├── test1.html
│   │   ├── test2.html
│   │   └── 笔记.md
│   ├── 2. 在页面中使用flash
│   │   ├── example.swf
│   │   ├── test1.html
│   │   └── 笔记.md
│   ├── 3. 表单元素
│   │   ├── button元素.html
│   │   ├── datalist元素.html
│   │   ├── fieldset元素.html
│   │   ├── form元素.html
│   │   ├── hashiqi.jpg
│   │   ├── input元素.html
│   │   ├── label元素.html
│   │   ├── select元素.html
│   │   ├── textarea元素.html
│   │   └── 笔记.md
│   ├── 4. 美化表单元素
│   │   ├── css
│   │   │   ├── myform.css
│   │   │   └── reset.css
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── test3.html
│   │   ├── test4.html
│   │   ├── test5.html
│   │   ├── test6.html
│   │   ├── test7.html
│   │   └── 笔记.md
│   ├── 5. 表单练习
│   │   ├── css
│   │   │   ├── reg.css
│   │   │   └── reset.css
│   │   └── reg.html
│   ├── 6. 表格元素
│   │   ├── table.html
│   │   ├── 说明
│   │   │   ├── 术语1.png
│   │   │   ├── 术语2.png
│   │   │   └── 术语3.png
│   │   └── 笔记.md
│   └── 7. 其他元素
│       ├── favicon.ico
│       ├── test1.html
│       ├── test2.html
│       ├── test3.css
│       ├── test3.html
│       └── 笔记.md
├── 5. CSS进阶
│   ├── 1. @规则
│   │   ├── index.css
│   │   ├── index.html
│   │   ├── reset.css
│   │   └── 笔记.md
│   ├── 10. [扩展]堆叠上下文
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── test3.html
│   │   └── 笔记.md
│   ├── 11. [扩展]svg
│   │   ├── imgs
│   │   │   ├── taiji.svg
│   │   │   ├── test1.svg
│   │   │   └── weixin.svg
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── test3.html
│   │   ├── test4.html
│   │   └── 笔记.md
│   ├── 12. [扩展]数据链接
│   │   ├── test1.css
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── 实例.1.html
│   │   ├── 实例.html
│   │   └── 笔记.md
│   ├── 13. 浏览器兼容性
│   │   ├── img
│   │   │   ├── big.jpg
│   │   │   └── small.jpg
│   │   ├── test1.css
│   │   ├── test1.html
│   │   ├── 笔记.md
│   │   ├── 针对IE的CSSHack.html
│   │   ├── 条件判断.html
│   │   ├── 背景图多选一.html
│   │   └── 谷歌浏览器滚动条.html
│   ├── 14. 居中总结
│   │   ├── 1.jpg
│   │   ├── 笔记.md
│   │   ├── 行盒水平居中.html
│   │   ├── 单行文本的垂直居中.html
│   │   ├── 常规流块盒水平居中.html
│   │   ├── 绝对定位元素的垂直居中.html
│   │   ├── 绝对定位元素的水平居中.html
│   │   └── 行块盒或块盒内多行文本的垂直居中.html
│   ├── 15. 样式补充
│   │   ├── 1.jpg
│   │   ├── direction.html
│   │   ├── list-item.html
│   │   ├── writing-mode.html
│   │   ├── 笔记.md
│   │   ├── 三角形.html
│   │   ├── 分散对齐.html
│   │   ├── 实体字符.html
│   │   ├── 分散对齐2.html
│   │   ├── 图片无法设置宽高.html
│   │   └── 行盒内部包含行块盒.html
│   ├── 2. web字体和图标
│   │   ├── css
│   │   │   └── iconfont.css
│   │   ├── font
│   │   │   ├── iconfont.eot
│   │   │   ├── iconfont.svg
│   │   │   ├── iconfont.ttf
│   │   │   ├── iconfont.woff
│   │   │   ├── iconfont.woff2
│   │   │   └── 晚安体.ttf
│   │   ├── unicode的方式.html
│   │   ├── web字体.html
│   │   ├── 笔记.md
│   │   ├── 字体图标.html
│   │   └── 离线字体图标.html
│   ├── 3. 块级格式化上下文
│   │   ├── test1.html
│   │   ├── test2.html
│   │   ├── test3.html
│   │   ├── test4.html
│   │   └── 演示.pptx
│   ├── 4. 布局
│   │   ├── 笔记.md
│   │   ├── 三栏布局.html
│   │   ├── 两栏布局.html
│   │   ├── 等高布局.html
│   │   ├── 后台页面的布局.html
│   │   └── 主区域代码靠前书写.html
│   ├── 5. [扩展]浮动的细节规则
│   │   └── 演示.pptx
│   ├── 6. [扩展]行高的取值
│   │   ├── index.html
│   │   └── 笔记.md
│   ├── 7. [扩展]body背景
│   │   ├── img
│   │   │   └── main_bg.jpg
│   │   ├── index.html
│   │   ├── test2.html
│   │   └── 笔记.md
│   ├── 8. 行盒的垂直对齐
│   │   ├── hashiqi.jpg
│   │   ├── qq.png
│   │   ├── test1.html
│   │   ├── test2.html
│   │   └── 笔记.md
│   └── 9. [扩展]参考线-深入理解字体
│       ├── hashiqi.jpg
│       ├── qq.png
│       ├── test1.html
│       ├── test2.html
│       ├── test3.html
│       ├── test4.html
│       ├── test5.html
│       ├── 笔记.md
│       └── 演示.pptx
└── 6. 项目实战-豆瓣首页
    ├── css
    │   ├── common.css
    │   ├── index.css
    │   ├── loginframe.css
    │   └── reset.css
    ├── favicon.ico
    ├── img
    │   ├── adv1.jpg
    │   ├── adv2.jpg
    │   ├── adv3.jpg
    │   ├── app_icons.jpg
    │   ├── banner-bg.jpg
    │   ├── biaoshi.gif
    │   ├── cover1.webp
    │   ├── cover10.jpg
    │   ├── cover11.jpg
    │   ├── cover12.jpg
    │   ├── cover2.jpg
    │   ├── cover3.jpg
    │   ├── cover5.webp
    │   ├── cover6.webp
    │   ├── cover7.jpg
    │   ├── cover8.jpg
    │   ├── cover9.jpg
    │   ├── icon-pc.png
    │   ├── icon-qr-small.png
    │   ├── icon-qrcode.png
    │   ├── jubao.png
    │   ├── logo_db.png
    │   ├── nav_logo.png
    │   ├── new_menu.gif
    │   ├── qrcode.png
    │   └── star-bg.png
    ├── index.html
    ├── loginframe.html
    ├── 概述.md
    └── 注意事项.md

86 directories, 331 files