前言
经过前面的学习, 我们的Python总算是把重要的基础都学完了, 可以进入到前端的学习了.
我们还是采用案例驱动的方式来学习前端.
网页基本结构
一个网页通常包含html文件, css文件和js文件. html负责页面结构, css负责页面样式, js负责页面交互.
比如.
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>你好, 世界</h1>
<script src="test.js"></script>
</body>
</html>
test.css
h1{
color: red;
}
test.js
alert("你好")
记住这种页面结构, 我们后面要大量的使用到.
django33样式库
django33样式库是一套专门为django33开发的样式库,
引入django33样式库以后的基本界面代码如下.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Background Gradient</title>
<link rel="stylesheet" href="../src/zdpui/django33/django33.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>你好,世界</h1>
<script src="../src/zdpui/django33/django33.js"></script>
<script src="./script.js"></script>
</body>
</html>
这里记得把路径替换为你本地实际的未知.
渐变背景色1
在页面中添加一个div标签, id取名为gradient, 比如.
<div id="gradient">
<h1>你好,世界</h1>
</div>
简单的设置一下css样式:
body {
background-color: #000000;
}
#gradient {
width: 100%;
height: 100vh;
}
通过如下js代码, 就可以设置炫酷的背景色了.
// 设置渐变色, 得到定时器
// 记得在合适的时机销毁定时器
const timer = setBgColors1()
渐变背景色2
除了通过js的方式设置, 我们还可以通过css设置.
第一步: 引入django33.css样式文件
<link rel="stylesheet" href="../src/zdpui/django33/django33.css">
第二步: 给body加上bg1这个样式
<body class="bg1">
<h1>纯css渐变背景动画</h1>
</body>
此时刷新页面, 就会发现拥有了炫酷的背景色,一切都是如此的简单!
在这里插入图片描述
粒子背景
第一步: 引入粒子库
<script src="../src/zdpui/django33/particles.js"></script>
第二步: 添加组件
<main class="main">
粒子背景效果
</main>
<canvas class="background"></canvas>
第三步: 初始化粒子
window.onload = function () {
Particles.init({
selector: ".background"
});
};
const particles = Particles.init({
selector: ".background",
color: ["#03dac6", "#ff0266", "#000000"],
connectParticles: true,
responsive: [
{
breakpoint: 768,
options: {
color: ["#faebd7", "#03dac6", "#ff0266"],
maxParticles: 43,
connectParticles: false
}
}
]
});
渐变按钮背景
第一步: 导入django33.css样式文件
<link rel="stylesheet" href="../src/zdpui/django33/django33.css">
第二步: 添加几个a标签, 使用 btn1 btn1-数字来设置渐变按钮, 数字可以是1-5, 数字不同, 渐变色不同
<div class="container">
<a class="btn1 btn1-1">点击我</a>
<a class="btn1 btn1-2">点击我</a>
<a class="btn1 btn1-3">点击我</a>
<a class="btn1 btn1-4">点击我</a>
<a class="btn1 btn1-5">点击我</a>
</div>
给container添加样式:
.container {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 80vw;
margin: 0 auto;
min-height: 100vh;
}
效果如下:
在这里插入图片描述
霓虹灯文字
第一步: 导入django33.css样式文件
<link rel="stylesheet" href="../src/zdpui/django33/django33.css">
第二步：填写容器元素，并配置对应的样式类
- bg2: 一种暗黑色的花纹背景
- neon neon_red：红色的霓虹灯
- neon neon_blue：蓝色的霓虹灯
- neon neon_yellow：黄色的霓虹灯
- neon neon_green：绿色的霓虹灯
- neon neon_orange：橙色的霓虹灯
- neon neon_violet：紫罗兰色的霓虹灯
<div id="container" class="bg2">
<a class="neon neon_red">
红色霓虹灯
</a>
<a class="neon neon_blue">
蓝色霓虹灯
</a>
<a class="neon neon_yellow">
黄色霓虹灯
</a>
<a class="neon neon_green">
绿色霓虹灯
</a>
<a class="neon neon_orange">
橙色霓虹灯
</a>
<a class="neon neon_violet">
紫罗兰色霓虹灯
</a>
</div>
效果预览：
在这里插入图片描述
文本填充动画
第一步: 导入django33.css样式文件
<link rel="stylesheet" href="../src/zdpui/django33/django33.css">
第二步：填写容器元素，并配置对应的样式类
- container1：一种黑色背景容器，文字会水平居中
- text-fill1：一种文本填充动画
<body class="container1">
<p class="text-fill1">
使用 CSS 为您的类型增添趣味
<span>
动画文本填充
</span>
— 无需 JavaScript —
</p>
效果预览：
在这里插入图片描述
视差翻转卡片
第一步: 导入django33.css样式文件
<link rel="stylesheet" href="../src/zdpui/django33/django33.css">
第二步：定义一个卡片
<div class="card1">
<h1>视差翻转卡片</h1>
<div>
<!--卡片容器开始-->
<div>
<div class="container">
<div class="front" style="background-image: url(https://unsplash.it/500/500/)">
<div class="inner">
<p>学习django33</p>
<span>成为全栈开发高手</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>人生苦短，我用Python，坚持每天学习，坚持每天进步一点点。。。</p>
</div>
</div>
</div>
</div>
<!--卡片容器结束-->
</div>
</div>
第三步：先观察效果，紧接着再将卡片容器的代码多复制几个，再看看效果
在这里插入图片描述
缩略图和原图
第一步: 导入django33.css样式文件
<link rel="stylesheet" href="../src/zdpui/django33/django33.css">
第二步：创建缩略图，这个缩略图通过href的id指向一个原图，这个原图是隐藏的，点击之后激活显示
<a href="#img1">
<img src="../src/zdpui/img/1.jpg" width="200">
</a>
第三步：创建原图，这个原图用一个id记录，必须和缩略图指向的id相同。另外给容器加上lightbox1这个样式，这样就有了灯箱的效果。
<a href="#" class="lightbox1" id="img1">
<span style="background-image: url('../src/zdpui/img/1.jpg')"></span>
</a>
此时启动页面，点击缩略图，会弹出原图。
蓝色动画背景
第一步: 导入django33.css样式文件
<link rel="stylesheet" href="../src/zdpui/django33/django33.css">
第二步：创建动画效果元素，这里的动画需要依赖这个html元素才行
- bg-blue-animate：声明要使用蓝色的动画背景
- circles：是动画元素的父容器
- circle：具体的动画元素
<div class="bg-blue-animate">
<ul class="circles">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
效果如下：
在这里插入图片描述
真实的效果是界面上这些小方块是会动的，从下到上，逐渐移动并消失，类似于水泡冒泡的效果。
总结
本节课咱们主要是入门了前端开发，学会了一些简单的页面效果的开发。
宝子们，我在 Python 的世界里摸爬滚打十余载，积累了不少心得体会。如今想把这些年的经验和知识毫无保留地分享给有缘的小伙伴。要是你对 Python 学习感兴趣，欢迎来试听一二，也可以随时在评论区留言或者私信我，咱们一起探讨，共同进步，开启 Python 学习的奇妙之旅！
人生苦短, 我用Python, 坚持每天学习, 坚持每天进步一点点...
