css和html入门
css和html入门
-
前言:
这是一个oier在摆烂之时随便学的学习笔记，本来想搞cnblog的博客，然后发现博客的外观可以自己搭建，于是开始现学现卖，几乎没有参考价值，完全自娱自乐。
html是什么？
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
人话：网页。
html就是一种为创作网页而生的语言，除了一般的文本，图片，视频展示外同样支持挂载脚本。是一种前端开发的主要语言。
css是什么？
CSS （Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
人话：网页的衣服。
css是为了方便更改html的样式而出现的语言，在网页外貌调整时可以通过改动css文件来实现，能够极大的提高网页制作效率。
一些小功能
由于入门教程网上太多了我也就不写了，下面贴几个简单有趣的代码实现。
3D浮动小方格：
<!DOCTYPE html>
<html>
<head>
</head>
<style>
:root {
--w: 50px;
}
body {
background: rgba(33, 35, 37, 0.7);
}
.container {
height: calc(var(--w) * 3);
width: calc(var(--w) * 3);
padding: var(--w);
box-shadow: 0 12px 20px 6px rgb(104 112 118 / 0.4);
border-radius: calc(var(--w) / 7);
display: flex;
flex-wrap: wrap;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateZ(45deg);
}
.square {
height: var(--w);
width: var(--w);
background-color: rgb(207, 52, 40);
position: relative;
transform-style: preserve-3d;
transform: translateZ(var(--w));
box-shadow: calc(var(--w) * 6) calc(var(--w) * 6) 15px rgba(0, 0, 0, 0.2);
animation: beating 1.6s infinite;
animation-delay: calc(0.05s * var(--d));
}
.square:hover {
cursor: pointer;
filter: brightness(2);
}
.square:after,
.square:before {
content: "";
position: absolute;
height: var(--w);
width: var(--w);
left: 0;
top: 0;
}
.square:before {
background-color: rgb(56, 35, 35);
transform: rotateY(-90deg);
transform-origin: right center;
}
.square:after {
background-color: rgb(80, 39, 36);
transform: rotateX(90deg);
transform-origin: right bottom;
}
@keyframes beating {
50% {
transform: translateZ(calc(var(--w) / 2));
}
}
</style>
<div class="container">
<div class="square" style="--d: 1"></div>
<div class="square" style="--d: 2"></div>
<div class="square" style="--d: 3"></div>
<div class="square" style="--d: 4"></div>
<div class="square" style="--d: 5"></div>
<div class="square" style="--d: 6"></div>
<div class="square" style="--d: 7"></div>
<div class="square" style="--d: 8"></div>
<div class="square" style="--d: 9"></div>
</div>
</html>
简单的翻牌效果：
.wrapper{
margin: 100px auto;
border: 1px solid #ccc;
width : 200px;
height: 300px;
perspective: 600px;
}
.card{
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
}
.card:active{
transform: rotateY(180deg) scale(2);
}
.card-face{
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
&.card-front{
background-color: #f00;
}
&.card-back{
background-color: aqua;
transform: rotateY(180deg);
}
}
<head>
<link rel="stylesheet" type="text/css" href="Block.css">
</head>
<body>
<div class="wrapper">
<div class="card">
<div class="card-face card-front">front</div>
<div class="card-face card-back">back</div>
</div>
</div>
</body>
