黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）
一、基础班学习路线
三、CSS3基础
1.Emmet语法
emmet语法生成html标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- .nav --><div class="nav"></div><!-- #banner --><div id="banner"></div><!-- p.one --><p class="one"></p><!-- span.gray --><span class="gray"> </span><!-- ul>li#two --><ul><li id="two"></li></ul><!-- .demo$*5 --><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><div class="demo4"></div><div class="demo5"></div><!-- .demo*5 --><div class="demo"></div><div class="demo"></div><div class="demo"></div><div class="demo"></div><div class="demo"></div><!-- div{nihao} --><div>nihao</div><!-- div{nihao}*5 --><div>nihao</div><div>nihao</div><div>nihao</div><div>nihao</div><div>nihao</div></body>
</html>
emmet语法快速生成css样式
快速格式化代码
- 格式化文档 Format Document
2.CSS的复合选择器
什么是复合选择器
后代选择器（重要）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 只要让ol中的li变粉色，ul中的li不用 */ol li {color: pink}ol li a {color: red;}.nav li a {color: yellow;}</style>
</head><body><ol>变态写法<li>我是ol 的孩子</li><li>我是ol 的孩子</li><li>我是ol 的孩子</li><li><a href="#">我是孙子</a></li></ol><ul><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li><a href="#">不会变化的</a></li></ul><ul class="nav"><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li><a href="#">会变化的</a></li></ul>
</body></html>
子元素选择器（重要）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav>a {color: red;}</style>
</head><body><div class="nav"><a href="#">我是儿子</a><p><a href="#">我是孙子</a></p></div>
</body></html>
并集选择器（重要）
链接伪类选择器
伪类选择器的概念 ：
链接伪类选择器 ：
链接伪类选择器实际工作开发中的写法 ：
：focus伪类选择器
复合选择器总结
3.CSS的元素显示模式
什么是元素显示模式
块元素
行内元素
行内块元素
元素显示模式总结
元素显示模式转换
snipaste
- f1截图并留在屏幕上
- option在图片上取色
简介版小米侧边栏案例
- 链接a元素明明是行内元素却要竖着显示，且这个链接点击的宽度很广，也就是说这个a有个宽度高度；所以就是把链接转换成块级元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {display: block;width: 230px;height: 30px;color: white;background-color: rgb(146, 140, 140);text-indent: 2em;text-decoration: none;font-size: 14px;}a:hover {background-color: orange;}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">手机 电话卡</a><a href="#">手机 电话卡</a><a href="#">手机 电话卡</a><a href="#">手机 电话卡</a><a href="#">手机 电话卡</a>
</body></html>
单行文字垂直居中的原理
- 就是行高的上空隙和下空隙把文字挤到中间了。行高大于盒子高度，则文字偏下；小于，则文字偏上。
4.CSS的背景
背景颜色
背景图片
背景平铺
背景位置-方位名词
背景位置案例一 小图标+文字
- 效果 ：如图的小图标和文字基本上是居中对齐的在一条线上
- 如果这个小图标采用在h3标签里插入图片img的话，它的中间线就不能和后面的文字在同一条线上了，所以要用bgi
背景位置案例二 超大背景图片 王者荣耀
背景位置-精确单位
背景位置-混合单位
背景固定
背景复合写法
背景颜色半透明
背景总结
综合案例-五彩导航
- hover版本就不需要加no-repeat了因为上面有
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）相关推荐
- 【黑马程序员pink老师前端】网页相关概念
java 学习笔记指路 基础知识 Python转java补充知识 Java中常见的名词解释 前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...
- 【黑马程序员pink老师前端】JavaScript对象
java 学习笔记指路 基础知识 Python转java补充知识 Java中常见的名词解释 前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...
- html, css学习笔记，自用（B站黑马程序员pink老师）
附上教学视频链接黑马程序员pink老师前端入门教程 该博文是自己随手记的上述视频笔记 跳转到css, p61 P18 <div> </div>一行一个,<span> ...
- 学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
本文为跟随B站黑马程序员pink老师学习CSS时所写,文章讲解了学成在线首页的制作思路,并贴出了源代码,作为学习笔记分享给大家 如有错误,欢迎指出.如有侵权,联系删除 文章目录 1. 案例准备工作 2 ...
- B站黑马程序员pink老师讲的JavaScript代码
B站黑马程序员pink讲课的JavaScript代码(部分代码) <!DOCTYPE html> <html lang="en"> <head> ...
- 跟着黑马程序员pink老师学习的笔记及小破站学习的笔记
网页 1.网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合 2.什么是网页? 网页是网站中的一"页",通常是HTML格式的文件,它要通过浏览器来 ...
- CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
1. CSS 简介 CSS 的主要使用场景就是美化网页,布局页面的 1.1 HTML 的局限性 说起 HTML ,他只关注内容的语义.比如 <h1> 表明这是一个大标题,<p> ...
- 黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（一）
一.计算机编程基础 编程语言 编程语言与标记语言的区别 编程语言 有很强的逻辑和行为能力,有if else等具有逻辑性和行为能力的指令,主动 标记语言(html)不用于向计算机发出指令,常用于格式化和 ...
- 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）
一.基础班学习路线 三.CSS3基础 1.CSS的三大特性 CSS三大特性之层叠性 CSS三大特性之继承性 行高的继承 CSS三大特性之优先级 CSS权重的叠加 十个在最后累加会变成0,0,0,10: ...
最新文章
- POJ 3264: Balanced Lineup
- Windows 下用VS2012（Visual Studio 2012）编译librtmp
- flowable设置流程发起人
- php 获取http headers
- Java RMI 入门
- [转] 英语、计算机、互联网与全球化
- python opencv 读取视频流不解码_python + opencv: 解决不能读取视频的问题
- NWT失败反省：谁给汝之权力，竟然敢要吾走人？
- MyEclipse安装配置maven插件
- SVN安装与使用教程
- 黑群晖drive套件的使用教程
- A very hard mathematic problem HDU - 4282（二分）
- Acer 4750 安装黑苹果_超详细安装黑苹果教程
- 一篇文章学习完RabbitMQ
- CAD打印线条太粗、线条颜色设置
- POI导出excel出现excel无法打开文件“xxx.xlsx”,因为文件格式或文件扩展名无效的问题
- AppleID的双重认证
- mercury路由器重置后服务器无响应,路由器复位不了，重置后进不去如何解决
- 那些关于程序员的段子
- 视觉3D感知（一）：初步认识