浮动作业 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动作业</title> <style type="text/css"> .box { width: 1000px; margin: 0 auto; } div div { font: 900 30px/100px 'STSong'; text-align: center; color: white; width: 200px; height: 100px; background: green; float: left; } .b6 { width: 600px; background-color: yellow; } .b7 { width: 400px; height: 200px; background: yellowgreen; float: right; } .b8 { width: 300px; height: 150px; background-color: brown; float: left; } .b9 { width: 300px; height: 150px; background-color: black; float: left; } .b10 { width: 400px; height: 150px; background-color: cyan; float: right; } .b11 { width: 600px; background-color: red; float: left; } .b12 { width: 1000px; background-color: blue; float: left; } </style> </head> <body> <div class="box"> <div class="b1">1</div> <div class="b2">2</div> <div class="b3">3</div> <div class="b4">4</div> <div class="b5">5</div> <div class="b6">6</div> <div class="b7">7</div> <div class="b8">8</div> <div class="b9">9</div> <div class="b10">10</div> <div class="b11">11</div> <div class="b12">12</div> </div> </body> </html>
浮动作业2 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>作业2</title> <style type="text/css"> .box { width: 600px; margin: 0 auto; } .l, .m, .r { width: 200px; float: left; } .l div, .r div { background-color: red; height: 180px; } .m div { background-color: yellow; height: 275px; } div div div:not(:first-child) { margin-top: 10px; } </style> </head> <body> <!-- .box>(.l>div*3)+(.m>div*2)+(.r>div*3) --> <div class="box"> <div class="l"> <div></div> <div></div> <div></div> </div> <div class="m"> <div></div> <div></div> </div> <div class="r"> <div></div> <div></div> <div></div> </div> </div> </body> </html>
z-index <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> .box { /*辅助子级进行绝对定位*/ position: relative; width: 400px; height: 400px; background-color: red; margin: 0 auto; } .d1, .d2, .d3 { width: 200px; height: 200px; position: absolute; } .d1 { background-color: orange; } .d2 { background-color: blue; top: calc(50% - 100px); left: calc(50% - 100px); } .d3 { background-color: black; right: 0; bottom: 0; } /*脱离文档流的标签,具有z-index属性,可以用来控制显示层次的优先级,值为任意正整数*/ .d2 { z-index: 88888 } .d3 { z-index: 666 } </style> </head> <body> <!-- 需求1:d1,d2,d3均为box的一半大小 --> <!-- 需求2:d1左上角,d2居中,d3右下角 --> <!-- 需求3:d2区域在最上方(会覆盖d1,d3的重叠部分) --> <div class="box"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </div> </body> </html>
flex布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>flex布局</title> <style type="text/css"> .container { width: 600px; height: 600px; border: 1px solid black; margin: 0 auto; } .item { /*width: 200px;*/ /*height: 200px;*/ /*border-radius: 50%;*/ background-color: orange; font-size: 80px; } /*容器:规定容器为flex,则容器内的标签会成为该容器的项目(item)*/ .container { display: flex; } .item { /*默认只能一行排列,所有item总宽不允许超出container宽度*/ /*width: 300px;*/ /*默认情况下item可以不规定高度,高度会自适应父级*/ /*item没有设置宽度下,可以通过flex-grow决定对于父级的占比*/ } /*.it1, .it3 { flex-grow: 1; } .it2 { flex-grow: 3; background-color: pink }*/ /*container属性*/ .container { /*flex-direction: row | row-reverse | column | column-reverse; 方向*/ /*flex-direction: column-reverse;*/
/*flex-wrap: nowrap | wrap | wrap-reverse;换行方式*/ /*flex-wrap: wrap;*/
/*justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式*/ /*item为沾满父级区域*/ justify-content: space-around; } /*item属性*/ .item { /*width: 300px; height: 200px;*/ }
.item { width: 100px; } </style> <!-- 总结 --> <!-- 1.将父级display属性设置为flex,则父级成为container,子级成为item --> <!-- 2.container设置item的排列方向flex-direction --> <!-- 3.item对于container的空间占比flex-grow --> </head> <body> <!-- 学习目的: --> <!-- 之前学习的盒模型布局(display) float布局 position都不能很好的解决block垂直居中的问题,flex布局擅长 -->
<div class="container"> <div class="item it1">1</div> <div class="item it2">2</div> <div class="item it3">3</div> </div> </body> </html>
响应式布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>响应式布局</title> <style type="text/css"> /*基本样式块*/ /*.box { max-width: 1200px; width: 95%; margin: 0 auto; background-color: red!important; } .it { width: 300px; height: 300px; font: 900 50px/300px 'STSong'; text-align: center; float: left; border-radius: 50%; background-color: orange; } .box:after { content: ""; display: block; clear: both; }*/ html, body { margin: 0; } .it { height: 300px; background-color: orange; font: 900 50px/300px 'STSong'; text-align: center; border-radius: 50%; float: left; } .box:after { content: ""; display: block; clear: both; } /*屏幕宽度超出1200px*/ @media only screen and (min-width: 1200px) { /*1.在响应式布局内,css语法同正常样式表语法*/ /*2.响应式布局之间存在不同屏幕尺寸的限制,使用样式相互不影响*/ /*解释:满足当前屏幕尺寸时,该样式块起作用,不满足时,则样式块失效*/ /*3.当响应式布局中样式块起作用时,会与正常样式块设置协同布局,遵循选择器的优先级规则*/ .box { background-color: pink; } .it { width: 25%; }
/*原则:*/ /*1.采用响应式布局的页面,基本样式块只做共性样式设置 需要根据页面尺寸进行适应变化的样式均有响应式布局处理*/ /*2.要进行响应式布局的页面要处理所有屏幕尺寸下的样式块*/ } /*屏幕宽度间于600至1200px*/ @media only screen and (min-width: 600px) and (max-width: 1200px) { .box { background-color: brown; } .it { width: 30%; margin: 0 calc(10% / 6); }
} /*屏幕宽度小于600px*/ @media only screen and (max-width: 600px) { .box { background-color: cyan; } .it { width: 80%; margin-left: 10%; min-width: 300px; } } </style> </head> <body> <div class="box"> <div class="it">1</div> <div class="it">2</div> <div class="it">3</div> <div class="it">4</div> <div class="it">5</div> <div class="it">6</div> <div class="it">7</div> <div class="it">8</div> <div class="it">9</div> <div class="it">10</div> <div class="it">11</div> <div class="it">12</div> </div> </body> </html>
过度 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过度</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; /*过度*/ /*持续时间*/ /*来去均具有过度效果*/ transition-duration: .5s; /*延迟时间*/ /*transition-delay: 1s;*/ /*过度属性: all*/ /*transition-property: width, height;*/ /*过度曲线*/ /*transition-timing-function: linear;*/
/*整体设置*/ /*transition: all .3s .1s linear;*/ transition: .3s cubic-bezier(0,.99,0,.99); } .hover { width: 200px; height: 200px; margin: 0 auto; } /*可以制造第二状态的处理方式*/ .hover:hover .box { width: 400px; height: 190px; background-color: red; /*去向第二状态才有过度效果*/ /*transition-duration: .1s;*/ } .box:active {
} </style> </head> <body> <!-- 过度:从一个状态以动画方式变成另一种状态的这种变化过程就叫做过度 --> <!-- 过度效果通过hover产生,可以制作一个hover层 --> <!-- hover层处理方式:与显示层同等区域大小 --> <!-- 同样可以将显示层的位置交于hover层处理 --> <div class="hover"> <div class="box"></div> </div> </body> </html>
过度案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过度案例</title> <style type="text/css"> .box { width: 300px; height: 300px; margin: 0 auto; border-bottom: 1px solid black; position: relative; } .line { width: 30px; height: 30px; background-color: orange; position: absolute; bottom: 5px; /*top: 270px;*/ left: 120px; transition: .4s; } .line:hover { height: 200px; } .b { width: 30px; height: 10px; border-radius: 50%; background-color: #333; position: absolute; bottom: -5px } .t { width: 30px; height: 10px; border-radius: 50%; background-color: #333; position: absolute; top: -5px } </style> </head> <body> <div class="box"> <div class="line"> <div class="t"></div> <div class="b"></div> </div> </div> </body> </html>
动画 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } /*动画样式*/ .box { /*绑定动画名*/ animation-name: wasai; /*持续时间*/ animation-duration: 1s; /*延迟时间*/ /*animation-delay: .1s;*/ /*动画结束停留位置:backwards起点 forwards终点*/ /*animation-fill-mode: forwards;*/ /*运动次数 infinite无数次*/ animation-iteration-count: 4; /*多次运动方向的规则*/ /*alternate:来回*/ /*alternate-reverse:终点开始来回*/ /*animation-direction: alternate-reverse;*/quotes: ; /*动画状态 running*/ /*animation-play-state: paused;*/
/*整体设置*/ animation: wasai 1s 2 linear alternate; } .box:hover { animation-play-state: running; } /*动画体*/ @keyframes wasai{ 0% {
} 100% { width: 400px; } } @keyframes wasai1{ 0% {} 100% {} } @keyframes wasai2{ 0% {} 100% {} } </style> </head> <body> <div class="box"></div> </body> </html>