手写/代码实现
正方形/圆形/半圆/三角形/骰子
实现三角形原理
基于标准盒模型实现:
- 一个盒子包括: margin+border+padding+content
- 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
- 调整宽度大小可以调节三角形形状.
边框:
- border-left 设置左边框,一般单独设置左边框样式使用
- border-right 设置右边框,一般单独设置右边框样式使用
- border-top 设置上边框,一般单独设置上边框样式使用
- border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用
HTML
<div>
<div className="square"></div>
<div className="circle"></div>
<div className="semicircle"></div>
<div class="triangle"></div>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
CSS
.square {
width: 100px;
height: 100px;
background: #FF9900;
/* 居中 */
margin: auto;
border-bottom: 10px solid #ffffff;
}
.circle {
width: 100px;
height: 100px;
background: #FF9900;
border-radius: 50px;
/* 居中 */
margin: auto;
}
.semicircle {
width: 100px;
height: 50px;
background: #FF9900;
border-radius: 50px 50px 0 0;
/* 居中 */
margin: auto;
border-bottom: 10px solid #ffffff;
}
.triangle {
width: 0;
height: 0;
border-bottom: 100px solid pink;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
margin: auto;
}
.box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between; /* 两端对齐 */
}
.item {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
.item:nth-child(2) {
align-self: center; /* 垂直方向居中 */
}
.item:nth-child(3) {
align-self: flex-end; /* 垂直方向尾对齐 */
}
圣杯布局
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
- 使用 float 布局
- 两侧使用 margin 负值,以便和中间内容横向重叠
- 防止中间内容被两侧覆盖,一个用 padding,一个用margin
<div id="header">this is header</div>
<div id="container">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>
1.设置基本样式
.left, .main, .right {
min-height: 130px;/* 为了高度保持一致给left main right都加上min-height:130px */
}
.left {
background: green;
width: 200px;
}
.main {
background-color: blue;
}
.right {
background-color: red;
width: 300px;
}
2.圣杯布局是一种相对布局,首先设置父元素container的位置:
实现效果是左右分别空出200px和300px区域
.container {
padding: 0 300px 0 200px;
/* padding-left: 200px;
padding-right: 150px; */
}
3.将主体部分的三个子元素都设置左浮动
.left, .main, .right {
min-height: 130px;
float: left;
}
4.设置main宽度为width:100%,让其单独占满一行
.main {
background-color: blue;
width: 100%;
}
5.设置left和right 负的外边距
我们的目标是让left、main、right依次并排,但是上图中left和right都是位于下一行,这里的技巧就是使用负的margin-left:
.left {
margin-left: -100%;
background-color: green;
width: 200px;
}
.right {
margin-left: -300px;
background-color: red;
width: 300px;
}
- 负的margin-left会让元素沿文档流向左移动,如果负的数值比较大就会一直移动到上一行。
- 设置left部分的margin-left为-100%,就会使left向左移动一整个行的宽度,由于left左边是父元素的边框,所以left继续跳到上一行左移,一直移动到上一行的开头,并覆盖了main部分(仔细观察下图,你会发现main里面的字“main”不见了,因为被left遮住了),left上移过后,right就会处于上一行的开头位置,这时再设置right部分margin-left为负的宽度,right就会左移到上一行的末尾。
6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。
.left, .main, .right {
position: relative;
min-height: 130px;
float: left;
}
.left {
left: -200px;
margin-left: -100%;
background: green;
width: 200px;
}
.right {
right: -300px;
margin-left: -300px;
background-color: red;
width: 300px;
}
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
.header {
text-align: center; /* 文本居中 */
background-color: #f1f1f1;
}
.container {
padding: 0 300px 0 200px;
}
.left, .main, .right {
position: relative;
min-height: 130px;
float: left;
}
.left {
left: -200px;
margin-left: -100%;
background: green;
width: 200px;
}
.right {
right: -300px;
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
.footer {
clear: both; /* footer 向下移动清除左右浮动*/
text-align: center;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div class="header">this is header</div>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">this is footer</div>
</body>
</html>
圣杯布局flex实现
HTML:
<body class="HolyGrail">
<header>header</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">content</main>
<nav class="HolyGrail-nav">nav</nav>
<aside class="HolyGrail-ads">ads</aside>
</div>
<footer>footer</footer>
</body>
CSS:
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header, footer {
flex: 1;
background-color: #ccc;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
background-color: #0000FF;
}
.HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
background-color: rgb(6, 252, 190);
}
.HolyGrail-nav {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
/* 导航放到最左边 */
order: -1;
background-color: #FF0000;
}
如果是小屏幕,躯干的三栏自动变为垂直叠加。
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
双飞翼布局
HTML:
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
CSS:
body {
min-width: 550px;
}
.col {
float: left; /* 首先让 left 和 right 都在左侧浮动 */
}
#main-wrap {
margin: 0 190px 0 190px; /* 左右使用 margin 留白 */
}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#left {
width: 190px;
height: 200px;
background-color: #0000FF;
margin-left: -100%; /* 与圣杯布局一样 */
}
#right {
width: 190px;
height: 200px;
background-color: #FF0000;
margin-left: -190px; /* 往左拖动 190px,这里是 margin-left */
}