10.21-10.25之 WEB任务(一)
1、一周复习hcj,HTML一般用的也就那些东西,了解一下行内元素、块级元素、行内块元素。
2、清除浮动(好像是五种还是六种方式)
3、BFC(概念、触发、作用、应用)
4、居中问题(水平垂直居中方法,大概有十来种,你自己总结一下)
5、圣杯布局(flex、float、position要会,尤其前两种,gird和table了解就行)
6、轮播图:js原生做弄清楚原理有箭头,实现了写导航点自动播放然后无缝
注:就是不是让你全背下来,但是常用的要会,不能写什么都要翻文档,菜鸟或者w3c都可以 。
上一篇:居中问题方法总结
五、圣杯布局、双飞翼布局
圣杯布局的三大特点:
- 三列布局,中间宽度自适应,两边定宽
- 中间栏要在浏览器中优先展示渲染
- 允许任意列的高度最高
具体示例 left宽200px,right宽300px,main在中间,宽度自适应,允许增加额外的DOM节点,但不能修改现有的节点顺序。
HTML:
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
.main,.left,.right{
min-height: 130px;
}
.main{
background-color: blue;
}
.left{
background-color: aqua;
width: 200px;
}
.right{
background-color: aquamarine;
width: 300px;
}
图示:
现在我们开始做布局吧!!!
- 首先给
container
加一个css的padding: 0 300px 0 200px;
- 再给这三个加一个
float:left
- main被挤压了,给main加一个
width:100%
- 现在要做的就是把left、right移上去到两边就好了。技巧:left增加一个
margin-left:-100%
,right增加一个margin-left:-300px
(解释一下-100%,会让本来就在第二行左边界的left继续向左移动就跳到了上一行,-100%就到了上一行最左边,-300px又为什么到了上一行末尾呢?是因为当left走了之后right自动到第二行开头因为float嘛,然后有了-300px和自身宽度相同就也向左移动,到上一行末尾刚好300px)
- 会发现main被遮住了,用相对位置定义一下就可以解决啦!给这三个块块加一个
position:relative
,再给left单独加left:-200px
,right单独加right:-300px
,就成功啦!!!
完整代码呈上:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
.container {
padding: 0 300px 0 200px;
}
.main,.left,.right{
min-height: 130px;
float: left;
position: relative;
}
.main{
background-color: blue;
width: 100%;
}
.left{
background-color: aqua;
width: 200px;
margin-left: -100%;
left: -200px;
}
.right{
background-color: aquamarine;
width: 300px;
margin-left: -300px;
right: -300px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
双飞翼布局
与圣杯布局差别不大,效果相同
HTML:
<div class="container">
<div class="main">
<div class="inner">
inner
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
CSS:不用相对定位,container最初的留白也可以注释掉
.container {
/* padding: 0 300px 0 200px; */
}
.main,.left,.right{
min-height: 130px;
float: left;
}
.main{
background-color: blue;
width: 100%;
}
.left{
background-color: aqua;
width: 200px;
margin-left: -100%;
}
.right{
background-color: aquamarine;
width: 300px;
margin-left: -300px;
}
.inner{
margin: 0 300px 0 200px;
}
绝对定位布局
- 绝对定位就好比暴力输出,简单易懂,直接上代码
HTML:
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
CSS:
.container{
position: relative;
}
.main,.left,.right{
top: 0;
min-height: 130px;
}
.main{
margin: 0 300px 0 200px;
background-color: aqua;
}
.left{
position: absolute;
left: 0;
width: 200px;
background-color: aquamarine;
}
.right{
position: absolute;
right: 0;
width: 18.75rem;
background-color: antiquewhite;
}
flex布局
建议在不熟悉flex的朋友点击链接复习一下,这篇flex的介绍很是详细Flex布局教程我在学习之后再写的如下的圣杯布局。
首先老规矩给出HTML:
<div id="flex">
<div id="center">我在右边,自适应</div>
<div id="left">我在左边,width: 200px;</div>
<div class="right">我在右边,width:300px</div>
</div>
CSS:
#flex{
display: flex;//首先设置为flex布局
background-color: skyblue;//也可以单独设置子元素颜色
height: 100px;//定高
line-height: 100px;//让文字垂直居中
}
.right{
width: 300px;
}
#left{
width: 200px;
order: -1;//让这个flex-item移动到最左边
}
#center{
background:pink;
flex-grow: 1;因为left和right定宽了有剩余空间,1就可以铺满剩余空间,默认是0
text-align: center;//文字水平居中
}
效果图:
下一篇:原生JS轮播图实现