说明：
目录结构：
主页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #91FBE7;
}
.circle1 {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #DEFEF3;
/*定死在屏幕上。不随鼠标移动*/
position: fixed;
left: 5%;
top: 50%;
}
.circle2 {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #DEFEF3;
position: fixed;
right: 10%;
top: 8%;
opacity: 0.9;
}
.circle3 {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #DEFEF3;
position: fixed;
right: 35%;
top: 70%;
opacity: 0.9;
}
.top {
/*随便你用哪个定位*/
/*position: fixed;*/
position: absolute;
top: 0px;
height: 80px;
width: 100%;
background-color: #5DC2B0;
color: white;
opacity: 0.7;
/*数值越大，浮的越上层*/
z-index: 10;
line-height: 80px;
}
.top li {
font-size: 20px;
list-style: none;
margin: 0 50px;
/*行内显示*/
display: inline;
}
.top li a {
text-decoration: none;
color: white;
}
.top li a:hover {
text-decoration: none;
color: palevioletred;
font-weight: bold;
text-shadow: 1px 2px 3px white ;
}
.top ul {
width: 100%;
text-align: center;
}
.main {
width: 84%;
height: 650px;
/*background-color: #A8E3CF;*/
margin: 100px 8%;
z-index: 10;
border-radius: 5%;
position: absolute;
}
.left {
width: 30%;
height: 100%;
background-color: #DFFAEF;
margin-right: 1%;
float: left;
border-radius: 5%;
opacity: 0.9;
}
.l-top {
width: 100%;
height: 25%;
background-color: #F2FEFA;
border-radius: 5%;
padding-top: 10px;
text-align: center;
margin-bottom: 5%;
}
.tx {
height: 100px;
width: 100px;
background-color: skyblue;
margin: 0px auto;
border-radius: 50%;
}
.left ul {
height: 70%;
}
.left li {
list-style: none;
text-align: center;
align-content: center;
height: 16.66%;
font-weight: bold;
}
.left li a {
text-decoration: none;
color: #4F7791;
}
.left li a:hover {
text-decoration: none;
color: palevioletred;
font-weight: bold;
text-shadow: 1px 2px 2px black ;
}
.right {
width: 69%;
height: 100%;
background-color: #C4EEE0;
float: right;
border-radius: 5%;
opacity: 0.8;
}
#videoPlay{
width: 25%;
height: 25%;
position: fixed;
/*left: 50%;
top: 50%;
transform: translate(-50%,-50%);*/
box-shadow: 0 0 20px black;
/*background-color: pink;*/
color: white;
opacity: 0.7;
/*浮在最上面*/
z-index: 99;
padding: 0;
visibility: hidden;
border-radius: 2%;
}
#videoPlay a{
position: absolute;
right: 3%;
float: right;
top: 0px;
text-decoration: none;
color: palevioletred;
z-index: 999;
}
#videoPlay a:hover{
position: absolute;
right: 3%;
float: right;
top: 0px;
text-decoration: none;
color: palevioletred;
font-weight: bold;
z-index: 999;
text-shadow: 1px 2px 2px black ;
}
</style>
<script type="text/javascript">
window.onload = function(){
let boxx = 0;
let boxy = 0;
var isDown = false;
//用于存储新的光标坐标
let mosx = 0;
let mosy = 0;
let mosx2 = 0;
let mosy2 = 0;
//获取box
const box = document.getElementById('videoPlay');
//box元素鼠标按下触发事件
box.onmousedown = function(e){
//获取并记录鼠标第一次按下时光标的坐标
mosx = e.pageX;
mosy = e.pageY;
//开关打开
isDown = true;
};
//设置鼠标移动事件
window.onmousemove = function(e){
if (!isDown) {
return;
}
//获取光标移动时光标的新坐标
mosx2 = e.pageX;
mosy2 = e.pageY;
//计算box的新坐标
boxx += (mosx2 - mosx);
boxy += (mosy2 - mosy);
//将光标的旧坐标更新
mosx = mosx2;
mosy = mosy2;
//移动box
box.style.top = boxy + "px";
box.style.left = boxx + "px";
};
//鼠标放开触发事件
box.onmouseup = function(){
isDown = false;
};
};
</script>
<script>
function btn(){
document.getElementById("videoPlay").style.visibility = "hidden"
// document.getElementById("video").setAttribute()
/*关闭顺带将视频停止播放*/
document.getElementById("video").pause();
}
function btn1(){
document.getElementById("videoPlay").style.visibility = "visible"
}
</script>
</head>
<body>
<div class="top">
<ul>
<li>
<a href="welcome.html" target="show">主页</a>
</li>
<li>
<a href="welcome.html" target="show">简介</a>
</li>
<li>
<a href="welcome.html" target="show">图片集</a>
</li>
<li>
<a href="welcome.html" target="show">储物间</a>
</li>
<li>
<a href="welcome.html" target="show">更多</a>
</li>
</ul>
</div>
<!--三个背景圆球-->
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div>
<!--内容主体-->
<div class="main">
<div class="left">
<div class="l-top">
<div class="tx">
<img src="image/tx01.jpg" alt="" style="width: 100%;border-radius: 50%">
</div>
<span style="font-size: 13px;font-family: fantasy;color: pink;font-weight: bold">小俊会编码</span><br>
<span style="font-size: 16px;font-family: fantasy;color: skyblue;font-weight: bold">秋风也带不走我的思念</span>
</div>
<ul>
<li>
<div>
<a href="welcome.html" target="show">首页</a>
</div>
</li>
<li>
<div>
<a href="welcome.html" target="show">逛一逛</a>
</div>
</li>
<li>
<div>
<a href="welcome.html" target="show">聊聊天</a>
</div>
</li>
<li>
<div>
<a href="news.html" target="show">看资讯</a>
</div>
</li>
<li>
<div>
<a href="music.html" target="show">听音乐</a>
</div>
</li>
<li>
<div>
<a href="#" id="openVideo" onclick="btn1()">看视频</a>
</div>
</li>
</ul>
</div>
<div class="right">
<iframe src="welcome.html" frameborder="0" name="show" height="100%" width="100%"></iframe>
</div>
</div>
</div>
<div id="videoPlay" >
<a href="#" id="closeVideo" onclick="btn()">X</a>
<video id="video" width="100%" src="video/1.mp4" controls autoplay style="border-radius: 2%;"></video>
</div>
</body>
</html>
首页欢迎页代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.tx {
width: 200px;
height: 200px;
margin: 60px auto;
}
.tx img {
width: 100%;
height: 100%;
border-radius: 50%;
}
</style>
</head>
<body>
<div style="width: 100%;height: 100%">
<div class="tx">
<img src="image/tx01.jpg" alt="">
</div>
<div style="width: 100%;text-align: center;color: #4F7791;font-weight: bold">
<span>
不必借光而行，你我亦是星辰! <br><br>
所有人都祝你快乐，我只愿你遍历山河，觉得人间值得。<br><br>
把所有的烦恼和抑郁关在小房子里，我带着月光来向你保证你每晚好梦。 <br><br>
心里藏着小星星，生活才能亮晶晶!
</span>
</div>
</div>
</body>
</html>
音乐播放：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.tx {
width: 200px;
height: 200px;
margin: 100px auto;
}
.tx img {
width: 100%;
height: 100%;
border-radius: 20%;
}
</style>
</head>
<body>
<div style="width: 100%;height: 100%">
<div class="tx">
<img src="image/music01.jpg" alt="">
</div>
<div style="width: 100%;text-align: center;color: #4F7791;font-weight: bold">
<audio src="video/music01.mp3" controls ></audio>
</div>
</div>
</body>
</html>
资讯：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #F5F6F7;
}
.main{
border: 0px solid red;
width: 100%;
float: left;
background-color: #F5F6F7;
}
.main h3 em{
float: right;
font-size: 10px;
color: darkgrey;
}
.main h3 em img{
width: 30px;
margin-top: 10px;
}
.left{
border: 0px solid cornflowerblue;
width:76%;
height: 620px;
float: left;
background-color: #FFFFFF;
}
.l_left{
border: 0px solid darkorchid;
width:48%;
height: 500px;
float: left;
margin-right: 15px;
}
.left ul{
border: 0px solid red;
list-style: none;
padding: 0px;
margin-top: 15px;
list-style: none;
}
.left li {
/*background: url("../../demo-message/src/main/webapp/images/dian2.png") no-repeat;*/
background-position: 10px 50%;
padding-left: 25px;
border: 0px solid blue;
height: 35px;
line-height: 35px;
}
.left li em{
float: right;
}
.l_right{
border: 0px solid darksalmon;
width:48%;
height: 500px;
float: left;
}
.right{
border: 0px solid deeppink;
width:22%;
height: 620px;
float: right;
background-color: #FFFFFF;
}
.right ul{
border: 0px solid red;
list-style: none;
padding: 0px;
margin-top: 15px;
}
.right li{
background: #F7F8F9;
padding-left: 25px;
border: 0px solid blue;
/*height: 50px;*/
/*line-height: 50px;*/
margin-top: 20px;
border-radius: 15px;
width: 70%;
float: right;
margin-right: 15%;
/* background: url("images/dian2.png") no-repeat;
background-position: 10px 50%;*/
}
.right img{
float: right;
width: 20px;
margin-top: -1px;
}
.l_foot{
border: 0px solid darkorchid;
width:98%;
height: 100px;
float: left;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<div class="l_left">
<h3>综合资讯<em><img src="../../demo-message/src/main/webapp/images/dot3.png" alt="">更多</em></h3>
<hr>
<span>
<b>微软推出 VS Code Server,用平板也能远程开发！</b>
<br>
</span>
<span>
在不支持安装VS Code 桌面版的机器上进行开发，
最多只能有10台远程机器运行同一VS CodeServer
</span>
<ul>
<li><em>08:40</em>如何看待《关于禁止小程序JavaScript解释器使用规剌… </li>
<li><em>08:41</em>System76推出65%配列的开源机械键盘</li>
<li><em>08:35</em>X.Org Server远程代码执行漏洞</li>
<li><em>10:26</em>Visual Studio 2022性能增强:更快的C++、优化G...</li>
<li><em>10:26</em>开源办公室(OSPO)大揭秘</li>
<li><em>08:08</em>Zadig v1.13.0相信开放的力量，工作流连通一切价值</li>
<li><em>07:54</em>LLVM为Debuginfod添加了一个HTTP服务器</li>
<li><em>07:34</em>Marian ——C++实现的神经机器翻译框架</li>
<li><em>10:26</em>Gitee推荐|基于Qt的流数据分析与可视化软件Data.. </li>
<li><em>07:33</em> 每日一博|Go分布式链路追踪实现原理</li>
</ul>
</div>
<div class="l_right">
<h3>软件更新资讯
<em><img src="../../demo-message/src/main/webapp/images/dot3.png" alt="">更多</em></h3>
<hr>
<span>
<b>EMQX 5.0正式发布:单集群支持1 亿 MQTT连接</b>
<br>
</span>
<span>
近日，全球领先的开源物联网数据基础设施软件供应商EMQ映
云科技宣布，旗下核心产品开源分布式物联网....
</span>
<ul>
<li><em>08:40</em>Magician-Containers 1.0.0 发布，Magician家族又.. </li>
<li><em>08:41</em>beta.4版发布啦，国产开源数据可视化datart 接下来...10:45</li>
<li><em>08:35</em>Apache Dolphin Scheduler 2.0.6发布，新增Maste...10:06</li>
<li><em>10:26</em>JavaWeb Cloud微服务敏捷开发框架EleVue版本v1</li>
<li><em>10:26</em>electron-egg框架2.1.6发布，跨平台桌面应用开发09:04</li>
<li><em>08:08</em>Vue2 to Composition API转换器发布!助力升级Scri... </li>
<li><em>07:54</em>Python 3.11.0 Beta4 发布</li>
<li><em>07:34</em>Nushell 0.65发布，灵活的开源跨平台Shell</li>
<li><em>10:26</em>减少java小半内存，Solon v1.9.2 发布</li>
<li><em>10:26</em>Netty 4.1.79.Final 发布</li>
</ul>
</div>
<div class="l_foot" >
<img src="../../demo-message/src/main/webapp/images/guangGao1.png" alt="正在加载..." width="100%" height="100%">
</div>
</div >
<div class="right">
<h3>精彩评论
<img src="../../demo-message/src/main/webapp/images/shuaxin.png" alt="">
<em>45s后自动刷新</em>
</h3>
<hr>
<ul>
<li>红苦以为友区柳乂草找动会用</li>
<li>我倒是觉得花800块钱才能买到乞丐版的东西没有全方位碾压一个免费的东西才叫耻辱</li>
<li>"而我国的桌面系统跟社区却依旧处于空白"好像完全无视Deepin的努力</li>
<li>头皮发麻</li>
<li>kodi yyds</li>
<li>我真是栓Q了，你们都那么优秀，就剩我独自一人苦苦挣扎，一壶茶，一包烟，在这代码敲一天！</li>
<li>麻了麻了</li>
<li>奥利给,冲冲冲！</li>
<li>抽烟只抽煊赫门，一生只爱一个人！</li>
</ul>
</div>
</div>
</body>
</html>
改进了一些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #91FBE7;
}
.circle1 {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #DEFEF3;
/*定死在屏幕上。不随鼠标移动*/
/*position: fixed;*/
position: absolute;
left: 5%;
top: 50%;
}
.circle2 {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #DEFEF3;
/*position: fixed;*/
position: absolute;
right: 10%;
top: 8%;
opacity: 0.9;
}
.circle3 {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #DEFEF3;
/*position: fixed;*/
position: absolute;
right: 35%;
top: 70%;
opacity: 0.9;
}
.top {
/*随便你用哪个定位*/
/*position: fixed;*/
position: absolute;
top: 0px;
height: 80px;
width: 100%;
background-color: #5DC2B0;
color: white;
opacity: 0.7;
/*数值越大，浮的越上层*/
z-index: 10;
line-height: 80px;
}
.top li {
font-size: 20px;
list-style: none;
margin: 0 50px;
/*行内显示*/
display: inline;
}
.top li a {
text-decoration: none;
color: white;
}
.top li a:hover {
text-decoration: none;
color: palevioletred;
font-weight: bold;
text-shadow: 1px 2px 3px white;
}
.top ul {
width: 100%;
text-align: center;
}
.main {
width: 84%;
height: 650px;
/*background-color: #A8E3CF;*/
margin:0px 8%;
z-index: 10;
border-radius: 5%;
/*position: absolute;*/
padding-top: 100px;
}
.left {
width: 30%;
height: 100%;
background-color: #DFFAEF;
margin-right: 1%;
float: left;
border-radius: 5%;
opacity: 0.9;
}
.l-top {
width: 100%;
height: 25%;
background-color: #F2FEFA;
border-radius: 5%;
padding-top: 10px;
text-align: center;
margin-bottom: 5%;
}
.tx {
height: 100px;
width: 100px;
background-color: skyblue;
margin: 0px auto;
border-radius: 50%;
}
.left ul {
height: 70%;
}
.left li {
list-style: none;
text-align: center;
align-content: center;
height: 16.66%;
font-weight: bold;
}
.left li a {
text-decoration: none;
color: #4F7791;
}
.left li a:hover {
text-decoration: none;
color: palevioletred;
font-weight: bold;
text-shadow: 1px 2px 2px black;
}
.right {
width: 69%;
height: 100%;
background-color: #C4EEE0;
float: right;
border-radius: 5%;
opacity: 0.8;
}
#videoPlay {
width: 25%;
height: 25%;
position: absolute;
/*让一开始显示在上面*/
top:0px;
/*left: 50%;
top: 50%;
transform: translate(-50%,-50%);*/
box-shadow: 0 0 20px black;
/*background-color: pink;*/
color: white;
opacity: 0.7;
/*浮在最上面*/
z-index: 99;
padding: 0;
visibility: hidden;
border-radius: 2%;
}
#videoPlay a {
position: absolute;
right: 3%;
float: right;
top: 0px;
text-decoration: none;
color: palevioletred;
z-index: 999;
}
#videoPlay a:hover {
position: absolute;
right: 3%;
float: right;
top: 0px;
text-decoration: none;
color: palevioletred;
font-weight: bold;
z-index: 999;
text-shadow: 1px 2px 2px black;
}
.main-div2 {
width: 100%;
height: 100%;
border-radius: 5%;
opacity: 0.8;
}
</style>
<script type="text/javascript">
window.onload = function () {
let boxx = 0;
let boxy = 0;
var isDown = false;
//用于存储新的光标坐标
let mosx = 0;
let mosy = 0;
let mosx2 = 0;
let mosy2 = 0;
//获取box
const box = document.getElementById('videoPlay');
//box元素鼠标按下触发事件
box.onmousedown = function (e) {
//获取并记录鼠标第一次按下时光标的坐标
mosx = e.pageX;
mosy = e.pageY;
//开关打开
isDown = true;
};
//设置鼠标移动事件
window.onmousemove = function (e) {
if (!isDown) {
return;
}
//获取光标移动时光标的新坐标
mosx2 = e.pageX;
mosy2 = e.pageY;
//计算box的新坐标
boxx += (mosx2 - mosx);
boxy += (mosy2 - mosy);
//将光标的旧坐标更新
mosx = mosx2;
mosy = mosy2;
//移动box
box.style.top = boxy + "px";
box.style.left = boxx + "px";
};
//鼠标放开触发事件
box.onmouseup = function () {
isDown = false;
};
};
</script>
<script>
function btn() {
document.getElementById("videoPlay").style.visibility = "hidden"
// document.getElementById("video").setAttribute()
/*关闭顺带将视频停止播放*/
document.getElementById("video").pause();
}
function btn1() {
document.getElementById("videoPlay").style.visibility = "visible"
}
</script>
</head>
<body>
<div class="top">
<ul>
<li>
<a href="welcome.html" target="show">主页</a>
</li>
<li>
<a href="welcome.html" target="show">简介</a>
</li>
<li>
<a href="welcome.html" target="show">图片集</a>
</li>
<li>
<a href="welcome.html" target="show">储物间</a>
</li>
<li>
<a href="welcome.html" target="show">更多</a>
</li>
</ul>
</div>
<div style="background-color: #91FBE7;width: 100%;height: 860px">
<!--三个背景圆球-->
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<!--内容主体-->
<div class="main">
<div class="left">
<div class="l-top">
<div class="tx">
<img src="image/tx01.jpg" alt="" style="width: 100%;border-radius: 50%">
</div>
<span style="font-size: 13px;font-family: fantasy;color: pink;font-weight: bold">小俊会编码</span><br>
<span style="font-size: 16px;font-family: fantasy;color: skyblue;font-weight: bold">秋风也带不走我的思念</span>
</div>
<ul>
<li>
<div>
<a href="welcome.html" target="show">首页</a>
</div>
</li>
<li>
<div>
<a href="welcome.html" target="show">逛一逛</a>
</div>
</li>
<li>
<div>
<a href="welcome.html" target="show">聊聊天</a>
</div>
</li>
<li>
<div>
<a href="news.html" target="show">看资讯</a>
</div>
</li>
<li>
<div>
<a href="music.html" target="show">听音乐</a>
</div>
</li>
<li>
<div>
<a href="#" id="openVideo" onclick="btn1()">看视频</a>
</div>
</li>
</ul>
</div>
<div class="right">
<iframe src="welcome.html" frameborder="0" name="show" height="100%" width="100%"></iframe>
</div>
</div>
<!--视频-->
<div id="videoPlay">
<a href="#" id="closeVideo" onclick="btn()">X</a>
<video id="video" width="100%" src="video/1.mp4" controls autoplay style="border-radius: 2%;"></video>
</div>
</div>
<div style="background:linear-gradient(#FCB2C3,#FED0DB);width: 100%;height: 860px" >
<!--内容主体-->
<div class="main">
<iframe src="mainTwo.html" frameborder="0" name="show" height="100%" width="100%"></iframe>
</div>
</div>
<div style="background:linear-gradient(#FCB78D,#FCD7BD) ;width: 100%;height: 860px" >
<!--内容主体-->
<div class="main">
<!--视频-->
<video width="100%" height="100%" src="video/1.mp4" controls autoplay style="border-radius: 2%;"></video>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
