1.link是HTML标签，@import是css提供的
2.link没有浏览器兼容性问题，@import不兼容ie5以下
3.link可以使用js操作DOM动态引入或去除样式，@import不可以
4.link引入的样式是与页面同时加载的，而@import引入的样式需等页面加载完成后再加载
圣杯布局和双飞翼布局的作用相同，都是为了实现左右两栏宽度固定，中间栏宽度自适应的三栏布局。
圣杯布局：
html：
<html>
<head>
<meta charset="utf-8">
</meta>
<link rel="stylesheet" href="visual.css">
</head>
<body>
<!-- 圣杯布局 -->
<div class="wapper">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
css：
*{
padding:0;
margin:0;
}
.wapper{
overflow: hidden;/*触发BFC*/
padding:0 200px 0 200px;
}
.left{
float:left;
margin-left:-100%;
position:relative;
left:-200px;
height:400px;
width:200px;
background-color:blue;
}
.center{
float:left;
width:100%;
height:400px;
background-color:black;
}
.right{
margin-right:-200px;
float:left;
width:200px;
height:400px;
background-color:yellow;
}
function demo(arr = []){
if(arr.length==5){
return arr;
}
var index = Math.floor(Math.random()*31)+2;//取2-32之间随机数
if(arr.indexOf(index)==-1){ //判断数组中是否存在index
arr.push(index);
}
return demo(arr); //递归
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
