前言
题目来自ConardLi的blog
写的是自己的题解，水平有限，所以仅供参考
代码会整合在github，觉得有帮助就给个star吧~
正文
二、HTML和CSS
手写
1.手写图片瀑布流效果
通过css multi-column去实现多列布局实现瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: #eaedf1;
}
#myModal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
opacity: 0;
}
#bg {
display: none;
position: fixed;
left: 30%;
top: 10%;
width: 40vw;
height: 80vh;
justify-content: center;
align-items: center;
}
#img {
height: 100%;
object-fit: contain;
animation-name: zoom;
animation-duration: 0.6s;
}
.root {
margin: 0 auto;
width: 1200px;
column-count: 4;
column-gap: 20px;
padding-bottom: 20px;
}
.item {
margin-bottom: 10px;
break-inside: avoid;
background: #fff;
border-radius: 15px;
overflow: hidden;
}
.item:hover {
box-shadow: 2px 2px 2px rgba(71, 70, 70, 0.5);
opacity: 0.8;
}
.itemImg {
width: 100%;
vertical-align: middle;
cursor: pointer;
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
@media screen and (min-width:700px) and (max-width: 1024px) {
.root {
width: 700px;
column-count: 3;
}
#img {
max-width: 100%;
max-height: 100%;
}
#bg {
left: 20%;
width: 60vw;
}
}
@media screen and (min-width:420px) and (max-width: 700px) {
.root {
width: 400px;
column-count: 2;
}
#img {
max-width: 100%;
max-height: 100%;
}
#bg {
left: 15%;
width: 70vw;
}
}
@media screen and (max-width: 420px) {
.root {
width: 250px;
column-count: 1;
}
#img {
width: 100%;
height: 100%;
object-fit: fill;
}
#bg {
left: 10%;
width: 80vw;
}
}
</style>
</head>
<body>
<div class="root">
<div class="item">
<img onclick="spread(this)" class="itemImg" src="./img1.jpg" alt="">
</div>
<div class="item">
<img onclick="spread(this)" class="itemImg" src="./img2.jpg" alt="">
</div>
<div class="item">
<img onclick="spread(this)" class="itemImg" src="./img3.jpg" alt="">
</div>
<div class="item">
<img onclick="spread(this)" class="itemImg" src="./img4.jpg" alt="">
</div>
<div class="item">
<img onclick="spread(this)" class="itemImg" src="./img5.jpg" alt="">
</div>
<div class="item">
<img onclick="spread(this)" class="itemImg" src="./img6.jpg" alt="">
</div>
<div class="item">
<img onclick="spread(this)" class="itemImg" src="./img7.jpg" alt="">
</div>
<div class="item">
<img onclick="spread(this)" class="itemImg" src="./img8.jpg" alt="">
</div>
<div class="item">
<img onclick="spread(this)" class="itemImg" src="./img9.jpg" alt="">
</div>
<div class="item">
<img onclick="spread(this)" class="itemImg" src="./img10.jpg" alt="">
</div>
</div>
<div id="myModal">
</div>
<div id="bg">
<img id="img">
</div>
<script>
const modal = document.getElementById('myModal')
const img = document.getElementById('img')
const bg = document.getElementById('bg')
const spread = function (e) {
modal.style.display = 'block'
bg.style.display = 'flex'
img.src = e.src
}
modal.onclick = function () {
modal.style.display = 'none'
bg.style.display = 'none'
}
</script>
</body>
</html>
效果图：
2、使用CSS绘制几何图形（圆形、三角形、扇形、菱形等）
圆形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="circle">
</div>
</body>
</html>
三角形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.triangle {
width: 0;
height: 0;
border: transparent 100px solid;
border-bottom-color: red;
}
</style>
</head>
<body>
<div class="triangle">
</div>
</body>
</html>
扇形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.triangle {
width: 0;
height: 0;
border: transparent 100px solid;
border-bottom-color: red;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
</style>
</head>
<body>
<div class="triangle">
</div>
</body>
</html>
菱形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.square {
width: 100px;
height: 100px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
background: red
}
</style>
</head>
<body>
<div class="square">
</div>
</body>
</html>
3、使用纯CSS实现曲线运动（贝塞尔曲线）
暂时不会，待更新
4、实现常用布局（三栏、圣杯、双飞翼、吸顶），可是说出多种方式并理解其优缺点
三栏布局：
- float方案
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.main {
height: 100vh;
}
* {
margin: 0;
padding: 0;
}
.left-wrap {
float: left;
width: 200px;
height: 100vh;
background: #1ba1e2
}
.right-wrap {
float: right;
width: 200px;
height: 100vh;
background: #1ba1e2
}
.center-wrap {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div class="main">
<div class="left-wrap"></div>
<div class="right-wrap"></div>
<div class="center-wrap">
This is the center
</div>
</div>
</body>
</html>
- position方案
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
height: 100vh
}
.left {
position: absolute;
top: 0;
left: 0;
width: 200px;
background: #1ba1e2;
height: 100vh;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
background: #1ba1e2;
height: 100vh;
}
.main {
margin: 0 200px;
height: 100vh
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="center">this is a center</div>
</div>
<script>
</script>
</body>
</html>
- flex方案
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.main {
display: flex;
}
* {
padding: 0;
margin: 0;
}
.left {
width: 200px;
background: #1ba1e2;
height: 100vh;
}
.center {
flex: 1;
height: 100vh;
}
.right {
width: 200px;
order: 1;
background: #1ba1e2;
height: 100vh;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
- grid方案
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
position: relative;
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rows: 100%;
grid-template-areas: "lt cr rt"
}
* {
margin: 0;
padding: 0;
}
div {
height: 100vh
}
.center-wrap {
grid-area: cr;
}
.left-wrap {
grid-area: lt;
background: #1ba1e2;
}
.right-wrap {
grid-area: rt;
background: #1ba1e2;
}
</style>
</head>
<body>
<div class="container">
<div class="left-wrap"></div>
<div class="center-wrap"></div>
<div class="right-wrap"></div>
</div>
</body>
</html>
- table方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
table {
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
}
table tr td {
border-width: 0;
}
</style>
<title>Document</title>
</head>
<body>
<table>
<tbody>
<tr height='100%''>
<td width = ' 200' bgcolor="#1ba1e2">
</td>
<td>
this is center
</td>
<td width='200' bgcolor="#1ba1e2">
</td>
</tr>
</tbody>
</table>
</body>
</html>
圣杯布局：暂时不会
双飞翼布局：暂时不会
吸顶布局：暂时不会
5、实现等比宽高的div
