django33全栈班2025年018前端开发入门 - 科技资讯(世良情感网)

前言

经过前面的学习, 我们的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, 比如.

简单的设置一下css样式:

body { background-color: #000000;}#gradient { width: 100%; height: 100vh;}

通过如下js代码, 就可以设置炫酷的背景色了.

// 设置渐变色, 得到定时器// 记得在合适的时机销毁定时器const timer = setBgColors1()

渐变背景色2

除了通过js的方式设置, 我们还可以通过css设置.

第一步: 引入django33.css样式文件

第二步: 给body加上bg1这个样式

<body class="bg1"><h1>纯css渐变背景动画</h1></body>

此时刷新页面, 就会发现拥有了炫酷的背景色,一切都是如此的简单!

在这里插入图片描述粒子背景

第一步: 引入粒子库

第二步: 添加组件

<main class="main"> 粒子背景效果</main><canvas class="background"></canvas>

第三步: 初始化粒子

渐变按钮背景

第一步: 导入django33.css样式文件

第二步: 添加几个a标签, 使用 btn1 btn1-数字来设置渐变按钮, 数字可以是1-5, 数字不同, 渐变色不同

给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样式文件

第二步：填写容器元素，并配置对应的样式类

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样式文件

第二步：填写容器元素，并配置对应的样式类

container1：一种黑色背景容器，文字会水平居中text-fill1：一种文本填充动画

<body class="container1"><p class="text-fill1"> 使用 CSS 为您的类型增添趣味 <span> 动画文本填充 </span> — 无需 JavaScript —</p>

效果预览：

在这里插入图片描述视差翻转卡片

第一步: 导入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样式文件

第二步：创建缩略图，这个缩略图通过href的id指向一个原图，这个原图是隐藏的，点击之后激活显示

第三步：创建原图，这个原图用一个id记录，必须和缩略图指向的id相同。另外给容器加上lightbox1这个样式，这样就有了灯箱的效果。

此时启动页面，点击缩略图，会弹出原图。

蓝色动画背景

第一步: 导入django33.css样式文件

第二步：创建动画效果元素，这里的动画需要依赖这个html元素才行

bg-blue-animate：声明要使用蓝色的动画背景circles：是动画元素的父容器circle：具体的动画元素

效果如下：

在这里插入图片描述

真实的效果是界面上这些小方块是会动的，从下到上，逐渐移动并消失，类似于水泡冒泡的效果。

总结

本节课咱们主要是入门了前端开发，学会了一些简单的页面效果的开发。

宝子们，我在 Python 的世界里摸爬滚打十余载，积累了不少心得体会。如今想把这些年的经验和知识毫无保留地分享给有缘的小伙伴。要是你对 Python 学习感兴趣，欢迎来试听一二，也可以随时在评论区留言或者私信我，咱们一起探讨，共同进步，开启 Python 学习的奇妙之旅！

人生苦短, 我用Python, 坚持每天学习, 坚持每天进步一点点...