您的位置：首页 > Web前端 > CSS

双飞翼布局和常见三角

2017-01-21 00:00 330 查看

双飞翼布局

特点：左右两边的内容保持不变，中间的内容可以根据屏幕的大小的改变而改变。

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.content {
padding: 0 200px;
height: 200px;
min-width: 200px;
}
.left {
width: 200px;
height: 200px;
background: red;
float: left;
margin-left: -200px;
}
.right {
width: 200px;
height: 200px;
background: yellow;
float: right;
margin-right: -200px;
}
.center {
width: 100%;
min-width: 200px;
height: 200px;
background: green;
float: left;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>

三角



三角的原理

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border-top: 20px solid red;
border-right: 20px solid yellow;
border-bottom: 20px solid blue;
border-left: 20px solid green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>


淘宝三角

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
position: relative;
width: 500px;
height: 500px;
border: 1px solid #000;
}
b {
position: absolute;
display: inline-block;
width: 0;
height: 0;
}
.one {
bottom: 0;
right: 0;
border-width: 30px;
border-color: transparent transparent transparent red ;
border-style: dashed dashed dashed solid;
}
.two {
bottom: 0;
right: 20px;
border-width: 30px;
border-color: transparent transparent transparent white ;
border-style: dashed dashed dashed solid;
}
</style>
</head>
<body>
<div>
<b class="one"></b>
<b class="two"></b>
</div>
</body>
</html>


其他常见的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
position: relative;
}
span  {
position: absolute;
top: 5px;
display: inline-block;
width: 0;
height: 0;
border-width: 5px;
border-color: red transparent transparent transparent ;
border-style: solid dashed dashed dashed;
}
</style>
</head>
<body>
<div>这是一段文本<span></span></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  圣杯布局 双飞翼布局 三角 淘宝三角 css常见三角
相关文章推荐
新的分享
章节导航