登录界面

展示：

页面前端code:

主页面

展示：

页面前端code:

自我介绍页面

展示：

页面前端code:

图片旋转木马展示页面

展示：编辑

页面前端code:

结语：

源码：

长恨歌

Html介绍

HTML 即超文本标记语言，是目前应用最为广泛的语言之一，是组成一个网页的主要语言。

在现今这个 HTML5 华丽丽地占领了整个互联网的时候，如果想要通过网页抓住浏览者的眼球光靠因循守旧是不行的，程序猿们需要掌握一些必须知道的 HTML 常用代码，因为只有熟悉掌握了常用的 HTML 代码，程序猿们在编写网页的时候才可以做到流畅美观，用细腻的思维和创意的细节效果打动并留住网页浏览者。

登录界面

展示：

页面前端code:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>MyLogin</title><style>body{background-image: url('static/001.jpg/');background-repeat: no-repeat;background-size: cover;background-attachment: local;}form {width: 30%;height:auto;/*border:1px solid #000;*/margin: 0 auto;margin-top:15%;text-align:center;background: #00000060;padding:20px 50px;font-family:"STXingkai";color:darkblue;}form .bot{margin-top:15px;width:180px;height:30px;font-size:20px;font-weight:700;color: #ffffff;background-image: linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);border: 0;border-radius:15px;}form .log:hover{width: 200px;height: 50px;border: 5px #00008B;border-radius: 30%;font-size: 20px;}form .log{width:180px;border: 0;border-bottom: 2px solid black;padding 5px 10px;background: #ffffff00;color: #3498db;margin-top: 20px;}form .zi{align = "center";font-size:40px;color:pink;}</style>
</head>
<body><form action="/login" method="post"><table align="center"><h1 class="zi" >Login</h1><tr><td>用户:<input class="log" name="username" type="text" placeholder="Username"></td></tr><tr><td>密码:<input class="log" name="pwd" type="password" placeholder="Password"></td></tr><tr><td><input  style="cursor:pointer" class="bot" name="bottom" type="submit" value="登录"></td></tr></table></form><audio src="static/醒不来的梦.mp3/" autoplay="autoplay" loop="true"></audio>
</body>
</html>

主页面

展示：

页面前端code:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>My Button</title><style>body{overflow-y:hidden;background: #353b48;height: 100vh;display: flex;align-items: center;justify-content: center;}.btn1{width: 200px;height: 60px;background: none;border: 4px solid;color: #5500ff;font-weight: 700;text-transform: uppercase;cursor: pointer;font-size: 16px;position: relative;}.btn1::before,.btn1::after{content: "";position: absolute;width: 14px;height: 4px;background-color: #353B48;transform: skewX(50deg);transition: .4s linear;background-color: #f038ff;-webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);-moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);}.btn1::before{top:-4px;left: 10%;}.btn1::after{bottom:-4px;right: 10%;}.btn1:hover::before{left: 80%;}.btn1:hover::after{right: 80%;}p{position: absolute;margin-top:-250px;font-family:"STXingkai";font-size:50px;color:#3498db;}.btn2{width: 200px;height: 60px;background: none;border: 4px solid;color: #F038FF;font-weight: 700;text-transform: uppercase;cursor: pointer;font-size: 16px;position: relative;}.btn2::before,.btn2::after{content: "";position: absolute;width: 14px;height: 4px;background-color: #353B48;transform: skewX(50deg);transition: .4s linear;background-color: #ffff00;-webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);-moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);}.btn2::before{top:-4px;left: 10%;}.btn2::after{bottom:-4px;right: 10%;}.btn2:hover::before{left: 80%;}.btn2:hover::after{right: 80%;}.btn3{width: 200px;height: 60px;background: none;border: 4px solid;color: #b9e769;font-weight: 700;text-transform: uppercase;cursor: pointer;font-size: 16px;position: relative;}.btn3::before,.btn3::after{content: "";position: absolute;width: 14px;height: 4px;background-color: #353B48;transform: skewX(50deg);transition: .4s linear;background-color: #00007f;-webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);-moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);}.btn3::before{top:-4px;left: 10%;}.btn3::after{bottom:-4px;right: 10%;}.btn3:hover::before{left: 80%;}.btn3:hover::after{right: 80%;}.btn4{width: 200px;height: 60px;background: none;border: 4px solid;color: #aa0000;font-weight: 700;text-transform: uppercase;cursor: pointer;font-size: 16px;position: relative;}.btn4::before,.btn4::after{content: "";position: absolute;width: 14px;height: 4px;background-color: #353B48;transform: skewX(50deg);transition: .4s linear;background-color: #00aa00;-webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);-moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);}.btn4::before{top:-4px;left: 10%;}.btn4::after{bottom:-4px;right: 10%;}.btn4:hover::before{left: 80%;}.btn4:hover::after{right: 80%;}</style></head><body><script>setInterval(function(){var rain = document.createElement("div");rain.style.position = "fixed";rain.style.height = "80px";rain.style.width = "2px";rain.style.filter = "blur(1px)";rain.style.background = "url()";rain.style.background = "#55ffff";rain.style.top = "0px";rain.style.left = Math.random()*1920+"px";rain.style.opacity=parseInt(Math.random()*10)/10+"";document.body.appendChild(rain);var timer=setInterval( function(){var height = parseInt(rain.style.top);var k = 1;k++;rain.style.top = height+5*Math.pow(k,2)+"px";if(parseInt(rain.style.top)>="900px"){clearInterval(timer);rain.parentNode.removeChild(rain);}},10)},5)</script><p>Welcome to my html!</p><a href="{{ url_for('myinfo') }}"><button class="btn1" style="cursor: pointer">Hover Mine</button></a><a href="{{ url_for('form') }}"><button class="btn2" style="cursor: pointer">Hover Swallow</button></a><a href="{{ url_for('about') }}"><button class="btn3" style="cursor: pointer">Hover Dragon</button></a><a href="{{ url_for('backback') }}"><button class="btn4" style="cursor: pointer">Hover Login</button></a></body><audio src="static/玫瑰少年.mp3/" autoplay="autoplay" loop="true"></audio>
</html>

自我介绍页面

展示：

页面前端code:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>MyInfoe</title><style>body{background-color: #f9f9f9;overflow-y:hidden;}#box{background-color:white;border-style:;border-width:0px;width:570px;height:860px;margin-left:275px;margin-top:-8px;}#box img{width:555px;height:837px;margin-left:15px;}#font{background-color:white;border-style:solid;border-width:0px;width:595px;height:860px;top:10px;margin-top:-858px;margin-left:845px;}#font img{width:125px;height:125px;margin-left:240px;margin-top:105px;}#font .one{font-family:STXingkai;margin-left:285px;margin-top:0px;}#font .two{font-family:STCaiyun;padding:8px 120px;font-size:20px;letter-spacing:5px;line-height:25px;text-align:center;}#buttom_one{border-style:solid;border-width:1px;width:160px;height:40px;margin-top:-430px;margin-left:1065px;font-family:STKaiti;text-align:center;}#buttom_two{border-style:solid;border-width:1px;width:160px;height:40px;margin-top:30px;margin-left:1065px;font-family:STKaiti;text-align:center;}#buttom_three{border-style:solid;border-width:1px;width:160px;height:40px;margin-top:30px;margin-left:1065px;font-family:STKaiti;text-align:center;}#buttom_four{border-style:solid;border-width:0px;width:100px;height:20px;margin-top:-600px;margin-left:1400px;font-family:STKaiti;text-align:center;}#buttom_one button{margin-top:15px;width:160px;height:40px;font-size:20px;font-weight:700;border: 0px;background-color:white;margin-top:0px;}#buttom_two button{margin-top:15px;width:160px;height:40px;font-size:20px;font-weight:700;border: 0px;background-color:white;margin-top:0px;}#buttom_three button{margin-top:15px;width:160px;height:40px;font-size:20px;font-weight:700;border: 0px;background-color:white;margin-top:0px;}#buttom_four button{margin-top:15px;width:100px;height:20px;font-size:14px;font-weight:1000;font-color:red;border: 0px;background-color:#f9f9f9;margin-top:0px;}</style>
</head>
<body><div id="box"><img src="static\about.jpg" ></div><div id="font"><img src="static\me.jpg"><p class="one">舞雩冫</p><p class="two"><b>你好，我叫江舞雩，来自中国。我对Web开发,人工智能算法,大数据充满热情。我热衷我所做的一切。</b></p></div><div id="buttom_one"><a href="{{ url_for('back') }}"><button style="cursor: pointer">主页</button></a></div><div id="buttom_three"><a href="{{ url_for('form') }}"><button  style="cursor: pointer">惊鸿</button></a></div><div id="buttom_two"><a href="{{ url_for('about') }}"><button  style="cursor: pointer">游龙</button></a></div><audio src="static/玫瑰少年.mp3/" autoplay="autoplay" loop="true"></audio>
</body>
</html>

图片旋转木马展示页面

展示：

页面前端code:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">html,body{height: 100%;}body {overflow-y:hidden;display: flex;justify-content: center;align-items: center;background-color: #495F8C;}#font {position:absolute;margin-top: -530px;margin-left: px;white-space: nowrap;overflow: hidden;width: 0px;height: 40px;background-color: #495F8C;font-family: STXingkai;font-size: 20px;animation: write 10s steps(16) forwards;}.container {width: 300px;height: 300px;perspective: 1000px;position: relative;}.cards-wrap:hover{animation-play-state:paused;}.cards-wrap{position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;transform: rotateY(0) translateZ(-700px);animation: carousel 10s infinite cubic-bezier(0.77,0,0.175,1);}.cards{position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.cards:nth-child(1) {background-color: black;transform: rotateY(0) translateZ(700px);}.cards:nth-child(2) {background-color: yellow;transform: rotateY(120deg) translateZ(700px);}.cards:nth-child(3) {background-color: red;transform: rotateY(240deg) translateZ(700px);}@keyframes carousel{0%,20% {transform: translateZ(-700px) rotateY(0);}45% {transform: translateZ(-700px) rotateY(-120deg);}75% {transform: translateZ(-700px) rotateY(-240deg);}100%{transform: translateZ(-700px) rotateY(-360deg);}}@keyframes write{0%{width: 0px;}100%{width: 330px;}}#btn {border-style:solid;border-width:0px;width:60px;height:20px;margin-top:380px;margin-right:px;font-family:STKaiti;position:absolute;}#btn button {margin-top:15px;width:80px;height:20px;font-weight:700;border: 0px;background-color:#495F8C;margin-top:65px;color:darkblue;}</style></head><body><div class="container"><div class="cards-wrap"><div class="cards"><img src="static/004.jpg" width="1200" height="470"></div><div class="cards"><img src="static/005.jpg" width="1200" height="470"></div><div class="cards"><img src="static/006.jpg" width="1200" height="470" ></div></div></div><div id="font"><p>卿本佳人相思瘦，千般无用千般又。</p></div></div><div id="btn"><a href="{{ url_for('back') }}"><button  style="cursor: pointer">舞雩冫</button></a></div><audio src="static/所念皆星河.mp3/" autoplay="autoplay" loop="true"></audio></body>
</html>
<script src="https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js"></script>

结语：

除此之外还有非常多的小惊喜哦~!

比如还有精美的音乐播放和一个页面还有一些动态效果等等无法展示~尽情期待。完成作业是完全够了的哦！

源码：

链接：https://pan.baidu.com/s/1LPemtiJE0j8e7X3rUk2LtQ
提取码：（提取码请私聊获取）
--来自百度网盘超级会员V3的分享

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">

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/x-icon"/>


<meta http-equiv="Expires" content="-1">

<meta http-equiv="Cache-Control" content="no-cache">

<meta http-equiv="Pragma" content="no-cache">


<meta name="author" content="aicoder.com">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta content="yes" name="apple-touch-fullscreen" />


<meta content="telephone=no,email=no" name="format-detection" />



<meta name="full-screen" content="yes">

<meta name="browsermode" content="application">



<meta name="x5-fullscreen" content="true">

<meta name="x5-page-mode" content="app">
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />








<link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
<link rel="stylesheet" href="./font/font-shop/iconfont.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/rem.js"></script>
<title>优选网</title>
</head>

<body>

</body>

</html>

制作超美的个人网页（附源码带音乐相关推荐

20220517 Python 制作一个儿童学习软件（附源码和软件下载）包含语音合成视频播放 pyqt pptsx3 Qmovie request pygame 音频播放
20220517 Python 制作一个儿童学习软件 (附源码和软件下载) 包含语音合成视频播放 pyqt pptsx3 Qmovie request pygame 音频播放文章目录 202205 ...
Java系统eclipse和idea都可以SpringBoot 高校宿舍管理系统附源码带论文
Java的SpringBoot 高校宿舍管理系统源码带论文一摘要说明二主要功能描述 2.3.2 用例建模 2.3.3 行为建模 3.1 系统体系结构 3.2 功能模块设计 ER图和数据表设计找 ...
超美二次元响应引导页源码
简介: 纯html源码,自带音乐播放器,自带自动打字特效,自带网站存活时间,自带随机ACG背景,自适应响应式网页. 网盘下载地址: http://www.bytepan.com/nveAfnnD6xH ...
【Python爬虫项目】链家房屋信息抓取（超详细适合新手练习附源码）
爬取链家房屋信息爬取信息具体如下: 1.标题 2.位置 3.房屋介绍 4.房屋总价 5.房屋单价一.检查网页源码搜索标题中的关键字发现目标信息可以在源码中找到,所以我们请求该url网址就可以拿到 ...
Qt Quick 图像处理实例之美图秀秀（附源码下载）
在<Qt Quick 之 QML 与 C++ 混合编程详解>一文中我们讲解了 QML 与 C++ 混合编程的方方面面的内容,这次我们通过一个图像处理应用,再来看一下 QML 与 C++ 混 ...
Java 贪吃蛇最简易地实现方法超简短代码实现（附源码详解）
分享一个我刚刚写的贪吃蛇小游戏,非常简短的代码实现方法.这可能是全网最简单实现方法,效果图如下: ps 最新贪吃蛇源码+教学视频+论文下载 java贪吃蛇有多简短呢 ? 上代码!! 一共四 ...
Python实用工具之制作证件照（有界面、附源码、赞关藏）
镇楼图文章目录一点想说的必要配置 removebg配置安装对应的 Python 库获取API Key 无界面版修改图片背景色修改图片大小升级版设置窗口主题与标题添加选择图片路径组件 ...
今天模仿网页版制作的来电模拟器微信小程序源码带流量主
模拟一个来电电话,可以正常接通,挂断等让你假装有事,迅速离场,避免尴尬等等! 比如使用场景: 相亲的时候遇到奇葩,想找接口离开.场价party想脱身的时候或者恶搞,遇到坏人等等各种场景都可以使用, ...
零基础一天学会开发制作一个微信小程序【附源码】
时至如今,微信已然成为一个全民通用的工具,相应的微信小程序开发已经是一个热门的开发项目. 小程序的前端代码和web是极其相似的,wxml和html.wxss和css以及js,现在还经常将wxss读作c ...

制作超美的个人网页（附源码带音乐

Html介绍

登录界面

展示：

页面前端code:

主页面

展示：

页面前端code:

自我介绍页面

展示：

页面前端code:

图片旋转木马展示页面

展示：

页面前端code:

结语：

源码：

html常用模板

制作超美的个人网页（附源码带音乐相关推荐

最新文章

热门文章