html+css+js实现图片，文字，视频，背景音乐盛宴

最新推荐文章于 2023-04-05 22:30:11 发布

李现分现

最新推荐文章于 2023-04-05 22:30:11 发布

阅读量1.2k

点赞数 2

分类专栏： html python 文章标签： css html js

本文链接：https://blog.csdn.net/qq_47828130/article/details/120239068

版权

python 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

html

5 篇文章 2 订阅

订阅专栏

你进来了吗？

好吧，如果你感受到了欺骗，请您退出吧！

人菜瘾大，时隔一年，终究还是选了web前端，回想去年写的第一条博客也是html，命运总是这么巧合，哈哈哈哈！

构建登录界面

第一步，构建个登录界面，显得高大上一点
（素材）
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            background: url("1.gif");
            background-size: cover;
        }
        form{
            text-align: center;
        }
        div{
            text-align: center;
        }
    </style>
    <script>
    window.onload=function (){
        var sub=document.getElementById("btn");
        var text=document.getElementById("text");
        var passwd=document.getElementById("passwd");
        sub.onclick=function (){
            if(text.value==""){
                alert("请输入用户名");
                return false;
            }

            if(passwd.value==""){
                alert("请输入密码");
                return false;
            }


             else if(text.value!="123456"||passwd.value!="123456") {
                alert("用户名或密码输入错误！");
                return false;
            }
             else if(text.value=="123456"&&passwd.value=="123456"){
                alert("登录成功！");
                window.open('../LX/html/练习.html');//密码输入正确，进行页面跳转
            }
             return true;


        }
    }


</script>
</head>

<body>
<div>
   <form action="../LX/html/练习.html" method="post" >
        <p>用户：<input type="text" id="text"></p>
        <p>密码：<input type="password" id="passwd"></p>
        <p><input type="button" value="提交" id="btn"/></p>
    </form>
</div>
</body>
</html>

在这里插入图片描述

下载百度小图标（可忽略）

第二步，给打开的网页加个仪式感，先用python的request模块下载个百度ico图标，下载完保存到html文件所在目录下，直接用相对路径。

#引入库，若报错cmd界面切换到python安装路径/Scripts/pip install requests
import requests
r=requests.get("https://baidu.com/favicon.ico")
#在.py文件目录下保存图片
with open('favicon.ico','wb')as f:
    f.write(r.content)

效果如下：
在这里插入图片描述

创建跳转页面内容

第三步，创建一个lianxi.html文件，我直接上源码

<html>
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/><!--导入ico-->
    <meta charset="utf-8">
    <style type="text/css">
        /*插入背景，覆盖整个body标签*/
        body{
            background: url("lx.jpg") no-repeat center center;/*背景图片，相对路径*/
            background-size: cover;
            background-attachment: fixed;
            background-color: cornflowerblue;


        }
       a{

           color: black;
           word-spacing: 2em;/*字符间距*/
       }
        h2{
            font-family: 楷体;
        }
        p{
            color: cornsilk;
            line-height: 50px;
        }
        /*视频位置*/
        div{
            width: 400px;
            text-align: center;
            margin-left: 50px;/*距离左边外边距50像素*/
        }
        .vide{
            width: 400px;
            text-align: center;
            margin-left: 800px;
        }
    </style>
</head>
<body>
<!--进入页面点击任意位置自动循环播放背景音乐-->
<audio autoplay="autopaly" loop="loop" id="audios" >
    <source src="焦迈奇%20-%20你曾是少年%20(Live).mp3" type="audio/mp3" />
</audio>

<script>
// 将以下代码添加到js入口函数内即可
document.addEventListener('click', function() {
    document.getElementById('audios').play()
})
</script>
<!--正文-->
<h1><a target="_blank" title="查看更多" href="https://baike.baidu.com/item/%E6%9D%8E%E7%8E%B0/5870690?fr=aladdin">李现</a></h1>

<h2>简介</h2>
<strong><p>2011年，出演个人首部电影《万箭穿心》，从而正式进入演艺圈 [2]  。
2012年，主演青春爱情电影《初恋未满》 [3]  。
2013年，出演绿色环保爱情喜剧电影《玩命试爱》 [4-5]  。
2014年，出演国内首部原创都市奇幻单元《奇妙世纪》中第二集“最长的25米” [6]  。
2015年，在青春校园网络剧《睡在我上铺的兄弟》中饰演谢训 [7]  。
2016年，其主演的青春爱情电影《睡在我上铺的兄弟》上映 [8]  ；
同年，在悬疑刑侦网络剧《法医秦明》中饰演林涛 [9]  。
2017年，首挑大梁，在网络剧《河神》中饰演男主角郭得友 [10]  ；
同年，获得网易年度有态度大赏年度最有态度人气演员奖 [11]  。
2018年，其主演的年代情感剧《翩翩冷少俏佳人》 [12]  、都市情感剧《南方有乔木》相继播出 [13]  ；
同年，在青春爱情剧《亲爱的，热爱的》中饰演男主角韩商言 [14]  。
2019年，出演剧情电影《中国机长》 [15]  ；
9月6日，获得智族GQ Men Of The Year年度人物盛典年度人气演员奖 [16]  。
10月17日，入选2019福布斯中国30岁以下精英榜 [17]  。
2019年11月，凭借电视剧《亲爱的，热爱的》获得第26届华鼎奖中国百强电视剧满意度调查颁奖盛典中国百强电视剧最佳新锐演员提名 [18]  ；
12月，主演电视剧《剑王朝》在爱奇艺上线 [19]  。
2020年8月27日，李现名列《2020福布斯中国名人榜》第19位。 [20-21]
李现在2020年12月20日举办的腾讯视频星光大赏中被评为“年度品质艺人”
</p></strong>
<h2><a target="_blank" title="查看更多" href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E6%9D%8E%E7%8E%B0">图片</a></h2><br/>
<!--图片布局-->
<table cellspacing="50">
    <tr>
        <th><img src="../image2/LX1_2.jpg"></th>
        <th><img src="../image2/LX1_11.jpg"></th>
    </tr>
    <tr>
        <th><img src="../image2/LX1_6.jpg"></th>
        <th><img src="../image2/LX2_6.jpg"></th>
    </tr>
    <tr>
        <th><img src="../image2/LX2_18.jpg"></th>
        <th><img src="../image2/LX1_9.jpg"></th>
    </tr>
</table>
<h2>Vlog</h2><br/>
<div >
    <video src="李现Vlog视频.mp4" preload="auto" controls="controls" width="400px" height="300px"></video>

</div>
<div class="vide">
<video src="李现%2048小时VLOG%20-%20AIRBNB爱彼赢.mp4" preload="auto" controls="controls" autoplay="autoplay" width="400px" height="300px"></video>
</div>

</body>
</html>