60、
59、
58、
57、搜索框处理
@media screen and (min-width: 1920px) and (max-width: 2199px) {
.filter-container {
.el-form {
.filter-item {
//flex: 0 0 21%;
flex: 0 0 14%;
}
}
&.hidden {
.filter-item:not(:nth-child(-n+6)) {
display: none;
}
}
}
}
56、@media screen and (resolution: 1.25dppx) {
55、苹果手机，IOS 不兼容 text-algin:justify
label::after {
content: '';
width: 100%;
}
54、水平居中
- position: absolute;
- left: 50%;
- transform: translate(-50%, 0);
53、box-sizing属性border-box，content-box，其实也是理解正常盒模型与异常盒模型。
border-box 设置的宽 = width + （父元素）padding + （父元素）border
52、transition: all 0.2s;
51、ul {
- list-style: none;
}
50、input[type=submit]
49、background: #00a4ff url(images/search_06.png) center center no-repeat;
48、box-shadow
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
47、 携程网
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
min-width: 320px; /*最小宽度*/
max-width: 540px; /*最大宽度*/
margin: 0 auto;
}
header {
width: 100%; /*继承body 的高度 body 540*/
height: 100px;
}
header img {
width: 100%; /*继承header 的宽度*/
height: 100%;
}
nav {
padding: 8px;
}
.row {
width: 100%;
height: 90px;
background-color: #ff697a;
border-radius: 8px;
display: flex; /*伸缩布局， 父亲加*/
margin-bottom: 5px;
}
nav .row:nth-child(2) {
background-color: #3d98ff;
}
nav .row:nth-child(3) {
background-color: #44c522;
}
nav .row:nth-child(4) {
background-color: #fc9720;
}
.row3 {
flex: 1; /*孩子每人占1份*/
border-left: 1px solid #fff;
}
.row div:first-child {
border: 0;
}
.hotel {
display: flex;
flex-direction: column; /*垂直排列*/
}
.hotel a {
flex: 1;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 45px;
text-decoration: none;
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
}
.hotel a:first-child {
border-bottom: 1px solid #fff;
}
</style>
</head>
<body>
<header>
<img src="images/ctrip.jpg" alt=""/>
</header>
<nav>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
</nav>46、伸缩布局固定宽度
<style>
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*父盒子添加 flex*/
display: flex; /*伸缩布局模式*/
flex-direction: row-reverse; /*给父盒子添加 排列方式 可以是水平 也可以 是 垂直*/
min-width: 500px;
}
section div {
height: 100%;
}
section div:nth-child(1) {
background-color: pink;
width: 200px;
}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
width: 100px;
}
section div:nth-child(3) {
background-color: pink;
flex: 1;/*子盒子添加分数*/
}
section div:nth-child(4) {
background-color: skyblue;
flex: 1;/*子盒子添加分数*/
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>45、伸缩布局三等份
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section {
width: 80%;
height: 200px;
border: 1px solid green;
margin: 100px auto;
/*父盒子添加 flex*/
display: flex; /*伸缩布局模式*/ /*这个盒子就会拥有弹性 弹性布局（弹性盒子）*/
}
section div {
height: 100%;
}
section div:nth-child(1) {
background-color: pink;
flex: 1; /*子盒子添加分数 flex:1 不加单位*/
}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
flex: 2;/*子盒子添加分数*/
}
section div:nth-child(3) {
background-color: pink;
flex: 3;/*子盒子添加分数*/
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>44、无缝滚动效果
<style>
* {
margin: 0;
padding:0;
}
ul {
list-style: none;
}
nav {
width: 882px;
height: 86px;
border: 1px solid pink;
margin: 100px auto;
overflow: hidden;
}
nav li {
float: left;
}
nav ul {
width: 200%;
animation: moving 3s linear infinite; /*引用动画*/
/*linear 匀速动画*/
}
/*定义动画*/
@keyframes moving {
form {
transform: translateX(0);
}
to {
transform: translateX(-882px);
}
}
nav:hover ul { /*鼠标经过nav 里面的ul 就暂停动画*/
animation-play-state:paused; /*鼠标经过暂停动画*/
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="images/nav1.jpg" alt=""/></li>
<li><img src="images/nav2.jpg" alt=""/></li>
<li><img src="images/nav3.jpg" alt=""/></li>
<li><img src="images/nav4.jpg" alt=""/></li>
<li><img src="images/nav5.jpg" alt=""/></li>
<li><img src="images/nav6.jpg" alt=""/></li>
<li><img src="images/nav7.jpg" alt=""/></li>
<li><img src="images/nav1.jpg" alt=""/></li>
<li><img src="images/nav2.jpg" alt=""/></li>
<li><img src="images/nav3.jpg" alt=""/></li>
<li><img src="images/nav4.jpg" alt=""/></li>
<li><img src="images/nav5.jpg" alt=""/></li>
<li><img src="images/nav6.jpg" alt=""/></li>
<li><img src="images/nav7.jpg" alt=""/></li>
</ul>
</nav>43、奔跑吧，汽车
<style>
img {
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/
animation: car 5s infinite; /*引用动画*/
}
/*定义动画*/
@keyframes car {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(1000px, 0, 0);
}
51% {
transform: translate3d(1000px, 0, 0) rotateY(180deg);
/*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/
}
99% {
transform: translate3d(0, 0, 0) rotateY(180deg);
/*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/
}
}
</style>
</head>
<body>
<img src="images/car.jpg" width="100" alt=""/>42、多组动画
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
/*animation: go 2s ease 0s infinite alternate; 引用动画*/
animation: gos 2s infinite; /*引用动画*/
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/
/*动画名称是自己定义的 go google*/
/*infinite 无限循环*/
/*一般情况下，我们就用前2个 animation: go 2s*/
}
/*@keyframes go {} 定义动画*/
@keyframes gos {
0% { /*起始位置，等价于 form*/
transform: translate3d(0, 0, 0) ;
}
25% {
transform: translate3d(800px, 0, 0);
}
50% {
transform: translate3d(800px, 400px, 0);
}
75% {
transform: translate3d(0, 400px, 0);
}
100% {
transform: translate3d(0, 0, 0); /*100% 相当于结束位置 to*/
}
}
/* 动画结束之后会返回原来的位置！！！*/
</style>
</head>
<body>
<div></div>41、体会动画
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
animation: go 2s ease 0s infinite alternate; /*引用动画*/
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/
/*动画名称是自己定义的 go google*/
/*infinite 无限循环*/
/*一般情况下，我们就用前2个 animation: go 2s*/
}
/*@keyframes go {} 定义动画*/
@keyframes go {
from {
transform: translateX(0)
}
to {
transform: translateX(600px)
}
}
</style>
</head>
<body>
<div></div>40、两面翻转的图片
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
/*transform-style: preserve-3d;*/
/* 1.保留当前空间位置
2.是图片扁平化*/
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 2s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /*不是正面对向屏幕，就隐藏*/
}
div:hover img {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="images/qian.svg" alt=""/>
<img src="images/hou.svg" alt=""/>
</div>
</body>
</html>39、开门大吉 bg.png图片如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section {
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
background: url(images/3.jpg) no-repeat;
position: relative;
perspective: 1000px; /*给父盒子添加透视效果*/
}
.door-l, .door-r {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: pink;
transition: all 1s; /*两个门都做过渡效果*/
background: url(images/bg.png);
}
.door-l {
left: 0;
border-right: 1px solid #000;
transform-origin: left;/* 左侧盒子按照左边翻转*/
}
.door-r {
right: 0;
left: 1px solid #000;
transform-origin: right;/* 右侧盒子按照右边翻转*/
}
.door-l::before, .door-r::before { /*伪元素 就是插入一个元素标签*/
content: '';
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%; /*圆角*/
transform：translateY(-50%); /*translate 如果是百分比， 就是走自己高度的一半*/
}
.door-l::before {
right: 5px;
}
.door-r::before {
left: 5px;
}
/*鼠标经过section 盒子 两个门盒子 翻转 rotateY*/
section:hover .door-l {
transform: rotateY(-130deg); /*因为往左边翻转，所以是负值*/
}
section:hover .door-r {
transform: rotateY(130deg);
}
</style>
</head>
<body>
<section>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
</body>
</html>38、transform: rotateZ(360deg); 顺时针放开 旋转
<style>
img {
margin: 100px;
transition: all 5s;
}
img:hover {
transform: rotateZ(360deg);
}
</style>
</head>
<body>
<img src="images/1498446043198.png" WIDTH="300" alt=""/>37、transform: rotateY(360deg);
36、perspective: 1000px; /*视距 距离 眼睛到屏幕的距离 视距越大效果越不明显 视距越小，透视效果越明显*/
transform: rotateX(360deg); 翻转
35、变形-倾斜 transform: skew(0, -30deg);
34、旋转 transform: rotate(60deg);
<style>
div {
width: 250px;
height: 170px;
border: 1px solid pink;
margin: 200px auto;
position: relative;
}
div img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right;
}
/*鼠标经过div 第一张图片旋转*/
div:hover img:nth-child(1){
transform: rotate(60deg);
}
div:hover img:nth-child(2){
transform: rotate(120deg);
}
div:hover img:nth-child(3){
transform: rotate(180deg);
}
div:hover img:nth-child(4){
transform: rotate(240deg);
}
div:hover img:nth-child(5){
transform: rotate(300deg);
}
div:hover img:nth-child(6){
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="images/6.jpg" alt=""/>
<img src="images/5.jpg" alt=""/>
<img src="images/4.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/1.jpg" alt=""/>
</div>33、变形中心
<style>
img {
margin: 200px;
transition: all 0.6s;
transform-origin: 20px 30px;
}
img:hover {
transform: rotate(360deg); /* deg 度数*/
}
</style>
</head>
<body>
<img src="images/pk1.png" width="200" alt=""/>32、2D变形-旋转 transform: rotate(720deg); /* deg 度数*/
31、2D变形-缩放 transform: scale(1.2);
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
}
div:hover {
transform: scale(2); /*x 水平缩放 y垂直缩放 如果只写一个参数， 宽度和高度都缩放*/
}
section {
width: 632px;
height: 340px;
margin: 0 auto;
overflow: hidden; /*溢出隐藏*/
border: 2px solid red;
}
section img {
transition: all 0.2s; 因为图片缩放了， /*实际图片做动画 所以过渡要给img 做动画 谁做动画，谁加过渡*/
}
section:hover img { /*鼠标经过section 的时候 里面的img做 缩放*/
transform: scale(1.2);
}
</style>
</head>
<body>
<div></div>
<section>
<img src="images/mi.jpg" alt=""/>
</section>30、transition 点击动一下
div {
width: 100px;
height: 100px;
background-color: pink;
/*transform: translateX(x, y)*/
/*变形： 移动*/
transition: all 0.5s;
}
div:active {
transform: translate(50px, 50px);
}29、过渡效果
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
/* transition: width 0.6s ease 0s, height 0.3s ease-in 1s; */
/* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
/*transition: all 0.6s; 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
/*默认的是ease 先快在慢*/
transition: width 0.5s,height 1s;
}
div:hover { /* 鼠标经过盒子，我们的宽度变为400 */
width: 600px;
height: 600px;
background: url(./images/3.jpg) center no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>28、伪元素after和before
<style>
/* .one 类选择器 :hover 伪类选择器 ::after 伪元素选择器 */
div::before {
content: "楚乔";
background-color: pink;
border: 1px solid red;
width: 100px;
height: 100px;
display: block;
/* 类选择 伪类选择器 就是选区对象
伪元素选择器 本质上是 插入一个元素（标签 盒子） 只不过是行内元素 span a */
}
div::after {
content: "宇文玥的";
display: block;
width: 50px;
height: 50px;
border: 1px solid skyblue;
}
</style>
</head>
<body>
<div>是</div>
<p></p>
</body>
-------------------
<style>
div {
width: 296px;
height: 180px;
margin: 20px auto;
position: relative; /* 子绝父相 */
}
div:hover::before { /* 鼠标经过之后 前面插入一个伪元素 */
content: "";
width: 100%;
height: 100%;
border: 10px solid rgba(255, 255, 255, .3);
display: block; /* 伪元素属于行内元素 要转换 */
position: absolute; /* 要伪元素不占位， 就用绝对定位 */
top: 0;
left: 0;
box-sizing: border-box; /* 把padding 和 border 都算入 width 里面 */
}
</style>
</head>
<body>
<div>
<img src="images/mi.jpg" height="180" width="296" alt="">
</div>27、字体图标的使用
<style>
@font-face { /* 电脑中没有的字体，我们需要声明 */
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */
font-size: 100px;
color: pink;
}
div::before {
font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */
font-size: 100px;
color: hotpink;
content: "\e91b";
}
</style>
</head>
<body>
<span></span>
<span></span>
<div></div>
</body>26、a text-decoration: none; 去掉下划线
25、css精灵技术 background: url(images/jd.png) no-repeat;
background-position: 0 -438px; /* 因为背景图片往上移动，所以是负值 */
24、超出的文字显示省略号 white-space: nowrap; /* 首先先需要添加这句话 强制一行*/
overflow: hidden; /* 其次必须有这句话 */
/* text-overflow: clip; 直接裁剪 */
text-overflow: ellipsis; /* 超出的部分，省略号代替 */
23、white-space: nowrap; 文本不会换行
22、/* word-break: break-all; 允许单词拆开显示 */
word-break: keep-all; /* 不允许拆开单词显示 除非连字符特殊 连字符 - z-index */
21、outline: none;/* 取消轮廓线 */ 轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
20、textarea resize: none; /* 防止文本域拖拽 */
19、定位
position: static; /* 定位模式 -- 静态定位 ， 清除定位的 */
/* 绝对定位 父亲没有定位， 孩子以浏览器为基准点对齐 */
子绝父相的由来：
1. 相对定位 占有位置 不脱标
2. 绝对定位 不占有位置 完全脱标
/*float: left; 没给盒子的宽度 浮动的盒子有模式转换的情况 转化为 行内块 宽度位内容的宽度*/
/*position: fixed; 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式 */
/* display: none;隐藏元素 不是删除 看不见了而已，但是元素一直存在页面中 但是不保留位置 block 显示*/
visibility: hidden; /* 隐藏元素 他和 display none 最大的区别是 他保留位置 visible显示*/
18、box-sizing: content-box; /* 就是以前的标准盒模型 w3c */ /* 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
box-sizing: border-box; /* padding border 不撑开盒子 */ /* 盒子大小为 width 就是说 padding 和 border 是包含到width里面的 */
17、基本文字阴影
/* text-shadow:水平距离 垂直距离 模糊 阴影颜色; */
text-shadow: 10px 3px 3px rgba(0, 0, 0, .5);
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
color: rgba(255, 255, 255, 0.7);/* 颜色半透明 */
border-radius: 50%; /* 变成一个圆 圆角 */
box-shadow: 5px 5px 10px 16px rgba(255,255,255, 0.4) inset,
5px 4px 10px rgba(0,0,0,0.3);/* 内阴影 */
16、
- background: #fff url(images/sun.jpg) no-repeat;
- background-size: 175px 192px;
- background-position: 96px 50px;
15、border-collapse: collapse; /* 合并相邻边框 */
14、 权重 <div class="king" id="wang" style="color: purple"> 王者农药 </div> !important > style="color: skyblue" > id选择器 > 类选择器 > :first-child伪类选择器 >
13、a 标签去掉下划线 text-decoration: none;
12、凹凸文字
div:first-child {
/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-child {
/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
11、background
background-color: #000;
background-image: url(images/ms.jpg);
background-repeat: no-repeat;
/* 背景图片的位置 水平居中 垂直靠上就可以了 */
background-position: center -25px;
background-attachment: fixed; /* 默认的是 scroll 滚走的 */
background: #000 url(images/ms.jpg) no-repeat fixed center -25px;
10、伪元素选择器
/* .demo 类选择器
:first-child 伪类选择器
::first-letter 伪元素选择器 */
p::first-letter { /* 选择第一个字 */
color: red;
font-size: 50px;
}
p::first-line { /* 选择第1行 */
color: green;
}
div::before { /* before 和 after 在盒子div 的内部前面插入或者是内部后面插入 */
content: "俺";
}
div::after {
content: "18岁";
}
p::selection { /* 当我们选中文字的时候，可以变化的样式(只能是字体颜色与背景颜色) */
color: pink;
font-size: 50px;
background-color: blue;
}
9、<a href="#" title="我是一个百度">百度</a> <input type="text" value="文本框">
a[title] { /* 属性选择器用中括号 来表示 */ input[type=text] {
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
8、.nav li { /* 空格 后代选择器 可以选择 儿子 孙子 重孙子.. */ .nav > li { /* 大于号 子元素选择器 只选择 亲儿子 */
7、letter-spacing: 2px; /* 字间距 */ word-spacing: 10px; /* 单词间距 针对于英文 中文无效 */
6、 text-indent: 2em; /* 此时2em 就是2个汉字的宽度 */
5、div 包着 p 垂直居中
div{
display: table;
text-align: center;
}
p{
display: table-cell;
vertical-align: middle;
}
4、子模块 position:absolute; 被其他的遮住，在对应级别（可能是父级）补充：position: relative; z-index: 2;
3.透明色 #ffffff00
2、height:100%和height:100vh的区别
vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，
但是设置height:100vh，该元素会被撑开屏幕高度一致。
1、 background-clip属性指定背景绘制区域。
background: yellow;
background-clip: content-box;
扫一扫
1302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
