客户端
HTML(超文本标记语言):(英文全称: Hypertext Markup Language),通过将一段内容定义为标题、段落或者图像等,从而让该内容具有结构以及含义,用于定义文档结构。
W3C:万维网联盟(英文全称: World Wide web Consortium),它是Web最具权威和影响力的技术机构。
**CSS3:**层叠样式表(也简称:级联),(英文全称:Cassading Style Sheets),是一种是用字体,颜色等格式化内容的外观的表示型语言(“结构 样式 行为”)。
<h3>编程入门基础班</h3>
(开始标记) 元素内容 (结束标记)
在一个标签里面,标签开始的时候如果出现 = 号的话,= 号左边的是属性名右边是属性值。
<!DOCTYPE html>:文档类型定义。
"UTF-8":万国码,字符编码集(为获得更好的地域兼容性、避免乱码,该代码作为head的第一个子元素)。
<title>:表示写在在标签页的开头的内容。
API简称:应用程序接口。
引入CSS(Cassading Style Sheets)样式表:
分为以下两种:
1.<style></style>:内部样式表 内联。
2.<link rel="stylesheet" href="引入路径">:外联样式表 外联。
引入重入文件:
由于每个浏览器对同一个标签默认样式不同,即同一标签在不同浏览器中样式不一样。
是为了解决兼容性,统一标签样式。
CSS语法由选择器和一条到多条声明组成,组成成规则集。
/* div {
width: 100px;
height: 100px;
border: 1px solid pink;
border-radius: 50%;
} */
语义化化结构标记:
1.<header>:用于表示也面或某个区域的头部。
2.<nav>:由于表示导航栏。
3.<aside>:用于表示跟周围主题相关的附加信息。
4.<article>:用于表示文章或其他可独立页面存在的内容。
5.<section>:用于表示一个整体的一部分主图。
6.<footer>:用于表示页面或某个区域的脚注。
文本元素:
<h1>-<h6>:表示1级标题-6级标题。
<p>:段落。p标签不能包div h1
在检查器中查看,浏览器是否有添加东西,导致无法选中标签
<strong>:重要的文本。(表示加粗文本) <b>:应突出显示文本。(表示加粗文本) <i>:应区别对待的文本。
<blockquote>:整段引用。 <cite>:对参考文献的引用。 <q>:小段引用。 <abbr>:对缩写词的引用。
<abbr title="全称">简写</abbr>
<abbr title="hypertext markup language">HTML</abbr>
<em>:强调对应的文本。
<span>:跨越多个字符。
<a>:超链接。
代码格式:<a href="打开的路径" target="从新标签页打开"></a>
href:链接目标,页面地址(路径),锚点,功能连接。
target:点击后在哪里打开新文档。
内容位置:显示到页面的链接文字。
a标签设置鼠标手势: cursor:pointer;
<hr>:水平线
<sub> 下标</sub>
<sup>上标</sup>
<q>引用</q>
<bdo dir="rtl">使得段落反向显示
<del></del>删除字符 文字删除线
<ins>red</ins>文字下划线
<acronym>大写
乱数徦文:
lorem
选择器:
-
通配符选择器:匹配到当前文档所有元素。~~~~
* { margin: 0; padding: 0; }
-
属性选择器: [属性=值]。
[type=text] { border: 10px solid red; }
-
伪类选择器 :
/* a 未访问 */ a:link { color: #000; } /* 访问后 */ a:visited { color: #ccc; } /* 移入 */ a:hover { color: red; } /* 点击时 */ a:active { font-size: 30px; } 如: p:nth-child(n):表示如果第n个是p则运用该样式。 p:nth-of-type(n):表示第n个p运用该样式。
-
伪元素:
- 伪选择器不是直接对应HTML中定义的元素,而是向选择器增加特殊的效果
/* 伪元素 CSS3 区分伪类伪元素,将伪元素改为 :: :first-letter 第一个字 :first-line 第一行 */ a::before{ content: "之前"; } a::after{ content: "之后"; } p::first-line{} 匹配文字内容的首字母 p:first-letter{ font-size: 50px; }
-
组合 || 并集选择器:
h1, .box, div, #testId, h5, h6{ font-weight: normal; }
-
子级选择器:
ul>li{ border: 1px solid; }
-
元素选择器:元素选择器会应用到当前文档中所有该元素。
h1{ color:yellow; } //全都内容都会运用到yellow这个元素。 <h1>爷爷</h1> <h1>奶奶</h1> <h1>爸爸</h1> <h1>妈妈</h1> <h1>姐姐</h1>
-
类选择器:类选择器会应用到所有拥有该类的元素。
.testClass{ border: 1px solid #000; } <a href="#" class="testClass">click me</a>
-
后代选择器:
ul li{ font-size: 50px; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <ol> <li>9</li> <li>8</li> <li>7</li> </ol> </ul>
-
ID选择器:ID选择器具有唯一性,不能具有同一ID。
border-left: 5px solid black; } <h4 id="demo">来了来了</h4>
11.层次选择器
1.兄弟选择器
如:header+div{} 选中的是离header最近的div
格式:元素A+元素B{声明块}
表示选中紧挨着header元素的兄弟元素div。即选中div元素,它的前一个元素必须是header
2,通用选择器
如:header~div{} 选中header元素后的所有兄弟元素div
格式:元素A~元素B{声明块}
:nth-child(-n+3):选中前m个标签进行样式的添加,【一般写-n】
:not(:nth-child(4)) :not(:nth-child(2)){} 除了2和4其它都变
12
如div.box找的是所有类名为box的div。
颜色,长度单位:
颜色三种写法:
h1 {
color: red;
/* 十六进制 */
color: #fff;
/* rgb写法 */
color: rgb(255, 255, 255);
}
长度单位:
1.绝对长度:px;
2.相对长度:%;[占位符
3.em(当前元素字体大小);
4.rem(相对于根元素的大小);
声明冲突:
相同的属性,不同的属性值(规则之间)
层叠:
1,先比较优先级 2,再比较特殊性 3,特殊性相同比较源次序
在比较特殊性时,每一个冲突的声明会生成4个数字分组(a,b,c,d),以比较特殊性。a越大,特殊性越高。若a相同,比较b。b越大,特殊性越高。
继承性:
子级会自动拥有某些父类CSS样式【In hereted from…】
一般是文本类样式
display
1 none:将元素隐藏并且不保留其物理空间
2 inline:指定元素为行级元素
3 block:块级元素
4 inlin-block:行内块元素 display:inlin-block;使元素变为行类块元素。可以并列排放,并且可以设置行高。【基线对齐】
盒模型
1,margin:与其它盒子距离【值可以为负值】,垂直方向两个盒模型外边距取最大值
2,padding:边框与内容之间的距离,取值不可以为负值
padding:10px;四周变化 padding:10px,20px;上下,左右
padding:10px,20px,30px;上 左右,下 padding:10px,20px,30px,40px;上右下左
3,top:上,right:右,left:左,bottom:下。可用来单独设置
4,border:1px solid red是对边框进行样式设置。{上下左右的边框都可以重设}
像素颜色可省略,像素默认3px,边框颜色继承父级文本样式。
border-width border-style border-color
当div未设置任何值时,其width:auto; height:auto;
常规流盒模块居中:margin:auto;
因为常规流水平方向上的尺寸必须等于包含块的宽度【当两边margin给固定值时,右边为margin:auto;】
w3c标准
元素自己大小=width+padding+border
占用页面大小=width+padding+border+margin
IE浏览器
总的元素宽度等于定义内容的宽度。其padding与border不变,就可以看出其在IE浏览器的内容大小有所变化。
box-sizing:border-box
当在给header设置宽度100%时,想要给内容或盒子加上内外边距,但此时会出现横向混动条。此时加上box-sizing:border-box;即可消除混动条,将盒子设置为在IE浏览器状态下的尺寸大小。
子盒子
内容盒:content
填充盒:padding+content
边框盒:border+padding+content
注:1内容溢出,需要将超出部分隐藏,则隐藏掉填充盒以外的内容
2 背景色的渲染区域是边框盒
overflow:hidden;内容溢出,需要超出部分隐藏
overflow:visible;默认值,超出部分可见
overflow:scroll;xy轴方向都会出现滚动条
overflow:auto;xy轴,哪个方向有溢出,哪个方向就会出现滚动条
overflow-x;设置x轴溢出显示方式
overflow-y;设置y轴溢出显示方式
设置 单行文本:溢出省略号(一般用于aside,相关文章)
overflow:hidden;
text-overflow:elipsis;
white-space:nowrap;(不换行)
三种定位体系
常规流**/文档流/标准流**:在没有css的干预下,块级元素独占一行,宽高可设,行类元素并排显示,宽高自动。
行类元素:
<i> <b> <strong> <cite> <q> <a>
块级元素:
<header> <nav> <aside> <article> <section> <footer>
<h1>-<h6> <p> <ul> <li> <ol>
行类块
<input>
表:
<table>
position:不可继承,默认值是static.
取值:static:静态位置,盒子在原本定位体系下的位置
相对位置 relative盒子在相对于原来的位置进行偏移
绝对定位 1 absolute绝对位置 2 fixed固定位置
1 定位体系-浮动
float:none 不浮动,不是浮动定位
float:left 左浮动
float:right 右浮动
1 子集浮动导致父级高度塌陷【浮动会脱离文档流】
2 行类元素,设置浮动,脱离文档流,高宽可设。
3 浮动会影响别的元素
clear 清除浮动: left right both(清除左右浮动)
父元素的实际高度为常规流元素之和
对最后一个元素使用clear:both 可防止父元素高度坍塌
浮动补充【文字环绕】
-
行内元素和文本元素都会考虑浮动元素的尺寸。
-
既行内元素和文本都会避让浮动元素的尺寸。
只要属性值有inline基本都要符合以上要求。
父级:after{
content:"";
display:block;
clear:both;
}
父元素实际高度为常规流元素之和,对最后一个元素使用clear:both 可防止父级元素高度塌陷
2 定位体系-绝对
1 absolute:绝对位置
2 fixed:固定位置【视口:浏览器可视区域】
起始点:绝对定位元素的包含快左上角。
position:absolute;依次判断元素是否拥有position不等于static的祖先元素(绝对定位的包含快)
如果没有任何最近的祖先元素有position不等于static,则包含块为初始化包含快,一般在页面的左上角。
3 定位体系-常规流[相对定位]
position:relative;相对于盒子在原来定位下的位置,原来的位置依然占用,盒子偏移后,不会对其它造成影响。
相对位置:1 依然占用原来位置 2 移动后不会影响其它元素
适用场景:当一个元素偏移后,原来位置依然会占用 【比如header,footer, 返回页面,侧边广告栏,客服等】
堆叠级别
- 决定元素谁显示在前,谁显示在后
- 堆叠级别越高,显示越靠前
- 通过z-index属性可设置元素的堆叠级别。取值:【正值向上,负值向下】负无穷到正无穷
不可继承
默认为:auto;
取值:auto-------自动 通常情况下,书写顺序靠后的元素靠前显示
数值-------手动 设置堆叠级别,堆叠级别越高的元素,靠前显示
只能用于绝对定位元素,常规流无效
列表
1,有序列表
<ol>
<li>...</li>
<li>...</li>
......
</ol>
2,无序列表
<ul>
<li>...</li>
<li>...</li>
......
</ul>
3,定义列表
<dl>
<dt>...</dt>
<dd>...</dd>
......
</dl>
列表项可更改样式
1 如:list{list-style:none}是去掉项目标记符号。
circle:空心圆 disc:实心圆 square:实心方块 decimal:数字
lower-alpha:小写字母 upper-alpha大写字母
2 如:li:nth-child(n){}选中单独的列表项,设置该项的样式(用于匹配父元素的第n个元素)【伪类选择器】
:first-child{}第一个 nth-child(odd){}奇数项 nth-child(eve){}偶数项
nth-child(3n){}3的倍数项,n从0开始。
:not(:nth-child(n)){}所有的列表项处了n项,其它都执行设置的此样式。
以上也可以设置并集选择器
3 列表中的hover
li:hover a{} 和 li:hover{} 移入Li里的a文字和li同时发生变化
4
在li里设置line-height等于行高可以使li的文字上下居中
在li里设置浮动,可以使得li元素并排显示
不给li设置宽度,直接加上样式margin:0 数值;可以使得左右边距一致。
表格
<table>
<thead>//表格头部
<tr> <td></td>
<td></td>
<td></td> </tr>
</thead>
<tbody>//表格内容
<tr> <td></td>
<td></td>
<td></td> </tr>
</tbody>
</table>
tr:表示一行 td:表示一列
合并单元格: 行:rowspan=""[水平方向] 列:colspan=""[竖直方向]
背景图设置
背景位置:background-position:
left top; center bottom;
可取值:(x,y) x:代表横坐标 y:表示纵坐标
背景图片大小:background-size: cover contain (100% 100%) (100%)
固定背景图:background-attachmemt:fixed
background:color url repeat(attachment) position;
background:size;
设置背景线性渐变色: background:liner-gradient();
线性过渡: transition:all liner .5s
旋转角度: transfrom: ratate(~deg);
块级格式化上下文
(Block Formatting Content,简称BFC)
一 如何触发BFC:
1根元素(html)
2浮动和绝对定位元素
3overflow不等于visible的盒
4display:inline-block,flex,inline-flex,table-cell,table-caption
二 规则【只适用于创建BFC的子元素,不包括自身】
1 创建BFC的元素,会考虑浮动元素的尺寸,即父级不会高度塌陷.
功能:找回浮动元素父亲的高
2 它的边框盒不会与浮动元素重叠
3 不会与它的子元素进行外边距合并
三 BFC特点
1,常规流块盒在水平方向上,必须撑满包含块
2,常规流块盒在包含块的垂直方向上依次摆放
3,常规流块盒若外边距无缝相邻,则进行外边距合并
4,常规流块盒的自动高度和摆放位置,无视浮动元素
表单
form属性:
1 action:提交地址
2 method:提交方式【1 get:输入内容显示在地址栏中 2 post:输入内容不会显示在地址栏中】
input类型
text:单行文本输入框
<p>
<label for="zqs">
用户名 <span>*</span>:
</label>
<input type="text" name="username" id="zqs" value="abc" >
</p>
设置lable可以调整距离还有鼠标点击文字后,自动影响到表单框。给用户好的体验
password:密码输入框
<p>
<label for="hwj">
密码:
</label>
<input type="password" name="pwd" id="hwj" placeholder="请输入数字" required>
</p>
submit:提交框
<input type="submit">
radio:单选框【1,type=“redio” 2,name的值要相同】
<p>
<label>
性别:
</label>
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="male">男
</p>
注:用于该属性的值是用户选择的,而不是用户输入的,因此后台无法显示
获取到当前选择的值,需要把相应的值,添加到value属性中,以便于提交数据
input的value属性,提交后的值【键值对】
1 当在输入框中给value代表默认值
2 当在选择框给value代表传给后台的值
3 input的maxlength属性限制输入字符的最大长度(比如:手机号只有输入11位)
<p>
<label for="lc">
手机:
</label>
<input type="text" name="pwd" id="lc" placeholder="请输入11位手机号" pattern="" maxlength="11">
</p>
多选框
checkbox多选框:
type=“checkbox”; name的值要相同
<p>
<label>
爱好:
</label>
<input type="checkbox" name="hobby" value="eat">吃饭
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="XXX"> XXX
</p>
数字框
number(只需要输入0-9)
<p>
<label for="cll">
数量:
</label>
<input type="number" name="pwd" id="cll" pattern="">
</p>
下拉列表
父元素:select
子元素:optgroup【分组】
optgroup的后代元素是option【下拉列表可选】
select添加multiple属性,实现内容可以多项选择
<select name="my" multiple>
<option value="cll">one</option>
<option value="ll">tuo</option>
<option value="lpf">three</option>
</select>
<select name="my">
<optgroup label="市场部">
<option value="cll">A</option>
<option value="ll">b</option>
</optgroup>
<optgroup label="教学部">
<option value="lpf">c</option>
</optgroup>
</select>
多行文本输入框
评论区或留言区域
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit">提交
<input type="reset">重置
<buttom>提交</buttom>可以代替提交功能【是H5新增提交按钮】
普通按钮:<input type="buttom"> 设value值即可
注:默认值选中
1,在单选框和多选框中用checked=“checked”,后面可以只用checked
2,设置选中某一个选项,在下拉列表中,在option中添加selected属性
给父级设置font-size=0;去除子集行类标签之间间距
设置提示信息样式:input:-webkit-input-placeholder{}
CSS文本样式
text-shadow:文本阴影 值: 1,x轴偏移量 2,y轴偏移量 3,模糊值 4 spread:阴影尺寸 5,颜色
box-shadow:盒子阴影
text-overflow:clip 文本溢出属性指定应向用户显示溢出内容
word-wrap:允许文本换行 如:p{word-wrap}
word-break:单词拆分换行 注:不兼容opera
box-shadow 的取值依次顺序是:
1 h-shadow:水平阴影 2 v-shadow:垂直阴影 3 blur:模糊
4 spread:阴影尺寸 5 color颜色 6 insect 外阴影转到内阴影
简单动画
过渡:transition【css属性 ,在一定时间内,从一个值变化到另一个值】
包括初始属性 元素 hover
对background height 应用过渡,并非所有的属性都支持过渡,一般为颜色,尺寸,透明度的属性
trabsition-property:background,height transition-duration:过渡时间
以上可以简化为transition:all ~s;
透明度:
opacity设置元素的透明度,取值0-1
注:opacity设置的透明度,不仅会设置当前元素的透明度,并且还会涉及到子元素和后代元素,可以理解为具有继承性。
与rgba的区别:opacity设置一次透明度,会应用当前元素和后代元素
rgba可以分别设置某个元素的颜色(字体,背景)
visibility:hiddle 当前元素在页面不显示。但元素尺寸依然保留,并且可以适用过渡
设置过渡的函数
transition-timing-function:linear
取值:(贝塞尔曲线)
linear线性渐变
ease:平滑过渡
ease-in:由慢到快
ease-out:由快到慢
ease-in-out:由慢到快,再到慢
设置过渡延迟
取值:
正值:正值后的秒数开始过渡效果
0:立即执行过渡效果
负值:详情W3C
transition-delay: 2s;
动画animation
同样可用delay{延迟}
设置动画步骤
step1:定义一个动画
格式: @keyframes 自定义动画名称
如:
@keyframes F63{
0%{
left: 0px;
border-radius: 0;
}
20%{
left: 100px;
border-radius: 50%;
}
50%{
left: 500px;
border-radius: 50%;
}
70%{
left: 100px;
border-radius: 50%;
}
100%{
left: 0px;
border-radius: 0;
}
}
step2:使用动画
格式:
动画名称:animation-name:F63;
动画时间:animation-duration:10s;
动画函数:animation-timing-fuction:linear;
动画次数:animation-iteration-count: 2;
缩写: animation: F63 linear 10s 2;
无限循环次数取值为:infinite
如 animation: F63 linear 10s infinite;
设置元素变形 transform
不会影响其他的标签
取值:
scale缩放
缩小:0-1;
注:1以上的值是放大,1以下的值是缩小。默认值1
transform: scale(2);
rotate旋转
默认值是Z轴旋转
rotate(ndeg) n取正值是顺时针,n取负值是逆时针。
rotateY(90deg); 设置Y轴旋转
rotateX(90deg); 设置X轴旋转
skew倾斜
transform: skew(45deg);
skewx(45deg);y轴宽不变
skewy(45deg);x轴宽不变
translate偏移
transform: translate(100xp,50px);
第1个参数:X轴的偏移方向,正数是向右,负数是向左。
第2个参数:Y轴的偏移方向,正数是向下,负数是向上。
响应式
媒体查询
响应式:根据浏览器的宽度不同(设备终端)来进行同一个区域,不同布局的展示。即同一个网站,可认兼容不同的浏览器(设备)
min-width:800px;
代表样式应用的起始尺寸为800px
max-width:500px;
代表样式应用的最大尺寸为500px
如:<link rel="stylesheet" href="./chaxun1.css" media="screen and (max-width:799px)" >
如
@media screen and (min-width:501px) {
header {
width: 500px;
border: 1px solid red;
margin: 100px auto;
display: flex;
justify-content: space-between;
}
}
当浏览器大于800px
header {
width: 500px;
border: 1px solid red;
margin: 100px auto;
display: flex;
justify-content: space-between;
background-color: #fff;
}
扩展
栅格系统(class前缀)
1200px以上大屏幕(投影仪、电视等) .col-lg-
992-1200px中屏幕(笔记本) .col-md-
768-992px小屏幕(平板) .col-sm-
768px以下超小屏幕(手机) .col-xs-
外部引用JS文件
一般写在body底部font-size:2em;当前字体大小的2倍
font-size:2rem;当前根元素(html)字体大小的2倍。
考虑雪碧图,一般取背景图片大小,url("~");
设置字体
font-family:serif 衬线字体(有笔锋)
font-family:scans-serif 非衬线字体
引用字体
step1:下载一个字体到项目中
step2:使用关键词@font-face,创建新字体(引用新字体)
step3:使用关键词font-family,为新字体名命。
header {
font-family: "F63";
letter-spacing: 10px;
word-spacing: 20px;
}
@font-face {
font-family: "F63";
src: url("../Fonts/digital-7_mono.ttf");
}
圆角边框
取1个值:4个角的弧度半径(即4个角弧度一样)
取2个值:
第1值代表左上和右下
第2值代表左下和右上
取3个值:
第1值代表左上
第2值代表左下和右上
第3值代表左右上
取4个值:
第1值代表左上
第2值代表右上
第3值代表右下
第4值代表左下
border-radius: 10px 20px 30px 40px;
border-radius: n/m;
n代表X轴半径
m代表Y轴半径
即如果两个值不相等,最终画出一个椭圆
图片跳转
一张图片,在点击不同区域,链接到不同页面。
step1:img与map相关
map的那么值与img的usemap的值相同,并且usemap的值前面要加#号
注:为了解决兼容性,在map中再添加一个与name相同值的id。
因为有些浏览器用map的name值与img的usemap相匹配
有些浏览器用map的id值与img的usemap相匹配
step2:在map中添加子元素area
设置区域类型:shape
取值:
rectangle 矩形【rect】
circle 圆形
poly 多边形
step3:
设置区域坐标:coords
1、rectangle :设置左上角和右下角的xy轴,每个值用逗号来分隔
2、circlr :设置中心点的xy轴和半径
3、poly :每个连接点的xy轴
step:设置点击的链接地址 href
音频 视频
音频:
controls//展示播放控件
lopp//循环播放
autoplay//自动播放(谷歌浏览器自动播放无效,可以添加muted属性使其可以自动播放)
muted//静音
<audio src="地址" controls lopp autoplay></audio>
视频:
controls//展示播放控件
lopp//循环播放
autoplay//自动播放(谷歌浏览器自动播放无效,可以添加muted属性使其可以自动播放)
muted//静音
兼容性
解决兼容性:
1、重置文件
2、不同浏览器内核不同,在属性前加前缀解决兼容性
3、html第一行需要写<!DOCTYPE html>,如果不写则进行怪异模式,浏览器会用低版本解析当前页面。
低版本会不识别高版本的元素。但文字依然显示。
4、开发思维【渐进增强,优雅降级】
以上两点是一个设计理念,为的是提供更好的用户体验
根据用户群体与业务流程进行设置。
a>渐进增强:先针对低版本浏览器进行开发,保证页面内容的展示(核心功能)
再针对高版本浏览器进行效果、交互、动画功能是添加。
为用户提供更好的体验。
b>优雅降级:先针对高版本浏览器进行开发,构建一个完整的页面(带交互与特效的功能)
再针对低版本浏览器进行功能的删减。
【推荐:兼容性】
w3help.org
chrome:__webkit__ 谷歌
firefox:__moz__ 火狐
微软:__ms__
欧鹏: __o__
图片属性
1 排列图片
在img里加属性 align=bottom align=middle align=top align=center(与文字同高居中)
当img在文字旁边时,
图片相对于文字的高度
图像映射
一张图片,在点击不同区域,链接到不同页面。
step1:img与map相关联
map的name值与img的usemap的值相同,并且usemap的值前面要加#
注:为了解决兼容性,在map中再添加一个与name相同值的id.
因为有些浏览器用map的name值与img的usemap相匹配
有些浏览器用map的id值与img的usemap相匹配
step2:在map中添加子元素area
设置区域类型:shape
取值:
rectangle 距形
circle 圆形
poly 多边形
step3: 设置区域坐标:coords
1、rectangle :设置左上角和右下角的XY轴,每个值用逗号来 分隔
2、circle :设置中心点的XY轴和半径
3、poly :每个连接点的XY轴
step4: 设置点击的链接地址 href
如:
<img src="../IMG/icon.png" alt="" usemap="#F63">
<map name="F63" id="F63">
<area shape="rectangle" coords="0,0,82,68" href="./Flex.html" alt="">
<area shape="circle" coords="221,27,35" href="./animation.html" alt="">
<area shape="poly" coords="277,95,351,48,392,103,277,154" href="./BFC.html" alt="">
</map>
响应式布局
[媒体查询]
响应式:根据浏览器的宽度不同(设备终端)来进行同一个区域,不同布局的展示。
即同一个网站,可认兼容不同的浏览器(设备)
min-width:800px
代表样式应用的起始尺寸为800px
max-width:500px
代表样式应用的最大尺寸为500px
1200px以上大屏幕(投影仪、电视等)
992-1200px中屏幕(笔记本)
768-992px小屏幕(平板)
768px以下超小屏幕(手机)
Boostrap
<div class="container">
<div class="row">
<p class="col-lg-4 col-sm-12">1</p>
<p class="col-lg-5 col-sm-12">2</p>
<p class="col-lg-4 col-sm-12">3</p>
</div>
</div>
鼠标移入样式
:hover{
cursor:pointer【手】
cursor:wait;【等待】
}
sass【scss】
为了简化代码,减少冲突。一般申明并且直接调用变量。
使用考拉执行转化。
一,创建变量
二,使用变量
创建变量
$F63_color: deeppink;
header{
color:red;
nav{
使用变量
color:$F63_color;
ul{
color:palevioletred;
li{
&代表当前标签
&:hover>p{
color:black;
}
color:goldenrod;
p{
color:$F63_color;
span{
color:skyblue;
i{
color:$F63_color;
}
}
}
}
}
}
}
创建混合器
$F64: blue;
创建混合器
@mixin F63($w,$h,$m,$bc){
width: $w;
height: $h;
margin: $m;
background-color: $bc;
}
不带参的混合器
.border-bc{
border:2px solid red;
background-color: aquamarine;
}
article{
display: flex;
width: 600px;
flex-wrap: wrap;
引用不带参的混合器
@extend .border-bc;
div{
引用混合器(使用混合器)
可以批量添加,并且添加不同样式
@include F63(200px,200px,10px,deeppink);
}
}
$width-p:200px;
p{
引用混合器(使用混合器)
可以批量添加,并且添加不同样式
@include F63(100px,100px,0px,$F64);
变量可以进行算术运算(+ - * /)
width: $width-p - 50;
}
注:@extend:继承 定义一个类名
background-color:$beijingcolor,变量 批量修改
行盒
断词规则
取值:normal
break-all 1,英文按字母进行阶段换行 2,中文文字之间进行换行
keep-all 所有字符按照空格和标点符号进行换行
word-break: keep-all
由于去掉幽灵空白,父级会设置font-size: 0;
在此,子元素是行盒的元素,需要再次设置字体大小。便于展示内容。
由于两个相邻行盒元素会出现空格(因为开发方便打了回车)[幽灵空间]
去掉该空格,再要在父级设置font-size: 0
图片属性:不改变图片尺寸的情况下,如何等比例缩放
1 默认值:根据设置尺寸进行显示
object-fit:fill;
2 会进行缩放,并且不会超出边框盒
object-fit:contain;
3 会进行缩放,超出部分不会显示
object-fit:cover;
4 不会进行缩放,即图片原始尺寸
object-fit:none;
缩放中心控制点,默认是center;
background-origin:改变图片中心点
行盒的尺寸
可替换元素
1 可以进行W和H的设置
2 图片等比例缩放
非可替换元素
1 设置W和H无效
2 垂直方向上的margin\padding\border无效(不占位)
3 line-height 基线
当前字体的2倍:font-size:2em , 200%, 2 【取值】
行盒IFC
文本类内容必须放在行内元素中
如果包含在块级元素中,会自动生成一个匿名行盒
行盒的位置
1 行内元素必须属于常规流体系中,如果不是常规流,display会自动变为
block;
2 遇到浮动元素和常规流盒会进行避让(即考虑尺寸)
3 可以在盒块中使用text-align进行行盒对齐方式的设置
4 行盒之间的对齐方式
verticle-align
取值:baseline基线(图片下部间隙)
top 顶线对齐
bottom 底线对齐
middle 中线对齐
行内块:inline-block
1 多个标签在一行显示
2 设置高,宽有效
3 垂直方向上的margin\padding\border有效
4 可以包含块盒元素
5 自动创建BFC
grid布局
Grid和Flex对比
Grid:
全局进行布局时,推荐Grid;
网格布局:二维布局,以布局为基础,布局自适应,多维联动特点突出
网格分层:可以用z-index进行设置。(三维)
Flex:
局部进行布局时,推荐Flex;
弹性布局:以内容为基础,内容自适应,单行联动
网格容器属性
grid-template-columns: 设置网格容器中列的个数与尺寸
grid-template-rows:设置网格容器中行的个数与尺寸
也可使用其它的单位:fr ,rem , fr是分成几个等分占比
grid-template-columns: 1fr 2fr 2fr 1fr;
grid-template-columns: 3rem 25% 2fr 1fr;
grid-template-columns: 3rem 25% 1fr minmax(100px,auto);
grid-template-rows: 100px 100px;
也可设置:
grid-template-columns: repeat(3,100px);列重复三列
grid-template-rows: repeat(2,100px);行重复两行
设置网格容器的起点和终点
这样可以移动网格项目到任意区域
因此需要先定义每个网格线的名字。除开头和结尾,每个网格线即是起点也是终点。
grid-template-columns:[col1-star]100px [col1-end col2-start] 100px [col2-end col3-start]100px [col4-end]
grid-template-rows:[row1-start]100px [row1-end row2-start]100px[row2-end]
如:grid-column-start:col3-start;
grid-column-end:col4-end;
设置行与列尺寸的同时对网格线经行自定义命名(一个和多个命名)
默认值是(1,2,3…n)
设置网格间隙
grid-column-gap:两个项目列向的距离(列间距)
grid-row-gap:两个项目行向的距离(行间距)
grid-gap:行,列
如:grid-column-gap:10px;
grid-row-gap:15px;
gride-gap:15px 10px;
网格区域的设置
1 gride-template-areas:"h h h h"
"c . as as"
"f f f f"
其中.表示没有任何内容显示,留出空位
对网格项进行网格区域的设置
.hx{grid-area:h;} .as{gride-area:as;}
.c{gride-area:c;} .f{grid-area:f;}
2 也可以写成为:gride-area:2/1/3/2;
其中第一个值是行的起始,第二个值是列的起始,第三个值是行的结束,第四个值是列的开始
调整网格项目的位置
gride-column:n/m; n是起始网格线,m是结束网格线
gride-column:n/span m(合并网格项);n是起始网格线,span m 是在n的基础上加上m的结果为结束网格线。
对齐
1 每行的对齐方式
取值:start center end strentch
2 每列的对齐方式: start center end strentch
隐式网格
当超出预设值的区域后(超出容器)
行和列的尺寸根据grid-auto-columns和gride-auto-rous来取值
如:grid-auto-columns:50px;
ate-rows:设置网格容器中行的个数与尺寸
也可使用其它的单位:fr ,rem , fr是分成几个等分占比
grid-template-columns: 1fr 2fr 2fr 1fr;
grid-template-columns: 3rem 25% 2fr 1fr;
grid-template-columns: 3rem 25% 1fr minmax(100px,auto);
grid-template-rows: 100px 100px;
也可设置:
grid-template-columns: repeat(3,100px);列重复三列
grid-template-rows: repeat(2,100px);行重复两行
## 设置网格容器的起点和终点
这样可以移动网格项目到任意区域
因此需要先定义每个网格线的名字。除开头和结尾,每个网格线即是起点也是终点。
grid-template-columns:[col1-star]100px [col1-end col2-start] 100px [col2-end col3-start]100px [col4-end]
grid-template-rows:[row1-start]100px [row1-end row2-start]100px[row2-end]
如:grid-column-start:col3-start;
grid-column-end:col4-end;
设置行与列尺寸的同时对网格线经行自定义命名(一个和多个命名)
默认值是(1,2,3...n)
## 设置网格间隙
grid-column-gap:两个项目列向的距离(列间距)
grid-row-gap:两个项目行向的距离(行间距)
grid-gap:行,列
如:grid-column-gap:10px;
grid-row-gap:15px;
gride-gap:15px 10px;
## 网格区域的设置
1 gride-template-areas:“h h h h”
“c . as as”
“f f f f”
其中.表示没有任何内容显示,留出空位
对网格项进行网格区域的设置
.hx{grid-area:h;} .as{gride-area:as;}
.c{gride-area:c;} .f{grid-area:f;}
2 也可以写成为:gride-area:2/1/3/2;
其中第一个值是行的起始,第二个值是列的起始,第三个值是行的结束,第四个值是列的开始
## 调整网格项目的位置
gride-column:n/m; n是起始网格线,m是结束网格线
gride-column:n/span m(合并网格项);n是起始网格线,span m 是在n的基础上加上m的结果为结束网格线。
## 对齐
1 每行的对齐方式
取值:start center end strentch
2 每列的对齐方式: start center end strentch
## 隐式网格
当超出预设值的区域后(超出容器)
行和列的尺寸根据grid-auto-columns和gride-auto-rous来取值
如:grid-auto-columns:50px;
grid-auto-rows:50px;