css布局模型(三种)
1、流动模型(Flow):默认的网页布局模式,块状元素都自上而下按顺序垂直延伸分布。内联元素都会在所处的包含元素内从左到右水平分布显示
2、浮动模型 (Float):float:left
3、层模型(Layer):三种:1绝对定位(position: absolute)2、相对定位(position: relative)3、固定定位(position: fixed)
层模型:绝对定位:使用left、right、top、bottom属性;相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
相对定位:它通过left、right、top、bottom属性相对于以前的位置移动,偏移前的位置保留不动(还是存在)。覆盖不了前面的div没有偏移前的位置
固定定位:与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化。
Relative与Absolute组合使用:被参照元素要设置为:position: relative。元素设置position: absolute
颜色值:p{color:red;}英文 p{color:rgb(133,45,200);}rgb颜色 p{color:rgb(20%,33%,25%);} p{color:#00ffff;}16进制4颜色
技巧:水平居中:1行内元素:被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
2块状元素:(定宽块状)①定宽②margin:auto。
(不定宽块状)①加入 table 标签 包括<table> <tbody>、<tr>、<td> table{margin:0 auto;}
②设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
③设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的
垂直居中:父元素高度确定的单行文本: 设置父元素的 height 和 line-height 高度
父元素高度确定的多行文本:①使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
②属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。
1. position : absolute 2. float : left 或 float:right 只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block
图片轮播:一个轮播图片主要包括三个部分: 轮播的图片 轮播图片的计数器 轮播图片的控制器
1:设计轮播图片的容器。 <div id="slidershow" class="carousel"></div> 定义一个 ID 值,方便后面采用 data 属性来声明触发。
2:设计轮播图片计数器。在容器 div.carousel <ol class="carousel-indicators"><li></li></ol>(有几张图片就放置几个li)
3:设计轮播图片播放区。在容器 div.carousel 这个区域使用 carousel-inner 样式来控制,通过 item 容器来放置每张轮播的图片
4:设计轮播图片控制器。在容器 div.carousel 中通过 carousel-control 样式配合 left 和 right 来实现。
5:触发 $(".carousel").carousel();
carousel() 方法中可以设置具体的参数
$(function(){
$("#slidershow").carousel({
interval:2000 //等待时间(毫秒)
pause:hover //鼠标悬停留在幻灯片区域即停止播放
wrap: true //轮播是否持续循环
});
$(".carousel").carousel("cycle") //从左向右循环播放
$(".carousel").carousel("pause") //停止循环播放
$(".carousel").carousel("number") //循环到指定的帧,下标从0开始,类似数组
$("#slidershow a.left").click(function(){ //点击左边
$(".carousel").carousel("prev"); //返回上一帧
});
$("#slidershow a.right").click(function(){//点击右边
$(".carousel").carousel("next"); //下一帧
});
});
1:引入bootstrap.min.css(head)
2:引入jquery.js bootstrap.min.js(body)
3:<div id="myCarousel" class="carousel slide"> //data-ride="carousel" data-interval="2000"设置自动轮播
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src=" " alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src=" " alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="" alt="">
<div class="carousel-caption">
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
4:<script>
$('.carousel').carousel()
</script>
三种布局模型和轮播
最新推荐文章于 2024-04-14 13:36:40 发布