1. 边框：border
边框线：
border-style：
solid 实线
dashed 虚线
dotted 点虚线
边框颜色：
border-color
边框粗细：
border-width 单位/px
简写：
border：solid red 2px；
单独给一条边加边框：
border-top:solid red 2px；
border-bottom:solid red 2px；
border-left:solid red 2px;
border-right:solid red 2px;
注意：
1.每个值之间用空格隔开
2.每个值之间的顺序任意
2. 行内与块级
1.行内标签：
宽高不可控，不独占一行【都可以挨着】
<img/>【直接写宽高好使，因为图片本身具有宽高属性】
<span></span>
<font></font>【新版本已取消，少量版本能用】
2. 块级标签:
块级宽高可控，独占一行
<p></p> <h1></h1> <div></div>
3. 行内块转换：
行内转块级：display：block;
块级转行内：display：inline；
转行内块：
宽高不可控，不独占一行
display：inlin-block；
4. 列表：
1.有序列表 ol li
2.无序列表 ul li
3.自定义列表 dl dt dd
list-style：列表样式
none：取消
5. 行高：
line-height 调整每一行之间间距（高度）
上下居中：把行高的值与外侧盒子高度相同即可。
6. 圆角效果：
border-radius:
值：100% px【值设成半径shi，会变成圆（50%）但是得在本身是正方形的情况下】
分别设置四个角的不同的圆角效果：
border-radius：10px 5px 8px 15px；
四个值：分别对应
左上 右上 右下 左下
border-radius：10px 5px 8px;
三个值：
左上 右上和右下 左下
border-radius：10px 5px；
两个值：
左上和右上 右下和左下
7. 阴影：
1. 盒子阴影
box-shadow:
1.x轴偏移量 阴影水平的宽度 必选 可以给负数
2.Y轴偏移量 阴影垂直的高度 必选 可以给负数
3.阴影模糊半径 阴影边缘模糊程度 可选 必须是正数
4.阴影颜色 可选
2. 文字阴影:
text-shadow:
1.x轴偏移量 阴影水平的宽度 必选 可以给负数
2.Y轴偏移量 阴影垂直的高度 必选 可以给负数
3.阴影模糊半径 阴影边缘模糊程度 可选 必须是正数
4.阴影颜色 可选
3. 盒子模型：
所有的html元素都可以看成盒子模型。
组成：包括边框（border），
内容（width，height）,
边距（内边距（padding）
外边距（margin））
块级标签（宽高可控：布局多） 盒子 布局方式：div+css【更灵活】
之前的布局方式：table表格
8. 边距：布局
1.内边距：内容到边框的间距【本身之上加】
padding-top
padding-left
padding-bottom
padding-right
简写:
padding:10px 19px 19px 20px;
2.外边距
margin 盒子与盒子之间的距离
单独给一个方向加外边距：
margin-top 上外边距
margin-bottom 下外边距
margin-left 做外边距
margin-right 右外边距
3. 简写:
margin:10px 19px 19px 20px;
四个值：上右下左
margin:10px 19px 19px
三个值：上 左右 下
margin:10px 19px
两个值：上下 左右
margin:10px
四个方向
9. 浮动：float
浮动：float 布局方式之一
会使我们的元素向左向右移动，不能上下移动，其周围元素重新排列。
【违犯块级元素独占一行的规则】
值：
float:left;左浮动
flost：right；右浮动【造成上下层覆盖】
清除浮动：
1.调成一个层面上【治标不治本】
2.给浮动元素外测套一个盒子
3.clear:both;【治标治本】
10.盒子模型的两种方式：
1.标准方式：
一个盒子的总宽度=width+margin（左右）+padding（左右）+border（左右）
2.怪异模式：
一个盒子的总宽度=width+margin（左右）
说明：IE浏览器【兼容性非常不好】 width移接包含了宽度和内边距。
width：200px；
margin-left:20px;
padding:40px;
border-left:10px;
width:300px;
10px 4；
padding：20px
width：300-
11. 全局样式：
*{margin：0px；padding：0px；font-size：12px；font-family："微软雅黑"}*字体大小
//放在css样式的最上侧
12. 什么原因造成div脱离标准文档流？
标准文档流：按照一定规律排列的，默认原属从左到右，从上到下排列，块级元素独占一行，行内元素共享一行
本来在标准文档流下，各个元素相安无事，
原因：
1.浮动 float
2.绝对定位。
13. position 定位
布局方式之一【尽量不要给大盒子定位】------定位非常死
1.固定定位（根据浏览器定位）
position:fixed
top left right bottom
2.相对定位
（根据自身定位）【自身为原点，进行移动（很像外边距）】
position：relative；
top left right bottom
3.绝对定位
（根据父类定位）--嵌套关系【父类要放置相对定位方式---起到参照物的作用】
position:absolute;
top left right bottom
4.层：z-index
注意：必须结合定位使用。position：relative；必须有
值越大层数越高
5.超文本链接
超文本链接
<a></a> 行内标签
href 路径
路径：
本地：index.html
外部：http:www.baidu.com/
../返回上一层
6.锚点：
1.设置一个锚点
<a name="dd"></a>
<div id="dd"><>/div>
2.返回顶部
<a href="#dd">返回顶部</a>【同页面跳转】
<a href="index.html#aa">返回顶部</a>【不同页面】
复合型选择器
1.交集选择器
有两个选择器组成，第一个是标签选择器，第二个是类选择器，两个选择器
中间不能有空格
p.int{ }
2.并集选择器
.a1,.a2{ 样式能同时加在a1和a2}
class=“a1 a2”
3.后代元素选择器
查找所有符合条件的后代：儿子和孙子，重孙子都是后代
.new li{
color: rgb(233, 38, 38);
}
4查找所有符合条件的后代，只查找儿子辈
1
2
3
4
5.兄弟元素选择器
紧跟期后的第一个标签（之查找后面标签，前面的标签不管，就差找一个）
div+p{ }
6.相邻元素选择器
紧跟其后的所有标签（只查找后面标签，前面的标签不管，查找所有）
div~p{ }
7.属性选择器
a[href]{}
a[href][title]{color:red;}
a[href=“index.html”]{color:red;}
CSS3样式
1. 兼容前缀
正常样式：transform
| 前缀写法 | |
|---|---|
| opear浏览器 | -o-transform |
| IE浏览器 | -ms-transform |
| firfox浏览器 | -moz-transform |
| chrome浏览器 | -webkit-transform |
正规的写法：
transform
opear浏览器 -o-transform
IE浏览器-ms-transform
firfox浏览器-moz-transform
chrome浏览器 -webkit-transform
2.透明度
透明度：rgba（111，111，111，0.7）【111，111，111，三个颜色 |取值0-1之间 0完全透明，1完全不透明】
不透明度：opacity：0.7；【加在哪里都可以 取值：0-1之间 0完全透明，1完全不透明】
z-index：；值大就在上面。【必须与定位一起使用】
3.文字样式
注意：要配合以下两个语句使用
white-space：nowrap；//文本不换行
overflow：hidden； //溢出部分隐藏
white-space: nowrap; /*文本不换行【在默认换行的基础上】*/
overflow: hidden;
text-overflow: ellipsis; /*溢出部分省略号表示*/
white-space: nowrap; /*文本不换行【在默认换行的基础上】*/
overflow: hidden;
text-overflow:clip; /*溢出部分截断*/
4.背景
background: url(img/m1.jpg)no-repeat right bottom,url(img/img_flwr.gif)no-repeat left top; /*图片重叠：先写上层，再写下层*/
5.字体：加载外部字体
@font-face 规定，必须先定义一个字体名称，然后src指向该字体的位置。
一般存在 C:\Windows\Fonts下面
1、C:\Windows\Fonts下文字复制在img里
2、@font-face命名【名字随意】
3、src指定文字类型的位置
6. 渐变
1.线性渐变：向上/向下/对角方向
linear-gradient 线性渐变
background:linear-gradient(to right,red,blue)
background:linear-gradient(pink,aqua,palegreen); /*默认从上到下*/
background:linear-gradient(to left,pink,aqua,palegreen); /*指向，从右到左 :to+方向（top,bottom,left,right）*/
background:linear-gradient(to left top,pink,aqua,palegreen); /*对角线渐变:渐变指向左偏上*/
background:linear-gradient(pink 50%,aqua 80%,palegreen); /*颜色范围:0%到50%是pink，50%到80%是aqua，剩余部分是palegreen*/
background: linear-gradient(75deg,pink 40%,aqua 80%,palegreen); /*按角度指向渐变:顺时针方向180度，逆时针反向用负号表示，对应表示数：*/
background: linear-gradient(90deg,rgba(228, 211, 211, 0.5),rgba(255,0,0,1)); /*从半透明到不透明的渐变*/
2.径向渐变：由中心向四周扩散（圆）
radial-gradient 径向渐变
background:radial-gradient(pink 40%,aqua 80%,palegreen) /*径向渐变:向四周扩散（默认椭圆形）*/
background:radial-gradient(circle,pink 40%,aqua 80%,palegreen) /*指定正圆:向四周进行渐变*/
7.转型（transform）
转换形态：移动，旋转，缩放
1.旋转
（1）2D旋转
.a1{
width: 200px;
height: 200px;
background-color: blueviolet;
text-align: center;
line-height: 200px;
margin:50px auto;
font-size: 20px;
}
.a1:hover{
transform:rotate(45deg);
transition: 1S;
}
效果图
（2）3D旋转
transform：rotateX(360deg); //随中间X轴旋转 注意X/Y大写
transform：rotateY(360deg); //随中间Y轴旋转
2.移动
transform：translate(x,y);
transform:translate(100px,300px); //往右下角移动
transform：translate(100px); //只有一个数，默认向右移动
transform:translateX(100px); //向X轴方向（右）移动
transform:translateY(100px); //向Y轴方向（下）移动
.a3{
width: 200px;
height: 200px;
background-color: rgb(162, 131, 191);
margin:50px auto;
transition: 2s; //正方形移动回来的过程【注意是transition,不是translate】
}
.a3:hover{
transform:translateY(100px);
transition:2s;
}
3.缩放
scale(1.2) 放大1.2倍【1以上是放大，1以下是缩小】 scale(1.2,2) //X轴放大1.2倍，Y轴放大2倍
transform：scale(1.2)
transform：scale(1.2,2)
经典demo：点击图标放大图片效果：
.c1{
width: 200px;
height: 200px;
margin: 50px auto;
overflow:hidden; //注意添加溢出语句
}
img:hover{
transform:scale(1.2);
transition:2s;
}
效果显示：【鼠标经过，图片放大，溢出部分不显示】
4.改变锚点
改变旋转中心点
transform-origin:0% 100%; //左下位置点开始旋转。
2D锚点
//不能单设置在hover下，会导致出现错乱
transform-origin:0% 0%; //左上位置点开始旋转。
transform-origin:100% 0%; //右上位置点开始旋转。
transform-origin:100% 100%; //右下位置点开始旋转。
3D锚点
注意注意：
.a2{
width: 200px;
height: 200px;
background-color: blueviolet;
text-align: center;
line-height: 200px;
margin:50px auto;
font-size: 20px;
transform-origin:left;
}
.a2:hover{
transform:rotateY(360deg);
transform-origin:left;
transition: 1s;
}
【俩者是相互对应的】
Y轴旋转对应的是left和right
transform:rotateY(360deg);
transform-origin:left；
X轴旋转对应的是top和bottom
transform:rotateX(360deg);
transform-origin:top；
8.动画
1.定义动画
2.调用动画+确定动画时间
3.
1.定义动画：
@keyframes name{
from{ }
to{ }
}
@keyframes name{
0%{ }
10%{ }
100%{ }
}
.a1{
width: 200px;
height: 200px;
background-color: aqua;
animation-name:myname; //调用动画
animation-duration:2s; //规定动画时间2s
animation-delay: 2s; /* 延迟两秒后开启动画 */
animation-iteration-count:infinite; /*播放次数无限次*/
animation-direction: normal; /*播放周期正常*/
animation-timing-function:linear; /*定义速度曲线相同*/
animation-play-state: running; /*默认动画运行*/
}
/*@keyframes myname{ //定义动画
from {transform: translate(0px,0px);} //定义最初位置
to {transform:translate(200px,0px);} //移动位置
}*/
@keyframes myname{
0% {transform: translate(0px,0px);}
50% {transform:translate(200px,0px);}
100% {transform:translate(200px,200px);}
/*注意前是from，后是transform;【前form也可以】*/
.a1{
width: 200px;
height: 200px;
background-color: rgb(186, 237, 237);
animation-name:myname;
animation-duration:2s;
animation-delay: 2s; /* 延迟两秒后开启动画 */
animation-iteration-count:infinite; /*播放次数无限次*/
animation-direction: normal; /*播放周期正常*/
animation-timing-function:linear; /*定义速度曲线相同*/
animation-play-state: running; /*默认动画运行*/
}
/* @keyframes myname {
from {transform: translate(0px,0px);}
to {transform:translate(200px,0px);}
} */
@keyframes myname{
0% {transform: translate(0px,0px);background:rgba(29, 231, 117, 0.1);}
50% {transform:translate(200px,0px);background:rgba(242, 188, 11, 0.6);}
100% {transform:translate(200px,200px);background:rgba(47, 10, 233,1);}
}
经典demo【动画简写模式】
.a1{
width: 200px;
height: 200px;
margin: 100px auto;
background-color: gold;
transform-origin:50% 100%; /*设置锚点*/
}
.a1:hover{
transform-origin:50% 100%;
animation:myname 3s infinite linear; /*简写动画:名字，动画运行时间，播放无限次，且速度相同*/
}
@keyframes myname{
0%{transform:rotate(0deg);}
25%{transform:rotate(-10deg);}
50%{transform:rotate(20deg);}
75%{transform:rotate(-10deg);}
100%{transform:rotate(0deg);}
}
效果图：左右摇摆
2.调用动画库
（1） 外联动画库
（2） 不用定义动画名称，直接调用网页里显示特定效果的名字
图片使用动画库效果：
img{
dispaly:block;
width: 200px;
height: 150px;
margin:100px auto;
}
img:hover{
animation: flipOutX 3s; /*动画库里名为flipOutX的动画*/
}
经典demo【立体效果】
body{
background-color: rgb(124, 115, 115);
}
h1{
font-size:60px;
color: #333;
text-align: center;
margin-top: 200px;
letter-spacing: 10px;
transition: 2s;
}
h1:hover{
text-shadow:0px 0px 0px rgb(96, 92, 92),
1px 1px 1px rgba(96, 92, 92, 0.7),
2px 2px 2px rgba(96, 92, 92, 0.5),
3px 3px 3px rgba(96, 92, 92, 0.4),
4px 4px 4px rgba(96, 92, 92, 0.3),
5px 5px 5px rgba(96, 92, 92, 0.3),
6px 6px 6px rgba(96, 92, 92, 0.2);
}
呈现效果图
经典demo【实现遮罩效果】
<!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>
*{margin: 0px;padding:0px;}
ul{
width: 600px;
height: 200px;
list-style: none; /*去掉自身所带的样式*/
}
ul li{
width: 200px;
height: 200px;
position: relative;
float:left;
}
ul li img{
display: block;
width: 200px;
height: 200px;
position: absolute; /*绝对定位外得套一个相对定位*/
top:0px;
left: 0px;
}
ul li a{
display: block;
width: 100%;
height: 50px;
position: absolute;
left: 0px;
bottom:0px;
background: rgba(0,0,0,0.7);
color:#fff;
line-height: 50px;
text-align: center;
text-decoration: none; /*去掉文字自身效果*/
letter-spacing: 5px; /*设置字间距*/
font-weight: 900; /*400为默认大小*/
}
ul li span{
display: block;
width: 200px;
height: 200px;
background: rgba(0,0,0,0.7) url(../img/play.png) no-repeat center center;
position: absolute;
left: 0px;
top:0px;
opacity: 0; /*注意透明度的切换*/
transition: 1s;
}
ul li span:hover{
opacity: 1;
transition:1s;
}
</style>
</head>
<body>
<ul>
<li>
<img src="../img/m2.jpg" alt="">
<a>标题</a>
<span></span>
</li>
<li>
<img src="../img/m3.jpg" alt="">
<a>标题</a>
<span></span>
</li>
<li>
<img src="../img/m4.jpg" alt="">
<a>标题</a>
<span></span>
</li>
</ul>
</body>
</html>
效果展示
经典demo【实现3D正方体动画效果】
9.响应式
让一个网站适配多个设备或者屏幕，可以让网站的布局和功能随用户的使用环境而改变。
1.开发响应式方法：
（1）CSS 媒体查询
（2）JS
（3）框架 bootstrap
viewport 视口
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
加上width=device-width以后，宽度高度随窗口大小变化而变化。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=5.0">
强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
<meta name="apple-mobile-web-app-capable" content="yes">
iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
<meta name="apple-mobile-web-app-status-bar-style" content="black">
iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
<meta name="format-detection" content="telephone=no">
告诉设备忽略将页面中的数字识别为电话号码
width=device-width ： 视口宽度与设备宽度一致
initial-scale=1.0： 初始化缩放 1.0
user-scalable=no： 禁止用户缩放
minimum-scale=1.0： 最小的缩放比例
maximum-scale=5.0： 最大的缩放比例
-webkit-tap-highlight-color:rgba(255,0,0,0);
这个属性只用于iOS
(iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个背景。你可以设置-webkit-tap-highlight-color为任何颜色。
2. 图片设置
图片宽度大于可视宽度，变为100%【图片不会超出可视窗口宽度，随窗口调节自身大小】
img{max-width:100%}
3.@media 媒体查询
设置不同类型的媒体查询条件，给符合条件的媒体调用相应的样式
IE8及以下不支持
语法：@media 媒体类型 and|not|only (媒体元素){样式}【三选一】
媒体类型：
all 所有设备
screen 电脑 平板 手机
print 打印机
| >=1200 | 大屏幕 |
|---|---|
| 1200-900 | 正常屏幕（电脑） |
| 900-500 | 平板 |
| <500 | 手机 |
整体语句：同一页面
@media screen and (min-width:1200px){>=1200 大屏幕(电脑)}
@media screen and (min-width:900px) and (max-width:1200px）{>=1200 大屏幕(电脑)}
@media screen and (min-width:500px) and (max-width:900px）{ }
@media screen and (min-width:500px){<500 手机}
link【不同页面引入正常写，不用写@media】
<link href=" "rel="stylesheet" type="text/css" media="screen and (max-width:500px)">
<link href=" "rel="stylesheet" type="text/css" media="screen and (min-width:500px) and (max-width:900px）">
<link href=" "rel="stylesheet" type="text/css" media=" screen and (min-width:900px) and (max-width:1200px）">
<！--正常的就正常写-->
not: 排除某个媒体类型
<link href="" rel="stylesheet" type="text/css" media="not screen and (max-width:500px)">
only: 指定某个媒体类型
body{
background-color:red; /*正常就用普通样式写*/
}
div{
width:1200px;
background-color: blue;
height: 500px;
margin: 0 auto;
}
@media screen and (min-width:500px) and (max-width:900px){
body{background-color: pink;}
div{
width:500px;
background-color: blue;
height: 500px;
margin: 0 auto;
}
}
@media screen and (max-width:500px){
body{background-color:aqua}
div{
width:90%;
background-color: blue;
height: 500px;
margin: 0 auto;
}
}
4.移动WEB开发(flex布局)【专写手机端】
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
常见父项属性
以下由6个属性是对父元素设置的
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction和 flex-wrap
1.打开开关：display: flex;
display: flex; /*我要用弹性盒子了【父类一定要写】*/
2.设置主轴方向： flex-direction
3.设置主轴上的子元素排列方式： justify-content
justify-content：space-around；/*平分剩余空间*/
justify-content:space-between;先两边贴边 再平分剩余空间（重要）
4.设置子元素是否换行: flex-wrap
5.设置侧轴上的子元素排列方式（单行 ）:align-items
5.grid布局(网格布局)
它可以将网页分为一个个网格,然后利用这些网格组合出各种各样的布局.
1.容器和项目
<div class="con"> //容器
<div class="item"> //项目
<div>不是项目</div>
</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
大盒子：容器 小框子：项目
行、列、单元格、网格线
2.容器的几个重要属性:
1.开启网格布局：
display:grid; //块级
display:inline-grid; //行内
2.定义行和列
grid-template-columns:用来指定列的宽度
grid-template-rows: 用来指定行的高度
值的设置方式:
1.grid-template-rows:100px 300px 200px;
grid-template-columns: 100px 300px 200px;
2.grid-template-rows:10% 30% 60%;/*凑成100%*/
grid-template-columns: 10% 30% 60%;
.main{
background-color: aqua;
width: 600px;
height: 600px;
border:1px solid red;
margin: 100px auto;
display: grid; /*定义网格布局*/
grid-template-rows:200px 200px 200px;/*定义几个数字就是几行*/
grid-template-columns: 200px 200px 200px ;/*定义几个数字就是几列*/
}
3.auto 由浏览器自己决定
grid-template-rows:10% auto 60%;/*尽量别设置俩个*/
grid-template-columns: 10% 30% auto;
4.repeat() 接收两个参数,第一个重复的次数,第二个是重复的值
grid-template-rows:repeat(3,33%);/*等分成3等份*/
grid-template-columns:repeat(2,100px 80px 20px);/*六格：100 80 20 100 80 20*/
5.fr关键字
width:500px;
grid-template-columns: 1fr 50px 4fr;/*90 50 360[电脑会自动给你分配，即使算不开]*/
grid-template-columns: 90px 50px 360px;
一个fr的宽度:(500-50)/(1+4)
6.minmax() 设置范围
grid-template-rows: 1fr 520px minmax(50px,1fr) ;
grid-template-columns: 1fr 520px minmax(50px,1fr);/*先满足minmax(50px,1fr)，剩余的=1fr*/
接收两个参数:分别是最小值和最大值.
grid-column-gap /* 列与列之间的间距*/
grid-row-gap /*行与行之间的间距*/
grid-gap:20px 10px; /*简写:行 列;*/
3.设置单元格内容的对齐方式：
justify-items 设置单元格内容水平方向的对齐方式
align-items 设置单元格内容垂直方向的对齐方式
简写：place-items：垂直 水平
值:
start 起始边缘
end 结束边缘
center 居中
stretch 拉伸
整个内容区域在容器中的对齐方式【在单元格小的情况下】
justify-content 设置整个内容区域在容器在水平方向的对齐方式
align-content 设置整个内容区域在区域中垂直方向上的对齐方式
简写：place-content：垂直 水平；
值：
start
end
center
space-around
space-between
space-evenly
stretch
6、bootstrap
移动优先的框架
1、使用：
1.去官网下载js，css文件
2.解压，放到项目中
3.把文件引入到页面
js注意：jquery要放在bootstrap前面，bootstrap要得到jquery支持
注意：IE8以下不支持的
2、栅格系统来进行布局
原理：一行12份
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，
随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
响应式版心：“行（row）”必须包含在 .container （固定宽度）或
.container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
图片：
col-lg- 大屏幕
col-md- 小屏幕
col-sm- 平板
col-xs- 手机
3、按钮
btn btn-primary 蓝色按钮
btn btn-success 绿色按钮
4、栅格系统
<div class="container-fluid">
<div class">
<div class="row">
</div>
</div>
布局
表格
.table 基本的样式
.table-striped 斑马条纹样式
.table-bordered 表格和其中的每个单元格增加边框。
.table-hover 让 <tbody> 中的每一行对鼠标悬停状态作出响应
css全局样式中的所有设置
小图标
【阿里巴巴图片库直接引，不用class类名】
7、sass语法：
是css的一种扩展语法:
1、使用：
1.需要安装软件
2.定义css文件
3.页面引入css文件
<link href="xx.css" rel="stylesheet"/>
2、语法：
1.变量：
$a:300px;
$b:$a*2;【运算也可以】
2.嵌套：
.d1{
width:100px;
h1{
height:100px;
}
}
3.继承：
通过@extend 关键字 继承样式
.d1{width:100px;height:100px;}
.d2{color:red;}
d2想继承d1
.d2{color:red;@extend .d1}
4.函数：
@mixin a($color:red){
border:solid 1px $color;
}
.d1{
@include a("blue")
}
5.判断：
@if @else 关键词 进行判断
案例：
定义变量
$w:100px;
@if $w==200{color:red;}
@if $w>300px{color:blue;}
@else{color:yellow;}
6. 循环：
@for 关键字
@for $i from 1 through 3 {
.d#{$1}{from-size:5px*$i}
}
from 开始
through 结束
转换成css
.d1{font-size:5px;}
.d2{font-size:10px;}
.d3{font-size:15px;}
6668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
