本文目录:
一、小米拼接
将区域整体划分起名 => 对其他区域布局不产生影响
提出公共css => reset操作
当有区域发送显示重叠(脱离文档流导致的), 需要通过z-index调整层级
一定需要最外层,且最外层做自身布局时,不要做过多布局操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米拼接1</title> <link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/topbar.css"> <link rel="stylesheet" type="text/css" href="css/header.css"> <link rel="stylesheet" type="text/css" href="css/home.css"> </head> <body> <!-- topbar --> <div class="topbar"> <div class="topbar-container"> <div class="topbar-nav"> <a href="">小米商城</a> <span>|</span> <a href="">MIUI</a> <span>|</span> <a class="topbar-download" href=""> 下载app <div class="topbar-app"></div> </a> <span>|</span> <a href="">Select Region</a> </div> <div class="topbar-car"></div> <div class="topbar-info"> <a href="">登录</a> <span>|</span> <a href="">注册</a> <span>|</span> <a href="">消息通知</a> </div> </div> </div> <!-- header --> <div class="header"> <div class="header-container"> <h1 class="header-logo"> <a href="" title="小米官网">mi</a> </h1> <ul class="header-nav"> <li class="header-li"> <a href="">小米手机</a> </li> <li class="header-li"> <a href="">红米</a> </li> <li class="header-li"> <a href="">电视</a> </li> <!-- 待完成 --> <div class="header-nav-pic"> <ul> <li><a href=""> <p>新品</p> <div></div> <p>小米mix3</p> <p>3299元起</p> </a></li> <li><a href=""> <p>新品</p> <div></div> <p>小米mix3</p> <p>3299元起</p> </a></li> </ul> </div> </ul> <form class="header-search"> <input class="header-ctx" type="text"> <button class="header-btn fa fa-search" type="button"></button> <div class="header-search-txt"> <span>小米8</span> <span>小米mix 2s</span> </div> <!-- 待完成 --> <ul class="header-search-ads"> <li></li> </ul> </form> </div> </div> <!-- home --> <div class="home"> <div class="home-container"> <ul class="home-nav"> <li class="home-nav-title"><a href=""> <span>手机 电话卡<i class="fa fa-chevron-right"></i></span> </a></li> <li class="home-nav-title"><a href=""> <span>电视 盒子<i class="fa fa-chevron-right"></i></span> </a></li> <!-- 展开的详情 --> <ul class="home-nav-detail"> <!-- 4列 --> <li> <ul> <!-- 每列6个小行 --> <li><a href=""> 小米MIX 3 </a></li> <li><a href=""> 小米MIX 3 </a></li> </ul> </li> <li> <ul> <!-- 每列6个小行 --> <li><a href=""> 小米MIX 3 </a></li> <li><a href=""> 小米MIX 3 </a></li> </ul> </li> </ul> </ul> <!-- 待做:轮播图 --> <div class="home-slider"></div> </div> </div> </body> </html>
二、过渡动画
```
transition属性
transition属性
transition: 过渡时间(必须) 延迟时间(一般不设) 过渡属性(一般采用all默认值) 过渡曲线(贝赛尔曲线)(cubic-bezier())
过渡属性具体设置给初始状态还是第二状态 根据具体需求
```
```
```css
/*过渡的持续时间*/
transition-duration: 2s;
/*延迟时间*/
transition-delay: 50ms;
/*过渡属性*/
/*单一属性 | 属性1, ..., 属性n | all*/
transition-property: all;
/*过渡曲线*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);
```
/*过渡的持续时间*/
transition-duration: 2s;
/*延迟时间*/
transition-delay: 50ms;
/*过渡属性*/
/*单一属性 | 属性1, ..., 属性n | all*/
transition-property: all;
/*过渡曲线*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);
```
```css
/*结论:*/
/*1.尽量悬浮静止的盒子, 控制运动的盒子*/
/*2.不能确定区间范围的属性值, 不会产生动画效果*/
/*display 不能做动画 | opacity 可以做动画*/
```
/*结论:*/
/*1.尽量悬浮静止的盒子, 控制运动的盒子*/
/*2.不能确定区间范围的属性值, 不会产生动画效果*/
/*display 不能做动画 | opacity 可以做动画*/
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: red; /*通过过渡完成动画*/ /*transition: 1s;*/ /*过渡的持续时间*/ transition-duration: 2s; /*延迟时间*/ transition-delay: 50ms; /*过渡属性*/ /*单一属性 | 属性1, ..., 属性n | all*/ transition-property: all; /*过渡曲线*/ /*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/ transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34); } .box:hover { width: 800px; height: 400px; background-color: orange; } </style> <style type="text/css"> .sup { width: 800px; height: 50px; background-color: pink; margin: 0 auto; } .sub { width: 50px; height: 50px; background-color: orange; /*整体设置: 注意点 第一个时间为过渡时间, 第二个为延迟时间,可以省略, 运动曲线和运动属性可以省略,位置也不做要求*/ /*transition: .1s 1s all ease;*/ transition: .7s ease-in-out; /*display: none;*/ /*opacity: 0;*/ } .sup:hover .sub { /*margin-left: auto;*/ /*display: block;*/ /*opacity: 1;*/ margin-left: calc(100% - 50px); } /*结论:*/ /*1.尽量悬浮静止的盒子, 控制运动的盒子*/ /*2.不能确定区间范围的属性值, 不会产生动画效果*/ /*display 不能做动画 | opacity可以做动画*/ </style> </head> <body> <!-- 案例 --> <div class="sup"> <div class="sub"></div> </div> <!-- 动画: 从一种状态渐变(非瞬变)到另一种状态 --> <!-- HTML5如何实现动画: transition(过渡) | animation(动画) --> <div class="box"></div> </body> </html>
三、过度案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过渡案例</title> <style type="text/css"> .wrapper { position: relative; width: 300px; height: 300px; /*background-color: orange;*/ margin: 50px auto; border-bottom: 2px solid #ccc; } .box { position: absolute; width: 60px; height: 60px; background-color: orange; transition: .5s; /*top: 240px;*/ bottom: 10px; /*采用定位布局情况下,固定top,动画会往下延伸,反之固定bottom,动画会往上延伸,左右同理*/ left: 120px; } .box:hover { height: 300px; } .up, .down { width: 60px; height: 30px; background-color: black; border-radius: 50%; position: absolute; } /*做动画时,相当于谁是静止的*/ .up { top: -15px; } .down { bottom: -15px; } </style> </head> <body> <div class="wrapper"> <div class="box"> <div class="up"></div> <div class="down"></div> </div> </div> </body> </html>
四、盒子阴影
```css
/*x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色*/
box-shadow: 0 0 10px 10px black;
/*x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色*/
box-shadow: 0 0 10px 10px black;
/*一个盒子可以设置多个阴影, 每一套阴影间用逗号隔开*/
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;
```
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style type="text/css"> body { margin: 0; } .box { width: 200px; height: 200px; background-color: cyan; /*屏幕正中央*/ margin-top: calc(50vh - 100px); margin-left: calc(50vw - 100px) } .box { /*x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色*/ /*box-shadow: 0 0 10px 10px black;*/ /*一个盒子可以设置多个阴影*/ box-shadow: -250px 0 10px 0 red, 250px -50px 0 10px blue, 100px -225px 10px 10px yellow, 0 10px 10px -5px #333; } </style> </head> <body> <div class="box"></div> </body> </html>
五、伪类设计边框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类设计边框</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: yellow; margin: 50px auto; position: relative; } /*:before | :after*/ .box:before { content: ""; /*display: block;*/ /*会拉动盒子*/ /*margin-top: 100px;*/ /*正常*/ /*margin-left: 10px;*/ position: absolute; width: 180px; height: 1px; background-color: black; left: 10px; top: 199px; } .box:after { content: ""; position: absolute; width: 1px; height: 180px; background-color: black; top: 10px; left: 199px; } </style> </head> <body> <div class="box">12345</div> </body> </html>