【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页

python+flask+html+css制作一个简单的生日祝福语网页

一个py文件：     test.py
一个html文件：   birthday_index.html
一张图片：       timg.jpg
一个文件夹：     static

条件：已安装python3和flask

test.py的内容如下：

from flask import Flask,send_file         ### 导出flask类
app = Flask(__name__)           ### 生成一个web app对象@app.route('/')                 ### 注册一个url，表示当请求url+'/'这个网站时，执行hello_world这个函数
def Birthday_index():return send_file("Birthday_index.html")if __name__ == '__main__':      ### 启动app应用app.run()                   ### 相关参数：app.run(host=,port=,debug=,**options)### host 默认是：127.0.0.1### port 默认是：5000

birthday_index.html内容如下：

<!DOCTYPE html>
<html><head><title>Happy Birthday</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="utf-8"></head>
<!--背景图-->
<style>.bg{top: 0;left: 0;width:100%;height:100%;min-width: 1000px;z-index:-10;zoom: 1;background-color: #fff;background: url(./static/timg.jpg);background-repeat: no-repeat;background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-position: center 0;}
</style><body class="bg"><h1 style="color: DeepPink; font-size:30px">蒙牛 女士:</h1><br/>
<br/>
<br/><p style="outline: none;text-decoration: none;position: relative;font-size: 3em;line-height: 1;color: HotPink;       <!-- 颜色：热情的粉红-->letter-spacing:3px;">生日快乐。                                      <br/>愿所有的幸福都陪伴着你，仰首是春，俯首是秋；  <br/>愿所有的欢乐都追随着你，月圆是诗，月缺是画。
</p><!--玫瑰花 -->
<p style="text-align: center;">
<canvas id="c" height="900" width="900"></canvas>
<script>var b = document.body;var c = document.getElementsByTagName('canvas')[0];var a = c.getContext('2d');document.body.clientWidth;
</script>
<script>with(m=Math)C=cos,S=sin,P=pow,R=random;c.width=c.height=f=500;h=-250;function p(a,b,c){if(c>60)return[S(a*7)*(13+5/(.2+P(b*4,4)))-S(b)*50,b*f+50,625+C(a*7)*(13+5/(.2+P(b*4,4)))+b*400,a*1-b/2,a];A=a*2-1;B=b*2-1;if(A*A+B*B<1){if(c>37){n=(j=c&1)?6:4;o=.5/(a+.01)+C(b*125)*3-a*300;w=b*h;return[o*C(n)+w*S(n)+j*610-390,o*S(n)-w*C(n)+550-j*350,1180+C(B+A)*99-j*300,.4-a*.1+P(1-B*B,-h*6)*.15-a*b*.4+C(a+b)/5+P(C((o*(a+1)+(B>0?w:-w))/25),30)*.1*(1-B*B),o/1e3+.7-o*w*3e-6]}if(c>32){c=c*1.16-.15;o=a*45-20;w=b*b*h;z=o*S(c)+w*C(c)+620;return[o*C(c)-w*S(c),28+C(B*.5)*99-b*b*b*60-z/2-h,z,(b*b*.3+P((1-(A*A)),7)*.15+.3)*b,b*.7]}o=A*(2-b)*(80-c*2);w=99-C(A)*120-C(b)*(-h-c*4.9)+C(P(1-b,7))*50+c*2;z=o*S(c)+w*C(c)+700;return[o*C(c)-w*S(c),B*99-C(P(b, 7))*50-c/3-z/1.35+450,z,(1-b/1.2)*.9+a*.1, P((1-b),20)/4+.05]}}setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',0)</script><br>
</p></body></html>

timg.jpg图片：

访问方法：
将上面的py和html文件放到同一个文件夹下，图片放到static文件夹(注意一定要放到这个文件夹，不然背景图片会失效)；
运行py文件后，在浏览器访问：http://127.0.0.1:5000/

效果图如下：

后记：

后续购买了一个腾讯云的服务器，将这些实施到上面，并绑定了一个域名，通过外网访问对应的域名就可以看到内容。

【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页相关推荐

【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...
使用Dreamweaver/利用HTML5/CSS/制作一个简单的文字logo
一.制作一个简单的logo 1. 结构与样式分析首先我们根据logo的图片分析logo的效果,该logo由6个字母组成.在使用"数码测色计"测出logo的颜色,这里我们测出log ...
用HTML/CSS制作一个美观的个人简介网页——学习周记1
如何使用HTML制作个人简介的网页 Preparation-HBuilder X Step 1:设置背景插入背景图片插入透明背景框 Step 2:设置标题与段落标题与段落的插入与布局 Step ...
初学Python来用它制作一个简单的界面
前言很多刚开始学习python的宝子,就想着自己开始琢磨一些界面,但是吧很多都是有点难度的,自己又琢磨不透,只能把代码复制粘贴+运行现在就带你们来了解一个制作简单界面的代码 ttkbootstra ...
使用HTML+CSS制作一个简单的网页
简单学习了一下HTML和CSS,制作了下面这个网页(第一次做还在学习中),里面包含一些基础的布局包括导航条.分页栏.悬浮列表等内容. 网页预览(网页中的图片与图标均来自阿里巴巴矢量图标库) CSS代码 ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码...
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
用html和css制作一个简单的导航条
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>导 ...
HTML+css制作一个简单八卦阵
html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页

python+flask+html+css制作一个简单的生日祝福语网页

【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页相关推荐

最新文章

热门文章