day6
一、定位
1.flex固定定位的特点:脱离文档流,不会占位置;相对于body定位;不区分元素类型;不会随滚动条的滚动而滚动。
2.sticky粘性定位的特点:是在固定定位和相对定位之间的一种定位。如果设置了坐标,满足条件,那么他就是固定定位,反之就是相对定位。
3.吸顶效果
*{ margin: 0; padding: 0; } header{ width: 100%; height: 200px; background-color: hotpink; } nav{ width: 100%; height: 80px; background-color: #ccc; position: sticky; top: 0; } main{ width: 100%; height: 2000px; background-color: orange; }
4.轮播图结构:
opacity,表示透明:取值范围0-1 0.1 0.2... 可以省略0不写;css3新增rgba()表示颜色值加透明。rgb表示的计算机的三原色 red、green、blue; 圆角 左上 右上 右下 左下,border-radius: 10px 5px 15px 20px;border-top-left-radius: 20px
.slider{ width: 500px; height: 500px; border: 1px solid; margin: 50px auto; position: relative; } .slider ul{ position: relative; } .slider ul li{ width: 500px; height: 500px; position: absolute; } .slider ul li img{ width: 100%; height: 100%; }
.slider ul li.show{ z-index: 1; } .slider .btn{ width: 500px; height: 50px; position: absolute; z-index: 2; top: 50%; margin-top: -25px; } .slider .btn span{ float: left; width: 50px; height: 50px; background-color: rgba(0, 0, 0, .5); color: #fff; font-size: 20px; font-weight: bold; text-align: center; line-height: 50px; cursor: pointer; } .slider .btn span:nth-child(1){ border-top-right-radius: 25px; border-bottom-right-radius: 25px; } .slider .btn span:nth-child(2){ float: right; border-top-left-radius: 25px; border-bottom-left-radius: 25px; } .slider ol{ width: 105px; height: 15px; position: absolute; bottom: 30px; z-index: 2; left: 0; right: 0; margin: 0 auto; } .slider ol li{ width: 15px; height: 15px; border-radius: 50%;//圆 float: left; background-color: hotpink; font-size: 12px; text-align: center; line-height: 15px; margin: 0 3px; cursor: pointer; } .slider ol li:hover{ background-color: greenyellow; color: red; } <div class="slider"> <!-- 图片区域 --> <ul> <li class="show"><a href="#"><img src=""></a></li> <li><a href="#"><img src=""></a></li> <li><a href="#"><img src=""></a></li> <li><a href="#"><img src=""></a></li> <li><a href="#"><img src=""></a></li> </ul> <!-- 左右按钮区域 --> <div class="btn"> <!-- 预留字符:<表示小于,>表示是大于。 表示空格 ×表示乘号 --> <span><</span> <span>></span> </div> <!-- 小圆圈区域 --> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div>
5.小广告
*{ margin: 0; padding: 0; } body{ background-color: #000; } .hot{ width: 500px; height: 300px; border: 1px solid; background: url("") no-repeat; background-size: 100% 100%; position: fixed; bottom: 20px; right: 20px; } .hot span{ width: 15px; height: 15px; font-size: 12px; text-align: center; line-height: 14px; background-color: #ccc; position: absolute; right: 0; top: 0; cursor: pointer; opacity: .3; color: #fff; } .hot h3{ color: red; margin-top: 50px; } <a href="https://www.4399.com"> <div class="hot"> <span>×</span> <marquee> <h3>夜深了,小伙子孤独寂寞冷了吗?如果你感觉累了,快来点我~</h3> </marquee> </div> </a>
6.图片放大
*{ margin: 0; padding: 0; } body{ background-color: black; } ul{ width: 800px; height: 500px; margin: 100px auto; } ul li{ list-style: none; width: 120px; height: 120px; border: 1px solid #ccc; margin: 20px; float: left; position: relative; } ul li>.pic1{ width: 100%; height: 100%; /* 注意点:图片如果设置padding值并不会把图片给撑大,会撑出图片内容距离图片边框之间的距离 */ padding: 3px; box-sizing: border-box; } ul li>.pic2{ width: 240px; height: 240px; border: 1px solid #ccc; padding: 3px; position: absolute; left: -60px; top: -60px; display: none; z-index: 999; } ul li:hover .pic2{ display: block; } <li> <img src="./img/02.jpg" class="pic1"> <img src="./img/02.jpg" class="pic2"> </li> <li> <img src="./img/28.jpg" class="pic1"> <img src="./img/28.jpg" class="pic2"> </li> <li> <img src="./img/16.jpg" class="pic1"> <img src="./img/16.jpg" class="pic2"> </li> <li> <img src="./img/01.jpg" class="pic1"> <img src="./img/01.jpg" class="pic2"> </li> <li> <img src="./img/25.jpg" class="pic1"> <img src="./img/25.jpg" class="pic2"> </li> <li> <img src="./img/02.jpg" class="pic1"> <img src="./img/02.jpg" class="pic2"> </li> <li> <img src="./img/28.jpg" class="pic1"> <img src="./img/28.jpg" class="pic2"> </li> <li> <img src="./img/16.jpg" class="pic1"> <img src="./img/16.jpg" class="pic2"> </li> <li> <img src="./img/01.jpg" class="pic1"> <img src="./img/01.jpg" class="pic2"> </li> <li> <img src="./img/25.jpg" class="pic1"> <img src="./img/25.jpg" class="pic2"> </li> <li> <img src="./img/02.jpg" class="pic1"> <img src="./img/02.jpg" class="pic2"> </li> <li> <img src="./img/28.jpg" class="pic1"> <img src="./img/28.jpg" class="pic2"> </li> </ul>
二、过度属性
1.语法:transition-property:width,height,background-color
2.过渡时间:transition-duration: 2s
3.过度执行延迟时间:transition-delay:2s
4.过度的动画:transition-timing-function: ease-in加速 ease-out减速 linear匀速 ease-in-out先加速再减速
5.缩写形式:transition: all 2s ease-in
三、文本、盒子阴影
text-shadow:: 5px 5px 5px green 值1表示阴影的水平位置 值2表示阴影的垂直位置 值3表示阴影的模糊程度 值4表示阴影的颜色值
box-shadow:5px 5px 5px green 值1表示阴影的水平位置 值2表示阴影的垂直位置 值3表示阴影的模糊程度 值4表示阴影的颜色值
四、弹性盒布局
1.弹性盒也叫伸缩布局盒模型,能让子项目改变其宽度、高度、顺序。flex容器会使子项目扩展来填充可用空间,或缩小他们以防止溢出容器。
主轴-水平方向或x轴
侧轴-垂直方向或y轴
2.弹性盒属性
①伸缩流方向 flex-direction 定义伸缩项目在伸缩容器中的方向 row:从左到右 row-reverse:从右到左 column:从上到下 column-reverse:从下到上
②主轴对齐 justify-content 定义伸缩项目沿主轴线的对齐方式 flex-start:伸缩项目向一行的起始位置靠齐 flex-end:伸缩项目向一行的结束位置靠齐 center:伸缩项目向一行的中间位置靠齐 space-between:伸缩项目会平均的分布在行里 space-around:伸缩项目会平均的分布在行里,两端保留一半的空间 space-evenly:项目均匀分布,所有项目之间及项目与边框之间距离相等
③侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式 flex-start:伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边 flex-end:伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边 center:伸缩项目的外边距在该行的侧轴上居中放置 baseline:伸缩项目根据伸缩项目的基线对齐 stretch:伸缩项目拉伸填充整个伸缩容器
④换行 flex-wrap nowrap 不换行 默认值,不管超出还是不超出都不会换行 wrap 换行 一旦伸缩项目超出伸缩容器,那么就会换行 wrap-reverse 换行反向 主轴水平时,上下反向,主轴垂直时,左右反向
⑤伸缩流方向属性与换行属性缩写形式 flex-flow flex-flow:换行 伸缩方向; 两个值同时定义或者单独定义都生效,不分先后顺序
⑥align-self(加在子元素上):主要用来设置单独伸缩项目在侧轴的对齐方式。注意点:align-self可以覆盖align-items flex-start:伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边;(元素位于容器的开头) flex-end:伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边;(元素位于容器的结尾) center:伸缩项目的外边距盒 在该行的侧轴上居中放置;(元素位于容器的中间) stretch:伸缩项目拉伸填充整个伸缩容器。(元素被拉伸以适应容器)
⑦堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式; 往往要与换行同时应用,没有换行就不存在多行的情况 flex-start:各行向伸缩容器的起点位置堆叠;(没有行距) flex-end:各行向伸缩容器的结束位置堆叠;(底部对其没有行距) center:各行向伸缩容器的中间位置堆叠;(居中没有行距) space-between:各行在伸缩容器中平均分布;(两端对齐,中间自动分配) space-around:各行在伸缩容器中平均分布,两端保留一半的空间;(自动分配距离)
⑧显示顺序order(加在子元素上)默认是标准流的顺序排序,在弹性盒里可以通过order来改变顺序。不定义的会排在前面,数字越大越后面。
⑨flex(设置在子元素上) 作用:可以让元素自动占用容器的可用空间,等比划分 flex:1; flex:2
⑩flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大,如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
11)flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。 负值对该属性无效。
12)flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)
浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。 它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。不常用,还在不断变化中。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto