💥此MD/PDF/HTML文档由 @竹梦者也 编辑制作,不可转载❌、打印❌、二次编辑❌、贩卖❌。仅供学习交流使用,下载后切勿随意传播。
📌欢迎在留言区提供修改建议~
✅2021.6.22 @竹梦者也(https://www.zjgsuzjx.top)
一、CSS第一天一、CSS简介1. CSS语法规范2. CSS代码风格二、CSS基础选择器1. 选择器作用2. 选择器分类3. 标签选择器4. 类选择器5. id选择器6. 通配符选择器7. 基础选择器总结三、CSS字体属性1. 字体系列2. 字体大小3. 字体粗细4. 文字样式5. 字体复合属性6. 总结四、CSS文本属性1. 文本颜色2. 对齐文本3. 装饰文本4. 文本缩进5. 行间距5. 总结五、CSS引入方式1. 内部样式表2. 行内样式表3. 外部样式表4. 总结六、Chrome调试工具二、CSS第二天一、Emmet语法1. HTML快速生成语法结构2. CSS快速生成语法结构3. 快速格式化代码二、复合选择器1. 概念2. 后代选择器3. 子选择器4. 并集选择器5. 伪类选择器6. 链接伪类选择器7. focus伪类选择器8. 复合选择器总结三、CSS元素显示模式1. 概念2. 块元素3. 行内元素4. 行块内元素5. 元素显示模式总结6. 元素显示模式转换7. 文字垂直居中四、CSS的背景1. 背景颜色2. 背景图片3. 背景平铺4. 背景图片位置5. 背景图像固定(背景附着)6. 背景复合写法7. 背景色半透明8. 背景总结五、CSS三大特性1. 层叠性2. 继承性3. 优先级三、CSS盒子模型一、盒子模型1. 网页布局过程2. 盒子组成部分3. 边框(border)4. 表格的细线边框5. 内边距(padding)6. 外边距7. 外边距合并8. 清除内外边距二、PS基本操作三、圆角边框四、盒子阴影五、文字阴影四、CSS浮动一、浮动1. 传统网页布局三种方式2. 标准流(普通流/文档流)3. 为什么要浮动4. 浮动特性5. 父级标准流和子级浮动搭配使用二、常见网页布局1. 常见的网页布局(三种)2. 浮动布局的注意点三、清除浮动1. 为什么要清除浮动2. 清除浮动的本质3. 清除浮动方法4. 清除浮动总结四、PS切图1. 图层切图2. 切片切图3. PS插件切图五、学成在线案例1. 学成在线准备工作2. CSS属性书写顺序3. 页面布局整体思路4. 头部制作5. banner制作6. 精品模块7. 精品推荐大模块8. 底部模块五、CSS定位一、定位1. 为什么需要定位2. 定位组成3. 静态定位4. 相对定位 relative5. 绝对定位 absolute6. 子绝父相的由来7. 固定定位 fixed8. 粘性定位9. 定位的总结10. 定位叠放次序11. 定位的扩展二、网页布局总结三、元素的显示与隐藏1. display属性2. visibility可见性3. overflow溢出六、CSS高级技巧一、精灵图1. 为什么要精灵图2. 精灵图的使用二、字体图标1. 优点2. 字体图标下载3. 字体图标的引用(针对第一个网站)4. 字体图标的追加三、CSS三角四、CSS用户界面样式1. 鼠标样式 cursor2. 轮廓线 outline3. 防止拖拽文本域五、vertical-align的使用1. 消除图片底部默认空白缝隙问题六、溢出的文字省略号显示1. 单行文本溢出2. 多行文本溢出显示省略号七、常见布局技巧1. margin负值的应用2. 文字围绕浮动元素3. 行内块技巧运用4. CSS三角强化八、CSS初始化七、HTML5和CSS3提高一、HTML5新特性1. 新增的多媒体标签2. 新增的input类型3. 新增的表单属性二、CSS3新特性1. CSS3的现状2. 属性选择器3. 结构伪类选择器4. 伪元素选择器5. CSS3盒子模型6. CSS 2D转换二维坐标系移动translate旋转rotate转换中心点transform-origin缩放scale2D转换综合写法总结7. CSS动画动画的基本使用动画常用属性动画简写属性8. 3D转换3D位移透视(perspective)3D旋转 rotate3d3D呈现 transform-style9. 浏览器私有前缀10. CSS其它特性11. CSS过渡三、狭义的HTML5 CSS31. 广义的HTML5八、品优购项目实战一、项目规划1. 网站制作流程2. 开发工具以及技术栈3. 模块化开发4. 网站favicon图标5. 网站TDK三大标签SEO优化二、首页制作1. 常用模块类名命名2. LOGO SEO优化3. Tab栏原理(和JS搭配)三、列表页制作四、注册页制作五、Web服务器1. 什么是Web服务器2. 本地服务器3. 远程服务器4. 将自己网站上传远程服务器六、课程总结九、移动WEB开发之流式布局一、移动端基础1. 浏览器现状2. 收集屏幕现状3. 常见尺寸4. 移动端调式方法二、视口1. 布局视口 layout viewport2. 视觉视口 visual viewport3. 理想视口 ideal viewport4. meta视口标签三、二倍图1. 物理像素&物流像素比2. 多倍图3. 背景缩放 background-size四、移动端开发选择1. 移动端主流方案2. 单独制作移动端页面3. 响应式页面兼容移动端五、移动端技术解决方案1. CSS初始化 normalize.css2. 特殊样式六、移动端常见布局1. 流式布局(百分比布局)十、移动WEB开发之flex布局一、flex布局体验二、flex布局原理三、flex布局父项常见属性1. 常见的父项属性2. flex-direction 设置主轴方向3. justify-content 设置主轴上的子元素排列方式4. flex-wrap设置子元素是否换行5. align-items设置侧轴上的子元素排列方式(单行)6. align-content设置侧轴上的子元素排列方式(多行)7. align-content和align-items的区别8. flex-flow四、flex布局子项常见属性1. flex属性2. align-self控制子项自己在侧轴上的排列方式3. order属性定义项目的排列顺序五、携程网案例十一、移动WEB开发之rem适配布局一、rem基础二、媒体查询1. 引入资源三、less基础1. Less介绍2. Less使用四、rem适配方案1. rem实际开发适配方案2. rem适配方案技术使用(市场主流)五、苏宁首页案例1. 设置公共common.less文件2. 在less文件中引入其它less文件3. body样式4. 其它5. 使用适配方案2来制作案例6. px自动转rem插件十二、移动WEB开发之响应式布局一、响应式开发1. 响应式开发原理2. 响应式布局容器二、Bootstrap前端开发框架1. Bootstrap简介2. Bootstrap使用3. 布局容器三、Bootstrap栅格系统1. 简介2. 栅格系统参数3. 列嵌套4. 列偏移5. 列排序6. 响应式工具四、阿里百秀首页案例1. 屏幕划分分析2. 手动修改container的最大宽度3. 引入字体图标4. 制作响应式五、移动端布局总结1. 移动端主流方案2. 移动端技术选型十三、移动WEB开发之vw和vh十四、黑马面面项目一、关于切图二、swiper插件三、上传码云并发布部署静态网站
美化网页,而html只关注内容。是层叠样式表的简称,也是一种标记语言,也称为CSS样式表或级联样式表。主要设置网页的布局。最大价值:使结构(HTML)和样式(CSS)相分离。
如:
<style>
p{
color: #ff0000;
front-size:12px;
}
</style>
提倡展开格式,因为更加直观。
样式的大小写:提倡小写形式。
空格规范:在冒号后面有一个空格;在选择器和大括号中间也保留空格。
选择标签用的。根据需求不同把不同的标签选出来。
可以分为基础选择器和复合选择器。
是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
差异化选择不同的标签,单独选一个或某几个标签。
<head>
<style>
.p1 {
color: #ff0000;
}
</style>
</head>
<body>
<p class="p1">hello,world!</p>
<p class="p2">hello,world!</p>
</body>
口诀:样式点定义,结构类调用,一个或多个,开发最常用
举个栗子:
xxxxxxxxxx
<head>
<style>
.d1 {
width: 100px;
height: 100px;
background-color: red;
}
.d2 {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d1"></div>
</body>
类选择器-多类名:可以给一个标签指定多个类名。多个类名要用空格分开。
如:
xxxxxxxxxx
<style>
.d1 {
color: red;
}
.d2 {
font-size: 35px;
}
</style>
<div class="d1 d2">刘德华</div>
使用场景:把公共的样式放到同一个地方。
CSS中用#来定义,结构中用id调用。只能调用一次,别人切勿使用。
如:
#d1 {
color: red;
}
<div id="d1">刘德华</div>
id选择器和类选择器的区别:
使用*定义,把html里所有的标签全部统一修改。
如:
* {
color: red;
}
用front-family
如:
xxxxxxxxxx
h2 {
font-family: '微软雅黑',Arial;
}
如果有多个字体,会依次判断该电脑是否有这个字体。都没有的话会用浏览器自带的字体。
用font-size,单位是px。
标题标签比较特殊,需要单独指定文字大小。
用font-weight,可以用数字不带单位。
如:
xxxxxxxxxx
.p1 {
font-weight: bold;
}
<p class="p1">hello</p>
实际开发中更多用数字。
指文本风格,如斜体。
xxxxxxxxxx
.p1 {
font-style: italic;
}
<p class="p1">hello</p>
用来节约代码,有严格顺序要求。
xxxxxxxxxx
.p1 {
/*font:font-style font-weight font-size/line-height font-family*/
font:italic 700 16px 'Microsoft YaHei';
}
注意:
有三种表示方法:
1.red
2.#ff0000
3.rgb(255,0,0或rgb(100%,0%,0%)
十六进制用的最多。
xxxxxxxxxx
.p1 {
text-align: center;
text-align: right;
}
默认值是left,即左对齐;本质是让盒子里的文字居中。
如下划线、删除线、上划线等。
xxxxxxxxxx
.p1 {
text-decoration: underline;
}
xxxxxxxxxx
a {
text-decoration: none;
}
<a href="http://www.baidu.com">百度</a>
这个代码用的比较多,去掉链接的下划线。
给文本的第一行缩进
xxxxxxxxxx
p {
text-indent: 20px;
}
em是一个相对单位,是当前文字一个文字的大小。
控制行于行之间的距离。
xxxxxxxxxx
p {
line-height: 26px;
}
文本的行间距由三部分组成:
根据样式书写位置不同,可以分成三大类。
写在了htnl页面内部。就是单独放在style里,可以放在任何地方。
修改简单样式时使用。
如:
<div style="color: red; font-size: 12px">DEMO</div>
适合样式比较多的情况。单独写到css文件中,之后将CSS文件引入到HTML文件中。
<link rel="stylesheet" href="../css/1-3.css">
快捷键:输入link+Tab
这是最常用的方式。
注意:给图片加不了居中对齐,必须给它的父亲
标签对齐。
F12或右键审查元素->elements
① Ctrl+滚轮 可以放大开发者工具代码大小。
② 左边是 HTML 元素结构,右边是 CSS 样式。
③ 右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色。
④ Ctrl + 0 复原浏览器大小。
⑤ 如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
⑥ 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。
用来提升CSS/HTML编写速度。
div{$}*5
=>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
首字母+数学再按Tab
也就是快速对齐。可以使用快捷键。
Vscode 快速格式化代码: shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:
1)文件 ------.>【首选项】---------->【设置】;
2)搜索emmet.include;
3)在settings.json下的【工作区设置】中添加以下语句:
"editor.formatOnType": true,
"editor.formatOnSave": true
建立在基础选择器之上,对基本选择器进行组合形成的。
可以更准确、更高效的选择目标元素。
由两个及以上基础选择器用不同方式合成。
总的来说,有class就用.类名,没有class就用标签名。
又称包含选择器,可以选择父元素里面的子元素。
xxxxxxxxxx
//可以多层寻嵌套
ol li a {
color: red;
}
要求如下:
//父类定义class为nav
.nav li a {
color: red;
}
也称子元素选择器,只能选择亲儿子,即最近一组的元素
//中间用>
.nav>a {
color: red;
}
可以选择多组标签。通常用于集体声明。逗号就是和的意思
需要用逗号分开。最后一个元素不要逗号
div, p, .pig li {
color: red;
}
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
因为伪类选择器很多,比如有链接伪类、结构伪类等,所以这里先给大家讲解常用的链接伪类选择器。
xxxxxxxxxx
/*未访问过*/
a:link{
color: black;
text-decoration: none;
}
/*鼠标点击过时*/
a:visited{
color: orange;
}
/*鼠标悬浮时*/
a:hover{
color: red;
}
/*鼠标按下未松开*/
a:active{
color: green;
}
注意事项:
实际开发中的常用写法:
xxxxxxxxxx
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
用于选取获得焦点的表单元素。一般来说只有input类表单元素才能获取,因此是针对表单元素的。
xxxxxxxxxx
input:focus {
background-color: pink;
}
可以将网页标签分类。HTML元素一般分为块元素和行内元素两种类型。
特别注意行内元素不能🙅放块元素!
链接里面不能放链接!但里面可以放块级元素,但转化成块级模式最安全。
同时具有两种元素的特点。
将一种模式转化成另一种模式。
xxxxxxxxxx
a {
width: 200px;
height: 250px;
display: block;
}
将
xxxxxxxxxx
div {
display: inline;
}
将转化成行内块元素:
xxxxxxxxxx
span {
width: 200px;
height: 250px;
display: inline-block;
}
软件推荐:
下载链接:https://zh.snipaste.com/download.html
让文字高度等于盒子高度
xxxxxxxxxx
div {
height: 200px;
line-height: 200px;
}
默认是透明色
xxxxxxxxxx
div {
background-color: transparent;
}
常用于logo或者装饰性的小图片或者是超大背景图片,优势是便于控制位置(精灵图也是一种运用场景)。none是没有图片。
如:
xxxxxxxxxx
div {
width: 200px;
height: 250px;
background-image: url("http://www.baidu.com.png");
}
xxxxxxxxxx
/*不平铺*/
background-repeat: no-repeat;
/*默认情况:*/
background-repeat: repeat;
/*沿着x轴平铺*/
background-repeat: repeat-x;
/*沿着y轴平铺*/
background-repeat: repeat-y;
改变图片在背景中的位置。
1.如果是方位名词,则没有先后关系。如果只写了一个,则另一个默认是center。
background-position: center top;
注意:较大背景时会常用到上面的代码
2.如果是精确单位,那么第一个是x坐标,第二个是y坐标。
background-position: 20px 50px;
注意,原点坐标是左上角。如果省略一个参数,则没省略的一定是x坐标,另一个默认是垂直居中。
3.如果是混合单位。第一个是x坐标,第二个是y坐标。
background-position: 20px center;
可以做视觉滚动效果。
/*固定图像*/
background-attachment: fixed;
/*默认滚动*/
background-attachment: scroll;
body {
background: black url("image/bg.jpg") no-repeat fixed center;
}
xxxxxxxxxx
background: rgba(0, 0, 0, 0.3);
第四个参数设置透明度,0是纯透明。习惯性把0给省略,即.3
这是CSS3新增属性。
层叠性、继承性、优先级
相同的选择器给设置系统的样式。即相同选择器的相同属性会出现冲突的情况。
重叠性原则:
最重要是就近原则。
子标签会继承父标签的某些样式,
div {
color: pink;
font-size: 12px;
}
<div>
<p>demo</p>
</div>
xxxxxxxxxx
<p>标签会继承父亲<div>的属性。但不是所有样式都可以继承。
而行高的继承可以不跟单位。如
xxxxxxxxxx
div {
font: 12px/1.5 "Microsoft YaHei";
}
指的是当前文字大小的1.5倍。注意是当前的,而不是层叠之前的。
当同一个元素指定多个选择器时,就会有优先级产生。
原则:选择器相同,则执行重叠性;选择器不同,按照选择器优先级。
优先级如下:(依次变大)
xxxxxxxxxx
div {
color: pink!important;
}
.test {
color: red;
}
注意点:
xxxxxxxxxx
#father {
color: red!important;
}
p {
color: pink;
}
<div id="father">
<p>demo</p>
</div>
注意这里继承过来的权重为0,最后还是粉色。
同时,上面这块代码还可以解释以下情况:
xxxxxxxxxx
body {
color: red;
}
<a href="#">demo</a>
最后结果不是红色,因为浏览器默认制定了一个样式,即蓝色有下划线 a{color:blue},继承的权重为0。
复合选择器还会有权重叠加的问题
如:
ul li {
color: green;
}
li {
color: red;
}
ul li的权重成了0 0 0 1 +0 0 0 1=0 0 0 2
同时叠加后不会有进位,如0 0 0 10
核心:利用CSS设置好盒子位置。
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,包括边框、外边框、内边距等等。
border可以设置元素的边框。
border-width: 5px;
border-style: solid;
border-color: pink;
边框简写:
/*没有顺序*/
border: 1px solid red;
边框分开写法:
border-top: 1px solid red;
border-bottom: 10px dashed purple;
利用层叠性设置上边框为黄色,其它边框为红色:
border: 1px solid red;
border-top: 1px solid yellow;
/*两个相邻边框合并一起*/
border-collapse: collapse;
一般测量时不量边框
xxxxxxxxxx
/*左内边距*/
padding-left: 20px;
/*上内边距*/
padding-top: 30px;
内边距复合写法(简写):
xxxxxxxxxx
/*一个值时,代表上下左右都是5px*/
padding: 5px;
/*两个值时,代表上下内边距是5,左右是10px*/
padding: 5px 10px;
/*三个值时,代表上是5,左右是10,下是20*/
padding: 5px 10px 20px;
/*四个值时,上是5,右是10,下是20,左是30*,采取顺序针方式*/
padding: 5px 10px 20px 30px;
内边距也影响盒子大小,因此要高度/宽度-2*内边距。
在设置导航栏中,因为字数不同会有不同的浪费空间,因此可以不设置width,通过设置padding来统一间隙。
在小米导航栏中,一般不同text-indent,而用padding。同时要修改宽度。
如果盒子本身没有制定width/height属性,则此时padding不会撑开盒子大小。可以通过继承来实验。
xxxxxxxxxx
/*下外边距为20*/
margin-bottom: 20px;
/*上外边距为20*/
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
上面代码和下面代码等价:
xxxxxxxxxx
margin: 20px;
另外的复合写法于内边距写法相似。
外边距可以让块级盒子水平居中,有两个条件:
1.必须制定宽度
2.盒子左右的外边距都设置为auto
margin: 0 auto;
/*或*/
margin-left: auto;
margin-right: auto;
/*或*/
margin: auto;
行内元素或者是行内块元素水平居中给其父元素添加text-align:center即可。
.head {
text-align: center;
}
父子元素设定外边距,可能会出现塌陷问题。
下面这种解决方案最佳,不会增大盒子。
xxxxxxxxxx
overflow: hidden;
网页元素很多都带有默认的内外边距,各个浏览器默认的也不一样。
万能解决方法:
xxxxxxxxxx
* {
padding: 0;
margin: 0;
}
行内元素为了照顾其兼容性,尽量只设置左右内外边距,不要设置上下内外边距。(就算设置了也不会起效果)。但是转化为块级和行内块元素就可以设置。
网页美工大部分效果图是用ps做的。
主要要记住测量和取色。
--为什么布局用不同盒子?
不同标签有不同的含义,合理的地方用合理的标签。
--为什么用这么多的类名?
给每一个盒子起一个名字,修改样式会非常灵活。后期维护也很方便。
--到底用margin还是padding?
其实可以混用,各有优缺点。但要根据实际情况,总有更简单的方法。
--去掉li的项目符号:
xxxxxxxxxx
list-style: none;
盒子角落带圆角。
xxxxxxxxxx
div {
border-radius: 10px;
}
参数可以是数值也可以是百分比,如50%,指的是宽度和高度的一半。
原理:
制作一个圆形的盒子:
xxxxxxxxxx
div {
width: 10px;
height: 10px;
border-radius: 5px;
}
制作圆角矩形:
xxxxxxxxxx
div {
width: 10px;
height: 6px;
border-radius: 3px;
}
xxxxxxxxxx
/*分别对应左上角,右上角,右下角,左下角*/
border-radius: 1px 2px 3px 4px;
/*分别对应左上角、右下角和右上角、左下角*/
border-radius: 1px 2px;
也可以单独设置:
xxxxxxxxxx
border-top-left-radius: 20px;
参数描述:
xxxxxxxxxx
div {
box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
}
要注意盒子阴影不占空间。
参数描述:
xxxxxxxxxx
div {
text-shadow: 5px 5px 6px rgba(0,0,0,.3);
}
就是盒子怎么摆放顺序。
1.普通流(标准流)
2.浮动
3.定位
也就是行内元素和块内元素按照规定好的方式来排列元素。
有很多布局效果,标准流无法实现,此时可以利用浮动完成布局。
因为浮动可以改变元素标签默认的排列方式。
典型应用:让多个块级元素一行内排列显示。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
语法及参数:
简单解释:加了浮动后会让盒子默认在同一行
xxxxxxxxxx
div {
float: left;
}
1.浮动元素会脱离标准流(脱标),并且不再保留原来的位置。浮动盒子在标准流盒子上面。
2.浮动的元素会一行内显示并且元素顶部对齐。父级宽度装不下时,多出来的会另起一行显示。
3.浮动的元素会具有行内块元素的特性。
任何元素都可以浮动。添加浮动之后会具有和行内块元素相似的性质,可以直接宽度和高度了。块级盒子没有设置宽度,默认宽度和父级一样宽,添加浮动以后,它的大小根据内容来决定。
准则:先设置盒子大小,在设置盒子位置。
第三种最常见
1.浮动和标准流的父盒子搭配。先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。
2.一个元素浮动了,理论上其余的兄弟元素也要浮动。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
思考题:所有的父盒子都必须有高度吗?
答:不一定。比如一篇文章里字数越多,高度越多。不能写死高度。
因为父盒子在很多情况下,不方便给高度,但是子盒子浮动不占位置,最后父级盒子高度为0,就会影响下面的标准流盒子。
就是清除浮动元素造成的影响。
语法:
策略是闭门浮动。
1.额外标签法。也称隔墙法。就是在最后一个浮动的标签后面加一个额外的标签。
xxxxxxxxxx
.clear {
clear: both;
}
<div class="clear"></div>
注意点:
2.父级添加overflow属性
给父级添加overflow属性,属性值为hiddern、auto、scroll
优点:代码简洁
缺点:无法显示溢出的部分
3.父级添加after伪属性
是额外标签法的升级版。
x.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
/*兼容IE6、7*/
*zoom: 1;
}
<div class="box clearfix"></div>
缺点是照顾低版本浏览器。优点是没有增加标签。
4.双伪元素清除浮动
xxxxxxxxxx
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix{
/*IE6\7*/
*zoom: 1;
}
优点是代码更简洁。缺点是照顾低版本浏览器。代表网站有腾讯、小米等。
常见的图片格式:
最简单的切图方式:右击图层->快导出为png。
很多情况下要合并图层导出。选中需要的图层:图层菜单->合并图层(ctrl+e)
切图->文件菜单->导出->存储为web->选择我们要的图片格式->存储
自动将你要的图层进行输出。
我们本次采取结构与样式相分离思想:
建议遵循以下顺序:
导航栏注意点:实际开发中,我们不会直接用链接a而是用li包含链接(li+a)的做法。因为li+a语义更清晰;直接用啊,搜索引擎容易辨别为由堆砌关键期的嫌疑,从而影响网站排名。
✨浮动的盒子不会由外边距浮动的问题
✨行高是可以继承的
1.某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子。
2.某些盒子可以固定在屏幕某个位置
将盒子定在某一个位置。定位=定位模式+边偏移。
1.定位模式
2.边偏移
是元素默认的定位方式,无定位的意思。
静态定位==标准流,没有边偏移。
是相对于它原来的位置而言移动的。原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(即不会动。不会脱标)
移动位置时是相对于它祖先元素来说的。如果没有父元素,则以浏览器为准;如果有父级,但父元素没有定位,还是以浏览器为准;如果有祖先级且祖先元素有定位(相对、绝对、固定定位),则以最近一级带有定位的元素为准。绝对定位不再占用原来的位置(脱标)。
子级是绝对定位的话,父级要用相对定位。
因为父级要保留位置,子级不需要保留位置。
可以固定于浏览器可视区的某个位置。
以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系。不随滚动条滚动。固定位置不占有原来的位置。也是一种特殊的绝定位。
固定定位小技巧:固定在版心右侧位置。
小算法:
1.让固定定位的盒子left:50%,走到浏览器可视区的一半位置。
2.让固定定位的盒子margin-left:版心宽度的一般距离。
可以认为是相对得和固定定位的混合。
利用z-index来控制盒子的前后次序(z轴)。
语法:
数值越大,盒子越靠上。数字后面不加单位。只有定位的盒子才有z-index属性。
1.如果用了绝对定位,则用margin:auto不会起效果,且会让前面设置的margin覆盖无效化。
2.定位的特殊性:
行内元素添加绝对或者是固定定位,可以直接设置高度和宽度;块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
3.脱标的盒子不会触发外边距塌陷。
4.绝对定位(固定定位)会完全压住盒子。而浮动元素只会压住下面标准流的盒子,但是不会压住下面标准流盒子里的文字或图片。
✨注意:如果一个盒子既有left属性也有right属性,则默认会执行left属性。
xxxxxxxxxx
.last {
left: 0;
}
.last {
right: 0;
}
通过盒子模型,清楚知道大部分html标签是一个盒子。通过CSS浮动、定位 可以让每个盒子排列成为网页。一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。
本质:让一个元素在页面中隐藏或者显示出来。
xxxxxxxxxx
div {
/*隐藏属性*/
display: none;
}
隐藏元素后,不再占用位置。可以搭配JS。用的更多一些。
xxxxxxxxxx
div {
/*隐藏属性*/
visibility: hidden;
/*显示属性*/
visibility: visible;
}
隐藏元素后,继续占有原来的位置。
xxxxxxxxxx
div {
/*隐藏超出部分*/
overflow: hidden;
/*一直显示滚动条*/
overflow: scroll;
/*超出才显示滚动条*/
overflow: auto;
/*默认*/
overflow: visible;
}
一般情况下,不希望溢出部分显示出来。但是如果有定位的盒子,慎用overflow:hidden,因为它会隐藏多余的部分。
经过某图层再显示遮罩层:
xxxxxxxxxx
.tudou:hover .mask{
display: block;
}
网页图像过多,服务器会频繁接受和发送请求图片,造成服务器压力过大,这将大大降低页面的加载速度。为了有效减少服务器请求次数,提高页面的加载速度,出现了CSS精灵技术(CSS Sprites、CSS 雪碧)。
主要是针对背景图片使用。就是把多个小背景图片整合到一个图片里。移动背景图片位置,此时可以使用background-position。移动的距离就是目标图片的x和y,一般情况是往上往左移动,所以数值是负值。使用精灵图的时候需要精确测量每个小背景图片的大小和位置。
xxxxxxxxxx
.p{
width: 200px;
height: 200px;
background: url("images/xx.jpg") no-repeat -200px -50px;
}
主要用于显示网页中通用、常用的一些小图标。
字体图标iconfont。展示的是图标,本质属于字体。
轻量级、灵活性、兼容性。
但是不能替代精灵图标,只是对工作中图标部分技术的提升和优化。
如果遇到一些结构和样式比较简单的小图标,就用字体图标;如果比较复杂的就用精灵图标。
icomoon字库:http://icomoon.io
阿里inconfont字库:http://www.iconfont.cn
1.把下载包里面的fonts文件夹放入页面根目录下
2.通过css引入
在CSS样式中全局声明字体。如:
xxxxxxxxxx
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?eyysvl');
src: url('fonts/icomoon.eot?eyysvl#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?eyysvl') format('truetype'),
url('fonts/icomoon.woff?eyysvl') format('woff'),
url('fonts/icomoon.svg?eyysvl#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
3.html标签内添加小图标。
复制到需要的地方。
4.设置字体
xxxxxxxxxx
span{
font-family: 'icomoon';
}
当需要添加新的字体图标时:
做出三角形。
xxxxxxxxxx
.box {
position: absolute;
right: 15px;
top: -10px;
/*宽和高必须是0*/
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
margin: 100px auto;
}
xxxxxxxxxx
<p style="cursor: default">默认样式</p>
<p style="cursor: pointer">小手样式</p>
<p style="cursor: move">移动样式</p>
<p style="cursor: text">文字样式</p>
<p style="cursor: not-allowed">禁止样式</p>
取消轮廓线:
xxxxxxxxxx
input {
outline: none;
}
xxxxxxxxxx
textarea{
resize: none;
}
使用场景:机场用于设置图片或者表单(行内块元素)和文本垂直对齐。只针对行内元素或行内快元素有效。
默认是baseline。
xxxxxxxxxx
img {
vertical-align: bottom;
vertical-align: top;
vertical-align: middle;
}
图片底部会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。
解决方案:推荐
xxxxxxxxxx
img {
vertical-align: bottom;
vertical-align: middle;
}
或者
xxxxxxxxxx
img {
display: block;
}
xxxxxxxxxx
div {
/*默认,自动换行*/
white-space: normal;
/*强制一行内显示*/
white-space: nowrap;
/*溢出部分隐藏*/
overflow: hidden;
/*溢出部分省略号显示*/
text-overflow: ellipsis;
}
xxxxxxxxxx
div {
height: 100px;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: box;
/*限制在一块元素显示文本的行数*/
line-clamp: 5;
/*设置或检索伸缩盒对象的子元素的排列方式*/
box-orient: vertical;
}
让每个盒子margin往左移动-1px正好压住相邻盒子边框。
xxxxxxxxxx
div {
float: left;
height: 100px;
width: 50px;
border: 1px solid red;
/*因为边框是1px*/
margin-left: -1px;
}
鼠标经过某个盒子的时候,提高当前盒子的层级即可。(如果没有定位,要加相对定位;如果有定位,则加z-index)
xxxxxxxxxx
/*第一种*/
ul li:hover {
position: relative;
border: 1px solid black;
}
/*第二钟*/
ul li:hover {
z-index: 1;
border: 1px solid black;
}
可以巧妙运用浮动元素不会压住文字的特性。
页码在页面中间显示:
xxxxxxxxxx
.a {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
border-bottom: 0 solid blue;
border-left: 0 solid green;
}
以此可以制作一个三角形。
或者简写:
xxxxxxxxxx
.a {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
不同浏览器对于某些百年的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化。(CSS reset)
Unicode编码字体:把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。如黑体 \9ED1\4F53
增加了一些新的标签、表单和表单属性。
IE9+以上版本的浏览器才支持。
如:
主要是针对搜索引擎的。移动端也偏向于这些标签。
音频:
1.视频尽量使用mp4格式,兼容性较强。
语法:
xxxxxxxxxx
<video src="文件地址" controls="controls"></video>
常见的属性:
2.音频
常见属性:
xxxxxxxxxx
<audio src="文件地址" autoplay="autoplay" controls="controls"></audio>
3.多媒体标签总结:
下面可以测试:
xxxxxxxxxx
<form action="">
<ul>
<li><input type="submit" value="提交"></li>
</ul>
</form>
如:
xxxxxxxxxx
<form action="">
<input type="text" name="" id="" required="required" placeholder="pink老师" >
<input type="submit" value="提交">
</form>
xxxxxxxxxx
<form action="">
<input type="file" multiple="multiple">
</form>
✨tips:快速生成->input:text;修改样式->input::placeholder {color: pink;}
新增的CSS3样式有兼容性问题,ie9+才支持。移动端支持优于PC端。
新增选择器:属性选择器、结构伪类选择器和伪元素选择器。
xxxxxxxxxx
/*必须是input,但是同时具有value这个属性才会被更改*/
input[value] {
color: pink;
}
<input type="file" value="demo">
xxxxxxxxxx
/*还可以根据属性值来选择*/
input[type=text] {
color: pink;
}
xxxxxxxxxx
/*选择div有class属性且开头是icon*/
div[class^=icon] { }
xxxxxxxxxx
/*选择div有class属性且结尾是icon*/
div[class$=icon] { }
xxxxxxxxxx
/*选择div有class属性且含有icon*/
div[class*=icon] { }
类选择器、属性选择器、伪类选择器,权重都是10。
如:
xxxxxxxxxx
/*选择第一个叫li的孩子*/
ul li:first-child { }
/*选择第n个叫li的孩子*/
ul li:nth-child(4) { }
/*选择所有偶数的孩子*/
ul li:nth-child(even) { }
xxxxxxxxxx
/*选择第一个叫li的孩子*/
ul li:first-of-type { }
/*选择第n个叫li的孩子*/
ul li:nth-of-type(4) { }
/*选择所有偶数的孩子*/
✨注意:nth-of-type执行时,先看类型,再看第几个;而nth-child先看第几个,再看类型。
小结:
可以利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
::before(在元素内部前面插入内容) ::after(在元素内部后面插入内容)
xxxxxxxxxx
div::before {
/*必须有引号*/
content: 'demo';
}
这是行内元素,且必须有content属性,权重是1。
应用1:做一个v
xxxxxxxxxx
div::after {
/*反斜杠转译*/
position: absolute;
top: 10px;
right: 10px;
content: '\e91e';
}
应用2:土豆
xxxxxxxxxx
.tudou:hover::before {
display: block;
}
应用3:伪元素清除浮动
xxxxxxxxxx
.clearfix:before,.clearfix:after {
content: '';
/*转换成块级元素且在一行显示*/
display: table;
}
.clearfix:after {
/*清除浮动核心代码*/
clear:both;
}
为了不撑开盒子大小,可以固定住盒子大小。
xxxxxxxxxx
div {
/*盒子大小默认为width+padding+border*/
box-sizing: content-box;
/*盒子大小为width,前提是padding+border不会超过width*/
box-sizing: border-box;
}
同时可以拓展为:
xxxxxxxxxx
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
转换(transform)可以理解为变形。
xxxxxxxxxx
div {
width: 100px;
height: 250px;
/*分别是x,y轴上移动位置*/
transform: translate(10px, 0px);
}
或者
xxxxxxxxxx
transform:translateX(100px);
若
xxxxxxxxxx
transform:translateX(100px);
transform:translateY(100px);
则只会改变Y,X还是为0。
最大的优点是不会影响其它元素的位置。百分比单位是相对与自身元素的。对行内标签没有效果。
xxxxxxxxxx
/*分别是x的宽度、高度的50%*/
transform:translate(50%, 50%);
让元素在二维平面内顺时针旋转或者逆时针旋转。需要加单位deg。度角为正时,顺时针;负时,逆时针。默认旋转的中心点时元素的中心点。
xxxxxxxxxx
transform: rotate(45deg);
给头像做旋转效果:
xxxxxxxxxx
img {
width: 100px;
/*过渡写到本身上,给谁过渡给谁加*/
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
我们可以设置元素转换的中心点。transform-origin:x y;默认是元素的中心点(50% 50%)。也可以是:
xxxxxxxxxx
/*左下角*/
transform-origin: left bottom;
/*x、y像素*/
transform-origin: 50px 50px;
可以控制元素放大还是缩小。
优势之处是:不会影响其它盒子,而且还可以修改中心点。
xxxxxxxxxx
/*里面写的数字不跟单位,就是倍数的意思,1就是本身大小*/
transform: scale(1, 2);
/*修改成一样的倍数*/
transform: scale(2);
/*缩小*/
transform: scale(0.5);
做出图片放大特效:
xxxxxxxxxx
div{
float: left;
overflow: hidden;
margin: 100px 200px;
}
img {
transition: all 0.5s;
}
div img:hover {
transform: scale(1.2);
}
<div>
<a href="#"><img src="xxx.jpg" alt=""></a>
</div>
中间用空格隔开,如:
xxxxxxxxxx
transform: translate(50px, 50px) rotate(180deg);
有顺序问题。先写位移,再写旋转和缩放。
可通过设置多个节点控制一个或一组动画。分为两步:先定义动画;在使用动画。
1.用keyframes定义动画(类似定义类选择器)
一打开页面自动运行
xxxxxxxxxx
/*move是名字,自己定义的*/
@keyframes move {
/*开始状态*/
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
div {
width: 250px;
height: 250px;
background-color: pink;
/*调用动画*/
animation-name: move;
/*持续时间*/
animation-duration: 2s;
}
所谓动画序列:
上面动画等价于:
xxxxxxxxxx
@keyframes move {
/*开始状态*/
from {
transform: translateX(0px);
}
to {
transform: translateX(1000px);
}
}
做出四角游动特效:
xxxxxxxxxx
@keyframes move {
0% {
transform: translate(0,0);
}
/*百分比要求整数,含义是总的时间的划分,如有10s的话,0%到25%就是2.5s*/
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
如:(前两个不能省略)
xxxxxxxxxx
animation: move 2s linear 0s 1 alternate forwards;
补充:
xxxxxxxxxx
/*steps意思是分几步来完成动画*/
animation: move 2s steps(5) alternate forwards;
奔跑的小熊案例:
xxxxxxxxxx
body {
background-color: #ccc;
}
div {
position: absolute;
width: 200px;
height: 100px;
background: url(media/bear.png) no-repeat;
/* 我们元素可以添加多个动画, 用逗号分隔 */
animation: bear .4s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
/* margin-left: -100px; */
transform: translateX(-50%);
}
}
记住z轴往外面是正值,往里面是负值。垂直屏幕。
transform:translateZ()一般用px单位。是沿着Z轴移动。记住xyz不能省略,如果没有就写0.
xxxxxxxxxx
transform: translateZ(100px);
transform: translateX(100px) translateY(200px) translateZ(100px);
/*简写写法*/
transform: translate3d(100px, 200px, 100px);
如果需要在网页产生3D立体效果,就需要透视。透视也称为视距,就是人的眼睛到屏幕的距离。距离视觉点越近在电脑平面成像越大。单位是像素。
透视写在被观察元素的父盒子上面。
概念图:
xxxxxxxxxx
body {
perspective: 300px;
}
div {
transition: all 0.5s;
}
div:hover {
transform: rotateX(180deg);
}
左手定则:大拇指指向x轴、y轴、z轴正方向,四指为旋转方向。
xxxxxxxxxx
/*表示y轴旋转,xz不旋转,旋转45度*/
transform: rotate3d(0,1,0,45deg);
/*相当于向量做加法,结果是沿着对角线旋转*/
transform: rotate3d(1,1,0,45deg);
控制子元素是否开启三位立体环境。写给父级,影响的是子盒子。
xxxxxxxxxx
/*默认不开启3d立体空间*/
transform-style: flat;
/*子元素开启立体空间*/
transform-style: preserve-3d;
翻转表白盒子案例:
xxxxxxxxxx
<style>
body {
perspective: 500px;
}
.box {
position: relative;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: 200px auto;
transition: all 1s;
}
.front, .back {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
line-height: 200px;
color: white;
border-radius: 50%;
font-size: 20px;
text-align: center;
}
.front {
background-color: pink;
}
.back {
background-color: skyblue;
transform: rotateY(180deg);
}
.box:hover {
transform: rotateY(-180deg);
}
</style>
xxxxxxxxxx
<body>
<div class="box">
<div class="front">我是ZJX</div>
<div class="back">我在CUMT等你</div>
</div>
</body>
注意:如果写多个样式,要先写移动再写其它样式。✨但是也有例外,看需求,如果旋转的话,xyz轴也会跟着一起旋转的。
xxxxxxxxxx
transform: translateY(100px) rotateY(-90deg);
CSS3滤镜filter:将元素变模糊或颜色便宜
xxxxxxxxxx
.img {
/*数值越大越模糊*/
filter: blur(5px);
}
CSS3 calc函数:在声明CSS属性时可以执行一些计算。
xxxxxxxxxx
div {
width: calc(100% - 30px);
}
可以从一个状态慢慢过渡到另一个状态。使页面更好看。给谁过渡给谁加。
xxxxxxxxxx
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
div {
width: 100px;
height: 250px;
background-color: pink;
transition: width .5s ease-in .1s;
}
div:hover {
width: 200px;
}
如果要改多个属性:中间加逗号
xxxxxxxxxx
transition: width .5s ease-in .1s, height .5s ease 1s;
如果要让属性都发生变化:
xxxxxxxxxx
transition: all .5s;
是HTML5本身+CSS3+JavaScript
开发工具
VScode 、Photoshop(fw)、主流浏览器(以Chrome浏览器为主)
技术栈
很多样式和结构在很多页面都会出现,比如页面的头部和尾部,大部分页面都有。可以把这些结构和样式单独作为一个模块,然后重复使用。
先切成png图片,再通过第三方网站转化成ico图标,如http://www.bitbug.net。在
里引入。SEO汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。从而提高网站的知名度。
TDK=title+description+keyword
titile:建议网站名 - 网站的介绍(尽量不超过30个字)
description:简要说明我们网站主要是做声明的。
keyword:是页面关键词,是搜索引擎的关注点之一。
logo 里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要。
h1 里面再放一个链接,可以返回首页的,把 logo 的背景图片给链接即可。
为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来。
最后给链接一个 title 属性,这样鼠标放到 logo 上就可以看到提示文字了。
一般情况下,a如果包含有宽度的盒子,a需要转为块级元素。
也称为主机,也是一台计算机。一般是指网站服务器。服务器在网络位置不同,可以分为本地服务器和远程服务器。
就是把自己的电脑作为服务器,同一个局域网内的电脑可以访问自己的电脑网站。利用ajax。
通常是别的公司为我们提供一台电脑。可以上传后通过域名访问。
一般服务器是收费的,如阿里云。
推荐免费的远程服务器(免费空间)http://free.3v.do
移动端兼容性很好。
总结:移动端浏览器我们主要对webkit内核进行兼容;移动端针对手机端开发。
视口就是浏览器显示页面内容的屏幕区域。可以分为布局视口、视觉视口和理想视口。
解决早期PC端页面在手机上显示的问题。只不过元素看上去很小,需要手动缩放页面。
就是用户当前看到的区域。
使网站在移动端有理想的浏览。需要手动添加meta视口标签贴纸浏览器操作。目的是使布局视口的宽度和理想视口的宽度一致。
标准的viewport设置:
xxxxxxxxxx
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
物流像素点指的是屏幕显示的最小颗粒,是物理正是存在的。开发的时候1px不一定对于1个物理像素。在PC端1px等于1个物理像素点,但是移动端不同。一个px能显示的物理像素点个数被称为物理像素比或屏幕像素比。
对于一张50px*50px的图片,在收集Retina屏中打开,会按照物流像素比放大倍数,造成图片模糊。因此要刻意准备一张多倍图然后在css中进行缩放,在移动端放大后就不会再模糊。
xxxxxxxxxx
background: url("image1.jpg") no-repeat;
/*对背景图片进行缩放*/
background-size: 500px 200px;
/*百分比是相对于父盒子来说的*/
background-size: 50%;
/*使背景图片一直等比例拉伸直到完全盖住盒子*/
background-size: cover;
/*缩放/拉到短边*/
background-size: contain;
✨多倍图切图可以使用cutterman插件
单独制作移动端页面(主流)、响应式页面兼容移动端(其次)
通过判断设备来打开相应的页面。
通过判断屏幕宽度来改变样式,以适应不同终端。缺点是制作麻烦,需要花很大距离去调兼容性问题。
移动端初始化推荐。http://necolas.github.io/normalize.css
xxxxxxxxxx
/*CSS3盒子模型*/
box-sizing: border-box;
box-sizing: border-box;
/*清除点击高亮*/
tap-highlight-color: transparent;
/*清除外观效果*/
appearance: none;
/*禁止长按页面时的弹出菜单*/
img, a {
touch-callout: none;
}
也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行缩放,不受固定像素的限制,内容向两侧填充。在web移动端开发比较常见。可以通过max-width和min-width来限制盒子拉伸幅度。
如:
xxxxxxxxxx
body {
width: 100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-size: 14px;
font-family: system, Helvetica, sans-serif;
color: #666;
line-height: 1.5;
}
精灵图的缩放问题:
需要先将精灵图等比例缩放;然后再测量坐标;在background-size也要缩放,注意这里缩放的值是缩放后精灵图的宽和高。
传统布局:兼容性好;布局繁琐;局限性。flex弹性布局:操作简单,布局非常简单,移动端应用广泛;PC端支持情况差;IE11以下不支持。
flex是flexible Box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性,任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。
采用Flex布局的元素,成为Flex容器,简称容器。它的所有子元素自动成为容器成员,成为Flex项目,简称项目。子容器可以横向排列也可以纵向排列。
因此Flex的布局原理就是通过给父盒子添加Flex属性,来控制子盒子的位置和排列方式。
以下由6个属性是对父元素设置的
主轴和侧轴:默认主轴方向就是x轴方向,水平向右;默认侧轴方向就是y轴方向,水平向下。
xxxxxxxxxx
div {
display: flex;
width: 800px;
height: 350px;
/*默认的主轴是x轴,我们的元素是跟着主轴排列的*/
flex-direction: row;
/*翻转排列*/
flex-direction: row-reverse;
/*将主轴设置为y轴*/
flex-direction: column;
}
要确定好主轴是哪一个。
xxxxxxxxxx
div {
display: flex;
width: 800px;
height: 350px;
flex-direction: row;
/*默认从头部对齐*/
justify-content: flex-start;
/*右边对齐*/
justify-content: flex-end;
/*居中对齐*/
justify-content: center;
/*平均分配剩余空间*/
justify-content: space-around;
/*先两边贴边,再分配剩余空间*/
justify-content: space-between;
}
默认情况下,项目都排列在一行上,装不下的话会缩小子元素的宽度。
xxxxxxxxxx
div {
display: flex;
width: 800px;
height: 350px;
/*默认不换行*/
flex-wrap: nowrap;
/*换行*/
flex-wrap: wrap;
}
xxxxxxxxxx
div {
display: flex;
width: 800px;
height: 350px;
/*默认主轴是x轴*/
justify-content: center;
/*我们需要一个侧轴居中*/
align-items: center;
/*沿着侧轴方向拉伸,前提是没有高度*/
align-items: stretch;
}
✨千万要分辨好主轴和侧轴的方向。
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行),在单行下是没有效果的。
xxxxxxxxxx
div {
display: flex;
width: 800px;
height: 350px;
/*换行*/
flex-wrap: wrap;
/*默认在侧轴的头部开始排列*/
align-content: flex-start;
/*在侧轴中间显示*/
align-content: center;
/*子项在侧轴先分布在两头,再评分剩余空间*/
align-content: space-between;
/*子项再侧轴平分剩余空间*/
align-content: space-around;
}
1.align-items适合于当行情况下,只有上对齐、下对齐、居中和拉伸
2.align-content适合于换行(多行)的情况下,可以设置上对齐、居中、拉伸以及平均分配剩余空间等属性值。
3.总结就是单行找align-items,多行找align-content
xxxxxxxxxx
div {
display: flex;
width: 800px;
height: 350px;
flex-direction: column;
flex-wrap: wrap;
/*上面代码等价于*/
flex-flow: row wrap;
}
就是从剩余空间去分配份数。
比如设置移动端导航栏:中间占一份
xxxxxxxxxx
section div:nth-child(1) {
/*设置宽高*/
}
section div:nth-child(2) {
flex: 1;
}
section div:nth-child(3) {
/*设置宽高*/
}
又比如:
xxxxxxxxxx
section div:nth-child(1) {
/*占四分之一*/
flex: 1;
}
section div:nth-child(2) {
/*站二分之一*/
flex: 2;
}
section div:nth-child(3) {
/*占四分之一*/
flex: 1;
}
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
xxxxxxxxxx
span:nth-child(2) {
align-self: flex-end;
}
可以定义项目的先后排列顺序,并且不需要改动标签。和z-index不一样。
xxxxxxxxxx
span:nth-child(2) {
/*默认是0,将排到前面*/
order: -1;
}
使用flex来制作。
xxxxxxxxxx
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
/*隐藏水平滚动条*/
overflow-x: hidden;
/*取消点击高亮*/
tap-highlight-color: transparent;
}
✨注意固定定位的盒子跟父级没有关系,它是以屏幕为准,因此需要指定max-width;有了绝对定位后,margin会失效;flex里不会出现外边距合并问题。
快速修改图标:
xxxxxxxxxx
.local-nav li [class^="local-nav-icon"] {
width: 32px;
height: 32px;
margin-top: 8px;
background: url(../images/localnav_bg.png) no-repeat 0 0;
background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2 {
background-position: 0 -32px;
}
背景颜色渐变:(线性)
xxxxxxxxxx
/*背景渐变必须添加浏览器私有前缀*/
background: linear-gradient(left, red, blue);
/*默认从下往下*/
background: linear-gradient(red, blue);
/*或者从左上往右下*/
background: linear-gradient(top left, red, blue);
flex还可以写%:
xxxxxxxxxx
/*是相对于父级来说的*/
flex: 20%;
rem(root em)是一个单位,类似于em,em是相对于父元素的字体大小来说的。不同的是rem的基准是相对于html元素的字体大小。因此可以通过修改html字体大小来改变里面元素的大小。
如:
xxxxxxxxxx
html {
font-size: 14px;
}
div {
height: 20rem;
width: 20rem;
background-color: pink;
}
媒体查询(Media Query)是CSS3新语法。
使用@media查询,可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式。当重置浏览器大小时,页面也会根据浏览器的宽度和高度重新渲染页面。
xxxxxxxxxx
/*这句话的意思时在屏幕上,且最大宽度是800像素*/
/*媒体查询可以根据不同的屏幕尺寸来改变不同的样式*/
@media screen and (max-width: 800px){
body {
background-color: pink;
}
}
@media screen and (max-width: 500px){
body {
background-color: green;
}
}
@media 参数1 参数2 (参数3){样式表}
参数1是媒体类型:all(所有设备)、print(用于打印机)、screen(用于电脑和手机屏幕)
参数2是关键字:and、not、only
参数3是媒体特征,必须有小括号:如width、min-width、max-width
如根据不同的宽度来改变页面背景颜色:
xxxxxxxxxx
/*媒体查询一般按照从小到大或者从大到小的顺序来写*/
@media screen and (max-width: 539px){
body {
background-color: pink;
}
}
@media screen and (min-width: 540px) and (max-width: 969px){
body {
background-color: green;
}
}
@media screen and (min-width: 970px) {
body {
background-color: blue;
}
}
and和px不能省略。
针对不同的媒体使用不同的样式表。
xxxxxxxxxx
<!-- 引入资源就是针对不同的屏幕尺寸调用不同的css文件-->
<link rel="stylesheet" href="1-2.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="1-3.css" media="screen and (min-width:640px)">
CSS弊端:没有变量,无法计算;代码没有逻辑性,冗余度过高;不方便维护,不利于复用。
Less(Leaner Style Sheets),是一门CSS扩展语言,也称为CSS预处理器。为CSS加入程序式语言的特性。引入了变量、Mixin、运算以及函数等功能,大大简化了CSS的编写,降低了CSS的维护成本。
官方中文:http://lesscss.cn/
常见的CSS预处理器:Sass、Less、Stylus
总结:Less是一门CSS预处理语言,扩展了CSS的动态特性。
需要新建一个后缀名为less的文件,在这个less文件里面书写less语句。
1. Less变量
变量是指没有固定的值,可以改变的。必须以@为前缀;不能包含特殊字符;不能以数字开头;大小写敏感。
xxxxxxxxxx
//定义一个粉色的变量
@color1: pink;
body {
background-color: @color1;
}
div {
background-color: @color1;
}
2. Less编译
Less包含一套自定义的与语法以及一个解析器,用户定义的样式的规则最终会通过解析器,编译生成对应的CSS文件。因此我们需要编译less文件。
在webstorm中需要先安装node.js,然后用npm安装插件。
3. Less嵌套
选择器的嵌套写法如:(在xxx.less文件)
xxxxxxxxxx
div {
width: 200px;
height: 200px;
background-color: pink;
a {
color: red;
}
}
如果遇到伪类、交集、伪元素选择器(应该加&)。内层选择器的前面没有&复合,则它被解析为父选择器的后代;如果有&符号,它就被解析为父元素自身或父元素的伪类。
如:(在xxx.less文件)
xxxxxxxxxx
div {
width: 200px;
height: 200px;
background-color: pink;
&::after {
color: red;
}
&:hover {
color: red;
}
}
4. Less运算
任何颜色、数字或变量都可以参与运算。
如:(在xxx.less文件)
xxxxxxxxxx
//实现加法运算
@border: 5px + 5;
div {
//减法
width: 200px - 50;
//乘法
height: 200px * 2;
border: @border solid red;
}
img {
//除法
width: 82 / 64rem;
}
✨注意运算符左右有空格;两个数参与运算,如果只有一个数有单位,则最后的结果以这个单位为准;如果两个数参与运算且都有单位,单位不一样,最后的结果以第一个单位为准。
🎀现在是2021年,less已经进入4.0时代,除法两边需要加括号了。
颜色也可以参与运算:(在xxx.less文件)
xxxxxxxxxx
background-color: #666666 - #222222;
按照设计稿与设备宽度的比例,动态计算并设置htnl根标签的font-size大小(媒体查询);CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值。
第一种是less、媒体查询、rem;第二钟是flesible.js、rem。
1.第一种:一般情况以一套或两套效果图适应大部分的屏幕,牺牲一些效果。
动态设置html标签font-size大小:
① 假设设计稿是750px
② 假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
③ 每一份作为html字体大小,这里就是50px
④ 那么在320px设备的时候,字体大小为320/15 就是 21.33px
⑤ 用我们页面元素的大小 除以不同的 html 字体大小会发现他们比例还是相同的
⑥ 比如我们以 750为标准设计稿
⑦ 一个100*100像素的页面元素 在 750屏幕下, 就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1
⑧ 320屏幕下, html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1
⑨ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
元素大小取值方法:
① 最后的公式: 页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
② 屏幕宽度/划分的份数 就是 html font-size 的大小
③ 或者:页面元素的rem值 = 页面元素值(px) / html font-size 字体大小
个人笔记:划分的份数不会改变最后元素呈现的大小,之所以需要这个值,只是在需要改变html字体大小时,能够等比例改变元素的大小。可用数学公式推导。
2.第二种:简介高效的rem适配方案flexible.js
手机淘宝团队出的简洁高效移动端适配库我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理。它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。 我们要做的,就是确定好我们当前设备的html 文字大小就可以了。比如当前设计稿是 750px,那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以。里面页面元素rem值: 页面元素的px 值 / 75。剩余的,让flexible.js来去算
下载地址:https://github.com/amfe/lib-flexible
xxxxxxxxxx
@import "common";
xxxxxxxxxx
body {
min-width: 320px;
//body的元素大小=宽度,因此根据公式body的rem=份数
width: 15rem;
margin: 0 auto;
//父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。
//父元素设置line-height:150%是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。
line-height: 1.5;
font-family: Arial, Helvetica;
}
xxxxxxxxxx
.search-content {
//可以直接写,因为最后是跟着html的font-size大小变的,这里全部按照设计稿的宽度运算。
position: fixed;
top: 0;
width: 15rem;
height: (78rem / 50);
}
xxxxxxxxxx
.search {
flex: 1;
input {
//去掉蓝色边框
outline: none;
width: 100%;
border: 0;
height: 66rem / @baseFont;
border-radius: 33rem / @baseFont;
background-color:#FFF2CC;
margin-top: 12rem / @baseFont;
font-size: 25rem / @baseFont;
padding-left: 55rem / @baseFont;
color: #757575;
}
}
记住行内元素不能左右居中对齐,需要转换成块级元素。
xxxxxxxxxx
<!--引入js文件-->
<script src="flexible.js"></script>
webstorm插件PXTOREM,VSCODE插件cssrem
由于js里设定了根据当前屏幕大小来设定font-size,因此为了限定最大为750px,我们需要在css里添加以下代码:
xxxxxxxxxx
@media screen and (min-width: 750px){
html {
font-size: 75px!important;
}
}
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。
响应式需要一个父级做为布局容器,来配合子元素来实现变化效果。原理是通过媒体查询来改变不同屏幕下的布局容器的大小,在改变里面子元素的排列方式和大小。
平时我们的响应式尺寸划分:
响应式导航案例
xxxxxxxxxx
.container {
width: 750px;
margin: 0 auto;
}
.container ul li {
float: left;
width: 93.75px;
height: 30px;
background-color: green;
}
/*屏幕缩放到767px以下时,改变容器布局*/
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
.container ul li {
width: 33.33%;
}
}
是目前最受欢迎的前端框架。它是基于HTML、CSS和JavaScript的,结构灵活,使得Web开发更加快捷。
推荐使用:http://bootstrap.css88.com/
框架含义:顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
优点:
1.标准化的html+css编码规范
2.提供了一套简介、直观、强悍的组件
3.有自己的生态圈,不断的更新迭代
4.让开发更简单,提高了开发的效率
目前只考虑它的样式表的使用。分四步曲。
1.创建文件夹结构
2.创建html骨架结构
xxxxxxxxxx
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
条件注释定义只有 Internet Explorer 执行的 HTML 标签。
xxxxxxxxxx
<!--推荐注释,如果浏览器小于IE9,则会引入这两个文件,否则不引入-->
<!--[if lt IE 9]>
<!--解决ie9以下浏览器对html新标签的不识别问题-->
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对css3 Media Query的不识别问题 -->
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
xxxxxxxxxx
<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
3.引入相关样式文件
可以下载后引入,或者直接引入官方的:
xxxxxxxxxx
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-olOxEXxDwd20BlATUibkEnjPN3sVq2YWmYOnsMYutq7X8YcUdD6y/1I+f+ZOq/47" crossorigin="anonymous">
4.书写内容
可以直接拿Bootstrap预先定义好的样式来使用;或者修改Bootstrap原来的样式,注意权重问题。
如:
xxxxxxxxxx
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success logo">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
之后可以在其基础上修改:(若修改失败,考虑权重问题)
xxxxxxxxxx
.logo {
width: 200px;
height: 300px;
}
Bootstrap已经定义好了容器类,叫.container。
英文grid system,它是指将网页布局划分为等宽的列,然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式、移动设备优先的流失栅格系统,随着屏幕或视口尺寸的增加,系统会自动分为最多12列。
和rem划分屏幕的区别在于,bootstrap只划分内容部分(container),而rem划分整个屏幕。
行(row)必须放到container布局容器里面;实现列的平均划分时,需要给列添加类前缀。
xxxxxxxxxx
<div class="container">
<!--刚好加起来为12份,占满容器的整行-->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
</div>
如列数加起来小于12,则占不满;大于12则会另起一行来显示。
可以同时为一列指定多个设备的类名,以便划分不同的份数
如:
xxxxxxxxxx
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-3 col-sm-1">1</div>
<div class="col-lg-2 col-md-3 col-sm-1">2</div>
<div class="col-lg-2 col-md-3 col-sm-1">3</div>
<div class="col-lg-7 col-md-3 col-sm-1">4</div>
</div>
</div>
xxxxxxxxxx
<div class="container">
<div class="row">
<div class="col-lg-2">
<!--列嵌套最好加一个row,这样可以取消父元素的padding值,而且高度会自动继承父元素-->
<div class="row">
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
</div>
</div>
</div>
</div>
让两个盒子左右两侧对齐:
xxxxxxxxxx
<div class="container">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4 offset-md-4">2</div>
</div>
</div>
让一个盒子居中对齐:
xxxxxxxxxx
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">1</div>
</div>
</div>
xxxxxxxxxx
<div class="container">
<div class="row">
<!--order表示权重,越小越靠前,已废弃push和pull-->
<div class="col-md-8 order-8">1</div>
<div class="col-md-4 order-1">2</div>
</div>
</div>
可以利用以上的用法来展示和隐藏页面内容。
① 屏幕缩放发现 中屏幕 和 大屏幕布局 是一致的。 因此我们列 定义为 col-md- 就可以了, md 是大于等于 970 以上的
② 屏幕缩放发现 小屏幕 布局发生变化,因此我们需要为 小屏幕根据需求改变布局
③ 屏幕缩放发现 超小屏幕布局又发生变化,因此我们需要为 超小屏幕根据需求改变布局
④ 策略:我们先布局 md以上的 pc端布局,最后根据实际需求在修改 小屏幕 和 超小屏幕的 特殊布局
xxxxxxxxxx
@media screen and (min-width: 1280px){
.container {
width: 1280px;
}
}
xxxxxxxxxx
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
用i标签引入:
xxxxxxxxxx
<i class="bi bi-emoji-smile-fill"></i>
自己修改样式:
xxxxxxxxxx
.bi-emoji-smile-fill {
padding-right: 10px;
}
max-width:100%是,父级元素长度大于自身图片宽度时,用自身宽度;小于自身宽度时用父级宽度。
logo的响应式:(V3.0)
xxxxxxxxxx
/* 2. 我们事先准备好一个盒子 在logo里面,它平时是隐藏起来的,只有在超小屏幕下显示 */
.logo span {
display: block;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 18px;
text-align: center;
}
xxxxxxxxxx
<img src="images/logo.png" alt="" class="hidden-xs">
<span class="visible-xs">阿里百秀</span>
导航栏的响应式:
xxxxxxxxxx
/* 当我们进入 小屏幕 还有 超小屏幕的时候 我们 nav 里面的li 浮动起来 并且宽度为 20% */
@media screen and (max-width: 991px) {
.nav li {
float: left;
width: 20%;
}
article {
margin-top: 10px;
}
}
xxxxxxxxxx
/* 当我们进入 超小屏幕的时候 我们 nav 文字会变成14px */
@media screen and (max-width: 767px) {
.nav li a {
font-size: 14px;
padding-left: 3px;
}
}
建议: 我们选取一种主要技术选型, 其他技术做为辅助,这种混合技术开
flex布局的新趋向:rem --> vw和vh。
vw和vh
vw和vh是相对单位。vw是viewport width,vh是viewport height。1vw=1/100视口宽度,1vh=1/100视口高度。PC端不要用。
和百分比的区别:百分比是相对于父元素来说的,而vw和vh总是针对于当前视口来说的。
xxxxxxxxxx
div {
width: 50vw;
height: 50vh;
background-color: #333;
}
按照375像素的设计稿来说,要放入一个50*50像素的盒子,则宽度=50/3.75vw.
开发中基本只是用vw,因为本质是根据视口的宽度来等比缩放页面元素高度和宽度的,所以不用管vh。
2021流行的切图软件:像素大厨
查兼容性的网站:https://caniuse.com/
下载别人网站字体图标:检查元素->iconfont样式表->负值字体URL到浏览器地址栏
可以用https://www.mockplus.cn/来切图使用,下载ps插件。
官网地址:https://www.swiper.com.cn/
用于制作轮播图。
1.下载需要的css和js文件 html页面中 引入相关文件
2.官网找到类似案例,复制html结构,css样式 js 语法
3.根据需求定制修改模块