Web前端开发（HTML5+CSS3+JavaScript） 课件汇 严健武 第6-11章 定位与浮动 -BOM - 副本_第1页
Web前端开发（HTML5+CSS3+JavaScript） 课件汇 严健武 第6-11章 定位与浮动 -BOM - 副本_第2页
Web前端开发（HTML5+CSS3+JavaScript） 课件汇 严健武 第6-11章 定位与浮动 -BOM - 副本_第3页
Web前端开发（HTML5+CSS3+JavaScript） 课件汇 严健武 第6-11章 定位与浮动 -BOM - 副本_第4页
Web前端开发（HTML5+CSS3+JavaScript） 课件汇 严健武 第6-11章 定位与浮动 -BOM - 副本_第5页
已阅读5页，还剩214页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端基础技术CSSJSHTML第6章6.1-位置与定位Contents目录默认位置相对位置、绝对位置固定位置粘性位置（1）位置属性，position属性(5个)取值：static(默认值，正常文档流位置：从上到下(块元素）、从左到右（行内元素）：位置固定，不可改变。relative：相对位置，相对其正常位置定位。absolute：绝对位置，相对非static的父元素定位。fixed：固定位置，相对浏览器窗口定位。sticky：粘性位置，距离可滚动容器（浏览器）边缘一定距离时固定不滚动（冻结）。z-index：多块重叠时，块在z-轴位置(position除static外)定位：使用位置属性position与定位属性left、top、right和bottom属性结合，来确定元素在页面的位置.位置属性position：A)relative：相对原来的位置，偏离左或右(left|right之一

）、上或下（top|bottom之一）位置，一般通过改变左上角（lefttop）来改变其位置。特性：（1）整体浮动在页面，不影响其他元素的布局，但仍然占据原来空间（位置）（2）应用：通常为子元素的绝对定位作为参考。例1：理解相对位置的特性认识特性：通过lefttop或bottomright来改变位置，但仍然占据原来空间。一般较少单独使用，主要作为容器为其他子元素提供参考定位。<!--相对原来的位置产生浮动；但仍旧占据原来的空间--><divclass="container"><divclass="top">默认位置</div><divclass="middle">相对位置，偏移x,y20px20px</div><divclass="bottom">默认位置</div></div>*{box-sizing:border-box;}.container{width:200px;border:10pxsolidred;}.container>div{height:40px;}.top{background-color:yellow;}.middle{background-color:gray;position:relative;}.bottom{background-color:gold;}.container:hover>.middle{

/*left:20px;top:20px;*/bottom:20px;right:20px;}B).absolute：相对具有非默认位置的父元素进行定位；脱离了原来的位置，不再占用原来位置（空间），宽度高度默认由内容决定（行内块元素特征）。特征：（1）相对取值为relative、absolute、fixed的父元素来定位在页面的任意位置。（2）整体浮动在页面，不影响其他元素的布局，不再占据原来空间（位置）（3）可用于块元素和行内元素，都具有行内块元素特征，可以设置宽度和高度；可以同时改变left和right来改变宽度；或者同时改变top和botton来改变高度。注意！！！：需要明确相对哪个父元素定位！---实际应用中，是相对具有relative位置属性的父元素相对父容器，通过同时改变left|top（左上角位置）、right|bottom（右下角位置）属性定位到任意位置；如果宽度不设定，则其宽度跟随left、right的同时改变，高度同理；父元素必须是relative，实际上，你可以认为：relative元素就是为absolute提供定位用的。（2）定位属性left：子元素左边（外侧）离父元素左边框内侧距离right：子元素右边离父元素右边框内侧距离top：子元素顶端离父元素上边框内侧距离bottom：子元素底部离父元素下边框内侧距离仅仅改变left：0；top：0；仅仅改变right：0；bottom：0；例2：理解绝对位置的特性<!--绝对位置，相对父元素浮动；不再占据原来的空间--><!--默认浮动在原来位置--><divclass="container"><divclass="top">默认位置</div><divclass="middle">绝对位置</div><divclass="bottom">默认位置</div></div>12默认绝对位置：原来位置left:0;top:0;3right:10px;bottom:10px;4右边顶部对齐(1)理解相对容器的top、left、right和bottom四个位置定位；(2)相对容器内部边框线的距离，不计父容器的padding。

*{box-sizing:border-box;}.container{width:200px;border:10pxsolidred;

/*参考定位容器*/position:relative;}.container>div{height:40px;}.top{background-color:yellow;}.bottom{background-color:gold;}.middle{background-color:gray;

position:absolute;/*2*/

/*left:0;top:0;*//*3*/

/*right:10px;bottom:10px;*//*4*/

left:190px;/*内180+10右边框*/top:-10px;

width:100px;}例3理解相对谁进行绝对定位；容器的概念---实现如下的二级导航菜单效果<divclass="container"><ulclass="nav"><li><ahref="#">导航链接1</a><divclass="nav-group"><ahref="#">二级导航11</a><ahref="#">二级导航12</a>

</div></li><li><ahref="#">导航链接2</a><divclass="nav-group"><ahref="#">二级导航21</a><ahref="#">二级导航22</a></div></li></ul></div>如果相对main进行定位，那么效果就是京东界面的导航菜单效果---试试？显示与隐藏：display属性：none/block<style>*{box-sizing:border-box;}.container{width:400px;border:1pxsolidgray;position:relative;}ul{list-style:none;padding:0;margin:0;width:200px;text-align:center;}li{position:relative;background-color:#ccc;}.nav-group{width:200px;min-height:200px;background-color:#ccc;/**/position:absolute;left:200px;top:0;/**/display:none;}li:hover.nav-group{display:block;}

</style>例4思路扩展：相对位置和绝对位置-购物车数字和图标border-radius:4px4px4px4px;/*上右下左4px圆角*/border-radius:50%;/*宽度和高度一致时，为圆*/<divclass="container"><ahref="#">我的购物车</a><divclass="cart"><spanclass="num">12</span></div></div><style>*{

box-sizing:border-box;

}a{text-decoration:none;color:#999;margin:020px;}.container{width:200px;height:40px;

/*文本元素居中：行高等于内容高度（有上下边框）*//*line-height:40px;*/line-height:38px;border:1pxsolid#ccc;/*为购物车图标参考定位*/position:relative;}/*购物车图标：容器任意位置---绝对定位*/.cart{position:absolute;width:20px;height:20px;/*居中计算：内部高度38px（不计边框）：38-20/2*/top:9px;right:40px;

background-image:url('./images/cart_empty.png');background-size:100%100%;}.num{position:absolute;width:20px;height:20px;/*圆角*/border-radius:50%;top:-10px;right:-20px;

/*文本样式*/background-color:red;color:white;font-size:12px;text-align:center;line-height:20px;}/*添加以下样式，则可以将图标移动到左边*/.cart{

left:20px;}a{padding-left:60px;}目标体现（练习）：模拟京东购物车效果鼠标悬停

<body><divclass="container"><ahref="">我的购物车</a><divclass="cart"><spanclass="num">10</span></div><divclass="line"></div><divclass="drop"></div></div>

<style>*{box-sizing:border-box;}.container{width:200px;height:60px;line-height:60px;padding-left:20px;background-color:#ccc;margin:100px;/**/position:relative;/**/border:1pxsolidred;}.container>a{text-decoration:none;background-color:yellow;}.cart{/**/.drop{width:400px;height:200px;border:1pxsolidred;/**/position:absolute;left:-1px;/*top:60px;*/top:58px;/*完全重叠*/display:none;}.line{position:absolute;border:1pxsolidwhite;left:0;right:0;top:58px;z-index:100;display:none;}.container{background-color:white;}.container:hover.drop{display:block;}.container:hover.line{display:block;}</style>width:24px;height:24px;border:1pxsolidred;/**/position:absolute;top:18px;right:40px;}.cart>.num{background-color:red;width:20px;height:20px;line-height:20px;/*注意，行高会继承*//**/position:absolute;left:14px;top:-10px;border-radius:50%;color:white;font-size:10px;text-align:center;}2C).fixed：类似绝对定位,不同的是其相对浏览器窗口定位（特殊的绝对定位），即：固定于页面指定位置；不随页面滚动而滚动；不占据正常块位置；宽度高度由内容决定，也可以改变；默认位置：lefttop为(00)注意：使用left|right|top|bottom之一或组合使其固定在某个位置。相对浏览器窗口定位。有效属性与absolute基本相同，不同之处：absolute相对页面时会随页面滚动.示例5京东侧边栏：相对页面的绝对定位，固定位置fixed的使用行内元素，如span、a等转换为块元素时可以改变宽度和高度；子元素会触发父元素的hover事件；通常使用子元素来撑大父元素<divclass="container"><ul><li><ahref="#"class="link-imgimg1"></a><ahref="#"class="link-txt">优惠券</a></li><li><ahref="#"class="link-imgimg2"></a><ahref="#"class="link-txt">我的购物车</a></li><li><ahref="#"class="link-imgimg3"></a><ahref="#"class="link-txt">客服</a></li></ul></div>*{box-sizing:border-box;}.container{position:fixed;right:0;width:40px;top:0;bottom:0;background-color:#eee;}ul{list-style:none;padding:0;margin:0;/*位置：为了居中显示*/position:absolute;width:100%;

right:0;

/*整体居中显示*/top:50%;margin-top:-60px;}li{position:relative;height:40px;}/*链接图片：无文字，带背景图*/li>a{display:block;height:100%;background-color:#ccc;}.link-img{background-size:60%60%;background-repeat:no-repeat;background-position:center;}.img1{background-image:url('./images/优惠券.png');}.img2{background-image:url('./images/购物车.png');}.img3{background-image:url('./images/客服.png');}

/*链接-提示文本*/.link-txt{position:absolute;width:160px;right:-160px;top:0;background-color:#ccc;

z-index:-1;/*文本对齐*/padding:020px;line-height:40px;}li:hover.link-txt{/*display:block;*/right:0;/*过渡效果*/transition:right1s;}</style>D).

position:sticky作用：在页面/块元素出现滚动条时，元素超过设定的top/left/right/bottom（相对出现滚动条的父容器）值则浮动在页面不滚动

注意：

必须设置top/bottom/left/right值之一；示例6理解sticky及其应用<divstyle="height:400px;border:1pxsolidred;">这是其他内容，模拟页面其他内容，目的使滚动条出现</div><divclass="sticky">这是会浮动的div</div><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><divstyle="height:400px;border:1pxsolidred;">这是其他内容，模拟页面其他内容，目的使滚动条出现</div><style>.sticky{height:40px;background-color:yellow;/*sticky*/position:sticky;top:100px;}</style>12<body><divstyle="height:800px;background-color:yellowgreen;"></div><divclass="container"><divclass="top"></div><divclass="sticky">sticky</div><divclass="bottom"></div></div><divstyle="height:800px;background-color:yellowgreen;"></div></body><style>/*容器带注释和取消注释的效果，说明：相对具有滚动条的父元素*/.container{overflow:scroll;height:400px;}.top{height:400px;background-color:red;}.sticky{height:100px;background-color:green;position:sticky;top:0;}.bottom{height:400px;background-color:blue;}</style>本例说明：粘性定位是相对具有滚动条的父元素;可能是浏览器窗口，也可能其他容器；

Z轴位置：z-index:数字调整重叠块在z轴的位置,数字越大，越靠前。适用:position为relative和absolute、fixed<divclass="container"><divclass="imgdiv1"></div><divclass="imgdiv2"></div><divclass="imgdiv3"></div></div><style>.container{width:400px;border:1pxsolidred;

/*作为子元素的参考位置*/position:relative;}.img{width:200px;height:200px;border:10pxsolidred;/*背景图统一设置*/background-repeat:no-repeat;background-size:100%100%;/*位置参考，目的叠加起来演示*/position:absolute;}.div1{background-image:url('./images/1.jpg');left:10px;top:10px;}.div2{background-image:url('./images/2.jpg');left:40px;top:40px;}.div3{background-image:url('./images/3.jpg');left:80px;top:80px;}.img:hover{z-index:100;}</style>Web前端基础技术CSSJSHTML第6章浮动Contents目录浮动一、浮动浮动是指元素脱离原来的位置，在原来位置上“浮动”出来，不再占据父元素的空间，并具有行内块特征（不换行、可改变大小）。类似绝对定位元素，区别在仅浮动的元素不能直接改变其位置。目的：使多个浮动元素水平排列。应用：水平导航菜单

；浮动列布局用法：float:left左浮动，多个浮动元素逐个从左到右紧密排列。float:right右浮动，多个浮动元素逐个从右到左紧密排列取值为none取消浮动。特性：1.浮动元素不再占据父元素空间，父元素高度为0；具有行内块特征（不换行，超过容器宽度才折行；大小默认由内容决定，可以改变宽度、高度）。2.有副作用：后续非浮动元素将占用浮动元素原有空间，且其后所有元素的文本将环绕浮动元素。链接1链接2链接3链接412例1认识float特性，以及如何消除浮动带来的影响。<divclass="container"><divclass="fl">div1</div><divclass="fl">div2</div></div><divclass="no-fl">正常元素</div><style>*{

box-sizing:border-box;

}.container{

width:400px;

border:10pxsolidred;

}.container>*{height:40px;background-color:yellow;border:2pxsolidblack;}.no-fl{background-color:green;height:40px;width:400px;}</style>1.正常布局2.div1、div2浮动在原来位置/*1.使1,2浮动*//**/

.container>.fl{float:left;}1.浮动元素不再占据父元素空间，具有行内块特征（大小默认由内容决定，可以改变宽度、高度）---父元素的高度为0.2.后续非浮动元素将占用浮动元素原有空间，但后续所有元素的文本将环绕浮动元素。---副作用3.期待如下正常效果1.浮动元素在父元素水平排列，父元素大小由浮动元素决定2.不影响后续元素布局1.父元素使用：overflow：hidden样式。---如果浮动元素的父元素不存在超出其区域的子元素。2.父元素设置高度。---如果浮动元素的父元素存在超出其区域的子元素。3.在最后一个浮动元素之后使用具有clear:both的样式div来清除浮动。.container{

/*...*//*height:60px;*/overflow:hidden;}<divclass="container"><divclass="fl">div1</div><divclass="fl">div2</div>

<divstyle="height:0;border:none;clear:both;"></div></div><divclass="no-fl">正常元素</div>123用于包含浮动子元素的父元素时：使一个块元素成为一个独立的元素---重点在于“独立”的理解：1.不影响父元素外部元素：文字不会因为存在浮动元素而产生环绕;2.父元素的高度由子元素的内容决定认识样式属性overflow特性：本意是溢出块尺寸的的内容如何处理消除浮动的影响措施，使用以下方法之一：例2float样式属性的典型应用1：水平导航栏<ul><li><ahref="#">首页</a></li><li><ahref="#">博客</a></li><li><ahref="#">程序员学院</a></li><li><ahref="#">下载</a></li><li><ahref="#">论坛</a></li><li><ahref="#">问答</a></li><li><ahref="#">代码</a></li><li><ahref="#">直播</a></li><li><ahref="#">能力认证</a></li><li><ahref="#">高校</a></li></ul>

测试容器ul后的元素：这是后面的的文字,是否受到浮动的影响li左浮动浮动元素的父元素不存在超出其区域的子元素

具体实现<style>ul{list-style:none;padding:0;margin:0;/*border:2pxsolidred;*//*方法1*/overflow:hidden;}li{float:left;}

/*方法2*//*ul::after{content:'';display:block;clear:both;}*/a{display:block;padding:20px;text-decoration:none;color:#333;}

/*准备背景图片显示区域*/ul{padding-left:100px;background-image:url('./csdn.png');background-repeat:no-repeat;background-position:leftcenter;/*宽度100px高度自动*/background-size:100px;}/*首页链接显示上边框*/li:nth-of-type(1)a{border-top:2pxsolidred;}例3float样式属性的典型应用2：列布局<h3>三列浮动布局：高度适应内容</h3><divclass="container"><divclass="left">左边</div><divclass="middle">中间</div><divclass="right">右边</div></div>*{box-sizing:border-box;}.container{width:800px;border:1pxsolidgray;

/*消除浮动的影响*/overflow:hidden;}.container>div{float:left;min-height:100px;border:1pxsolid#ccc;}.left,.right{width:20%;background-color:yellow;}.container>.middle{width:60%;min-height:200px;background-color:#eee;}Web前端基础技术CSSJSHTML第7章

弹性布局Contents目录弹性布局概述容器属性项属性弹性(Flex)布局：一种新的实现行、列布局的方式，也是当前WEB主流的布局方式。

目的：使页面整体和局部布局更简单、灵活；可以取代浮动布局。

3个概念：（1）容器：任何元素设置display:flex后，都可以成为一个弹性容器，简称容器。（2）项：所有容器中的任意直接子元素，项具有行内块特征。默认情况下，所有容器中的项，都从左到右按行排列，类似浮动元素，但没有浮动副作用，也不会自动换行。一个示例：认识弹性布局，实现元素水平排列一

弹性布局概述

概念：默认情况下（不设置容器其他属性），任何一个容器包含两根轴（3）主轴：水平方向的横轴，项从左到右排列；（4）交叉轴：垂直方向的纵轴

；（5）主轴起点：左侧；终点：右侧。（6）交叉轴起点：顶端；终点：底端。默认特性：-水平排列：主轴默认为水平轴。所有项默认从左到右按行排列，项之间间隔为0，具有浮动效果（,但无浮动副作用。-容器高度自适应：容器高度由项高度决定；项的高度占满容器高度100%；-项不自动分行：项总宽度超出容器宽度时，不会自动折行，而是尽量缩小项宽度，无法缩小时溢出容器。在上例中，通过：（1）增加容器高度（2）限制宽度来理解默认特性二

容器属性：指示容器中的项如何排列，如何对齐，是否分行1.flex-direction/2.flex-wrap/3.justify-content/4.align-content/5.align-items1.flex-direction：项在容器排列方向。

√水平排列：从左到右排列（记忆）flex-direction：row；/*默认值*/项高度默认100%√垂直排列：从上到下排列【相当把行顺时针90度】flex-direction：column；项宽度默认100%2.flex-wrap：项是否换行。√换行flex-warp：wrap;通常，设置容器的宽度，而容器高度默认由项高度决定，项目之间间隔默认为0.以下说明和示例，假定flex-direction：row，flex-wrap:wrap;即主轴为水平轴且换行示例：一个弹性容器div，宽度400px，可换行，包含一组链接（padding:10px20px）<divclass="container"><ahref="#"class="item">华为</a><ahref="#"class="item">中兴</a><ahref="#"class="item">小米</a><ahref="#"class="item">联想</a><ahref="#"class="item">诺基亚</a><ahref="#"class="item">苹果</a><ahref="#"class="item">华硕</a></div><style>.container{

width:400px;border:10pxsolidred;/*作为弹性容器*/

display:flex;/*项可折行显示*/

flex-wrap:wrap;}.item{padding:10px20px;/*撑大元素*/border:1pxdotted#333;}</style>设置容器宽度，以显示折行效果以下说明和示例，假定：flex-direction：row；flex-wrap：wrap;自动生成为行内块元素3.justify-content：项在每根主轴上的对齐方式，通过设置宽度来观察效果。(1).flex-start：默认值，项目依次对齐主轴起点，各项紧凑排列，即项之间间隔为0（左对齐）。(2).flex-end：项目对齐主轴终点，各项紧凑排列，即项之间间隔为0（右对齐）。(3).center：在主轴方向，项目居中对齐，项间隔为0，左右外边距均分剩余空间。(4).space-around：项左右外边距均分剩余空间。(5).space-between：项目在主轴方向上两端对齐。注意：（4）、（5）自动计算项的外边距（4）中，将剩余宽度空间平均分为每个元素的左右外边距。（5）中，将剩余宽度空间平均分为除两侧元素之外的每个元素的左右外边距。暂时记住取值对应的效果即可以下说明和示例，假定：flex-direction：row；flex-wrap：wrap;示例：一个弹性容器div，宽度400px，可折行，包含一组链接（padding:10px20px）主轴对齐方式：（1）起点对齐（左对齐，默认）；（2）终点对齐（右对齐）；（3）主轴居中对齐；（4）两端对齐；（5）环绕对齐.container{

width:400px;border:10pxsolidred;/*作为弹性盒子*/display:flex;/*可折行显示*/

flex-wrap:wrap;/*对齐方式，注意，必须宽度足够*/

justify-content:flex-start;justify-content:flex-end;justify-content:center;justify-content:space-between;justify-content:space-around;}12345在每根（2根）水平轴对齐以下说明和示例，假定：flex-direction：row；flex-wrap：wrap;4.align-content：项整体在交叉轴上的对齐方式---测试时，需要设置一定的高度，项必须可折行（多行）以下说明和示例，假定：flex-direction：row；flex-wrap：wrap;设置容器高度，以显示垂直对齐示例：一个弹性容器div，宽度400px，可折行，包含一组链接（padding:10px20px）主轴对齐方式：（1）起点对齐（左对齐，默认）；（2）终点对齐（右对齐）；（3）主轴居中对齐；（4）两端对齐；（5）环绕对齐；交叉轴对齐方式：（1）拉伸（默认）；（2）（1）起点对齐（顶部对齐，默认）；（2）终点对齐（底部对齐）；（3）居中对齐；（4）两端对齐；（5）环绕对齐；.container{width:400px;border:10pxsolidred;

/*作为弹性盒子*/display:flex;/*可折行显示*/flex-wrap:wrap;

/*设置容器高度*/height:100px;

align-content:stretch;/*项高度不设置时*/align-content:flex-start;align-content:flex-end;align-content:center;align-content:space-between;align-content:space-around；}整体在垂直方向上对齐123456以下说明和示例，假定：flex-direction：row；flex-wrap：wrap;5.align-items：项在交叉轴上的对齐方式下外边距均分上外边距均分上、下外边距均分无两端对齐和环绕对齐富余的行间隔均分align-items与align-content的区别：（1）align-items没有环绕和两端对齐；（2）align-items优先级比align-content低，两者选择其一；（3）align-items设置容器高度后，不折行也有效；align-content用于多行，配合flex-warp:wrap使用。!!!(4)顶部/底部/居中对齐时（flex-start/flex-end/center），align-items在每一行均分间隔，而align-content的项之间无间隔。理解区别的示例<divclass="container"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div><divclass="item">4</div><divclass="item">5</div><divclass="item">6</div></div>.container{width:240px;height:400px;border:10pxsolidred;display:flex;justify-content:center;

/*修改此处观察变化*/

flex-wrap:wrap;

/*align-content:center;*/align-items:center;}.item{height:100px;width:100px;border:1pxsolid#ccc;}以下说明和示例，假定：flex-direction：row；flex-wrap：wrap;示例：页面居中的块---登录界面页面居中实现<divclass="containerfixed"><divclass="item">这是块元素在块元素中居中的示例<br/>模拟居中的登录窗体<p>弹性容器仍然可以使用位置和定位属性</p></div></div><style>.container{border:10pxsolidred;

/*弹性容器*/

display:flex;justify-content:center;/*水平（主轴）居中*/

/*垂直居中；如果使用align-content:center，那么需要使用flex-wrap:wrap；*/

align-items:center;

/*加上固定定位：100%窗口大小*/

position:fixed;left:0;right:0;top:0;bottom:0;}

/*项-登录界面区域,使用align-items

后，容器高度默认由元素决定，不会拉伸，根据需要来设置高度*/.item{width:400px;height:200px;border:10pxsolidblue;}</style>三

项目属性

1.order

/2.flex-grow/3.flex-shrink/4.align-self1.order：项在主轴的排列顺序。整数值，值越小，越靠前。默认为0，可取负值。示例：使用order属性，使各项按照指定值自动从大到小排列。

<divclass="container"><divclass="itemw1">中国🇨🇳</div><divclass="itemw2">美国🇺🇸</div><divclass="itemw3">英国🇬🇧</div></div><style>.container{border:10pxsolidred;width:400px;

display:flex;flex-direction:column;}.item{border:1pxsolid#ccc;height:40px;margin:10px;}

.w1{width:300px;

order:-300;}.w2{width:200px;

order:-200;}.w3{width:100px;

order:-100;}2.flex-grow：该项跟随容器在主轴上的大小而放大的占比，默认为0，不跟随。示例：弹性布局---三列布局<divclass="container"><divclass="itemleft">left</div><divclass="itemmiddle">middle</div><divclass="itemright">right</div></div>.container{

width:400px;/*改变为800*/border:10pxsolidred;display:flex;}.item{width:100px;/*参考宽度*/

min-height:100px;background-color:#ccc;}.left{flex-grow:1;

/*1/4100+(400-300)*1/4=125px*/}.right{flex-grow:1;

/*1/4*/}.middle{flex-grow:2;

/*2/4*/

/*2/4100+(400-300)*2/4=150px*/background-color:yellow;}注意：通常左右固定宽度，而中间自适应示例：弹性布局---商品列表<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body><divclass="container"><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="itemempty"></div></div></body></html><style>.container{width:800px;border:10pxsolidred;

display:flex;flex-wrap:wrap;justify-content:space-between;}.item{width:200px;min-height:200px;border:1pxsolid#ccc;

/*

平均宽度*/flex-grow:1;/*效果:给定一定间隔*/margin:10px;}/*对于空出来的位置的处理：添加空的项目，以便对齐*/.empty{

/*不显示，但占用空间*/visibility:hidden;/*不显示，不占用空间---此处不能使用*//*display:none*/}</style>目标体现1：实现水平导航菜单效果目标体现2：实现商品列表的布局效果Web前端基础技术CSSJSHTML第8章CSS3新特性Contents目录边框阴影/圆角；转换：位移；旋转；缩放过渡动画CSS3基础应用盒子阴影、圆角边框CSS3边框；CSS3转换；CSS3过渡；CSS3动画；CSS3文本效果a.盒子阴影：box-shadow:

xyblur(阴影距离)[spread(扩散距离)]color[inset/outset]xy相对左上角位置出现阴影的起始点，单位px，默认为00（左上角坐标）blur阴影距离,单位px；spread阴影扩散程度（通常省略），单位pxcolor：阴影颜色inset/outset内部阴影/外部阴影（扩散，默认外部outset）b.边框圆角：border-radius:toprightbottomleft；独立属性border-top-left-radius:px;/*左上角*/border-top-right-radius:px;/*右上角*/border-bottom-left-radius:px;/*左下角*/border-bottom-right-radius:px;/*右下角*/border-radius:x1y1x2y2;

/*顺时针：上、右、下、左；各个顶点圆角的半径值*/border-radius:xy;/*对角设置：左上右下右上左下圆角的半径值*/border-radius:x;/*四个半径值相同*/border-radius:50%;/*相对宽高均为50%的半径值，宽度和高度相等时为圆*/border-radius:40px80px

示例

边框阴影与圆角---卡片式商品列表<divclass="container"><divclass="item"><imgsrc="./images/1.avif"/><p>商品描述</p><p>价格</p></div><divclass="item"><imgsrc="./images/2.avif"/><p>商品描述</p><p>价格</p></div><!--重复--></div><style>*{box-sizing:border-box;}.container{width:800px;/*border:1pxsolidred;*//*水平排列，可分行显示*/display:flex;flex-wrap:wrap;}.item{width:200px;margin:10px;/*阴影效果*/box-shadow:0020px#ccc;/*美观目的，给一定内边距*/padding:10px;/*圆角*/border-radius:6px;}.item>img{width:100%;}</style>参见实例v22.

CSS3基础应用---样式属性1.位移（相对当前位置）；2.旋转（相对给定坐标点，默认中心点）；3.缩放；4.倾斜skew(角度)CSS3边框；CSS3转换；CSS3过渡；CSS3动画；CSS3文本效果1.位移：单位px，类似基于相对位置（position:relative）来改变位置。transform:translate(x,y)相对当前位置，偏移原点/中心点的坐标(相对位置移动，还占据原来空间)transform:translateX(x)仅水平方向位移transform:translateY(y):仅垂直方法位移单位：像素px示例：位移<divclass="container"><divclass="div1">仍占据位置，浮动出来，不影响后续元素布局</div></div><style>.container{border:10pxsolidgreen;width:200px;}.div1{width:100px;height:100px;background-color:red;}.container:hover.div1{

transform:translate(100px,100px);}</style>2.平面2D旋转：实例：转换为圆的旋转；transform:rotate(ndeg)角度单位deg，顺时针旋转,默认旋转坐标：中心点.可以更改选择基点:使用transform-origin:lefttop;/*基于左上顶点（00），可以使用关键字或具体数值*/示例：旋转45deg.container:hover.div1{/*transform:translate(100px,100px);*/transform:rotate(45deg)}2.

CSS3基础应用位移（相对当前位置）；旋转（相对给定坐标点，默认中心点）；缩放；4.倾斜skew(角度)CSS3边框；CSS3转换；CSS3过渡；CSS3动画；CSS3文本效果3.缩放

:transform:scale(xn,yn)

宽度高度同时缩放的倍数可以是小数，无单位transform:scaleX(xn)仅宽度缩放transform:scaleY(yn):仅高度缩放

大于1---放大；小于1---缩小<divclass="container"><imgclass="item"src="./images/1.avif"><imgclass="item"src="./images/2.avif"><imgclass="item"src="./images/3.avif"><imgclass="item"src="./images/4.avif"></div>示例缩放图片<style>*{box-sizing:border-box;}.container{width:800px;display:flex;flex-wrap:wrap;}.item{width:100px;height:100px;margin:10px;}.item:hover{transform:scale(1.2,1.2);}</style>使元素沿着水平方向

或垂直方向发生倾斜语法格式：transition:skew(角度)单位：deg位移（相对当前位置）；旋转（相对给定坐标点，默认中心点）；缩放；4.倾斜skew(角度)CSS3边框；CSS3转换；C

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论