网页课程设计-期末大作业【原神狂喜】
课程设计-涵盖内容
本文使用了简单的div盒子+定位布局，flex布局，瀑布流布局，简单的js脚本。废话不多说，先看效果图！！！！
登录页：
首页：
文章上传页面：
相册页面：
留言板页面：
因为时间比较匆忙，所以写的有点简陋，各位uu不要介意！！！
代码部分
登录页
1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hi!欢迎来到皮卡皮卡博客</title>
<link href="css/index.css" rel="styleSheet">
</head>
<body>
<section>
<div class="box">
<!-- 登录框 -->
<div class="container">
<div class="form">
<h2>登录</h2>
<form>
<div class="inputBox">
<input type="text" placeholder="姓名" id="user">
</div>
<div class="inputBox">
<input type="password" placeholder="密码" id="upwd">
</div>
<div class="inputBox">
<input type="button" value="登录" onclick="login()">
</div>
<p class="forget">忘记密码?<a href="#">
点击这里
</a></p>
<p class="forget">没有账户?<a href="#">
注册
</a></p>
</form>
<script>
function login(){
let user = document.getElementById("user").value;
let upwd = document.getElementById("upwd").value;
let msg ="用户名"+user+"你的密码是"+upwd+"欢迎登录";
alert(msg);
window.location.href="home.html";
}
</script>
</div>
</div>
</div>
</section>
</body>
</html>
2.index.css
/* 清除浏览器默认边距，
使边框和内边距的值包含在元素的width和height内 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 使用flex布局，让内容垂直和水平居中 */
section {
/* 相对定位 */
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
background-image: url('../bgImg/bg2.jpg');
}
.box {
position: relative;
}
/* 登录框样式 */
.container {
position: relative;
width: 400px;
min-height: 400px;
background: rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
}
/* 表单继承其父盒子的大小 */
.form {
position: relative;
width: 100%;
height: 100%;
padding: 50px;
}
/* 登录标题样式 */
.form h2 {
position: relative;
color: #fff;
font-size: 24px;
font-weight: 600;
letter-spacing: 5px;
margin-bottom: 30px;
cursor: pointer;
}
/* 登录标题的下划线样式 */
.form h2::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 0px;
height: 3px;
background: lightpink;
transition: 0.5s;
}
.form h2:hover:before {
width: 53px;
}
.form .inputBox {
width: 100%;
margin-top: 20px;
}
/* 输入框样式 */
.form .inputBox input {
width: 100%;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.2);
outline: none;
border: none;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 16px;
letter-spacing: 1px;
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
/*表单提示文字样式*/
.form .inputBox input::placeholder {
color: #fff;
}
/* 登录按钮样式 */
.form .inputBox input[type="button"] {
background: #fff;
color: #666;
max-width: 100px;
margin-bottom: 20px;
font-weight: 600;
cursor: pointer;
}
.forget {
margin-top: 6px;
color: #fff;
letter-spacing: 1px;
}
.forget a {
color: #fff;
font-weight: 600;
text-decoration: none;
}
博客首页
1.home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="css/banner.css">
<link rel="stylesheet" href="css/homeMain.css">
<link rel="stylesheet" href="css/footer.css">
</head>
<body>
<!-- 导航部分 -->
<div class="menu-bar">
<h1 class="logo">皮卡皮卡<span>博客.</span></h1>
<ul>
<li><a href="home.html">首页</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">文章 <i class="fas fa-caret-down"></i></a>
<div class="dropdown-menu">
<ul>
<li><a href="uploadAt.html">文章上传</a></li>
<li><a href="#">文章分类</a></li>
<li><a href="#">技术分享</a></li>
<li><a href="#">个人笔记</a></li>
</ul>
</div>
</li>
<li><a href="message.html">留言板</a></li>
<li><a href="picture.html">个人相册</a></li>
</ul>
</div>
<!-- 页面主体部分 -->
<div class="main-box">
<!-- 左边栏 -->
<div class="lt-box">
<!-- 文章盒子 -->
<div class="article">
<img src="bgImg/bg2.jpg" alt="">
<h3>生活你好！！！！</h3>
<p>
“今天和村子里的大家一起做了干烧香鱼，我的
手比较笨，不小心把锅烧糊了，只好假装自
己做的是干烧黑鱼。”“今天救了村里落水的
小孩，他说自己的好朋友邦布还在水里，我捞
了一下午，才知道邦布原来是他养的小螃蟹。”
“今天去放风筝，线突然断了，我追啊追，发现
追不到，就找了个地方坐下来，看着它越飘越远
。”
</p>
</div>
<div class="article">
<img src="bgImg/bg2.jpg" alt="">
<h3>生活你好！！！！</h3>
<p>
“今天和村子里的大家一起做了干烧香鱼，我的
手比较笨，不小心把锅烧糊了，只好假装自
己做的是干烧黑鱼。”“今天救了村里落水的
小孩，他说自己的好朋友邦布还在水里，我捞
了一下午，才知道邦布原来是他养的小螃蟹。”
“今天去放风筝，线突然断了，我追啊追，发现
追不到，就找了个地方坐下来，看着它越飘越远
。”
</p>
</div>
<div class="article">
<img src="bgImg/bg2.jpg" alt="">
<h3>生活你好！！！！</h3>
<p>
“今天和村子里的大家一起做了干烧香鱼，我的
手比较笨，不小心把锅烧糊了，只好假装自
己做的是干烧黑鱼。”“今天救了村里落水的
小孩，他说自己的好朋友邦布还在水里，我捞
了一下午，才知道邦布原来是他养的小螃蟹。”
“今天去放风筝，线突然断了，我追啊追，发现
追不到，就找了个地方坐下来，看着它越飘越远
。”
</p>
</div>
<div class="article">
<img src="bgImg/bg2.jpg" alt="">
<h3>生活你好！！！！</h3>
<p>
“今天和村子里的大家一起做了干烧香鱼，我的
手比较笨，不小心把锅烧糊了，只好假装自
己做的是干烧黑鱼。”“今天救了村里落水的
小孩，他说自己的好朋友邦布还在水里，我捞
了一下午，才知道邦布原来是他养的小螃蟹。”
“今天去放风筝，线突然断了，我追啊追，发现
追不到，就找了个地方坐下来，看着它越飘越远
。”
</p>
</div>
<div class="article">
<img src="bgImg/bg2.jpg" alt="">
<h3>生活你好！！！！</h3>
<p>
“今天和村子里的大家一起做了干烧香鱼，我的
手比较笨，不小心把锅烧糊了，只好假装自
己做的是干烧黑鱼。”“今天救了村里落水的
小孩，他说自己的好朋友邦布还在水里，我捞
了一下午，才知道邦布原来是他养的小螃蟹。”
“今天去放风筝，线突然断了，我追啊追，发现
追不到，就找了个地方坐下来，看着它越飘越远
。”
</p>
</div>
</div>
<!-- 右侧栏 -->
<div class="rt-box">
<!-- 个人菜单 -->
<div class="person">
<span class="circle">
<img src="images/a4.jpg" alt="">
</span>
<div class="prList">
<p>
<a>分类</a>
<a href="#">1</a>
</p>
<p>
<a>标签</a>
<a href="#">1</a>
</p>
<p>
<a>类别</a>
<a href="#">1</a>
</p>
</div>
<a href="#">个人主页</a>
</div>
<!-- 超链接菜单列表 -->
<div class="linkList">
<p><img src="images/a1.jpg" alt=""></p>
<p><img src="images/a2.jpg" alt=""></p>
<p><img src="images/a3.jpg" alt=""></p>
<p><img src="images/a4.jpg" alt=""></p>
<p><img src="images/a5.jpg" alt=""></p>
<p><img src="images/a6.jpg" alt=""></p>
<p><img src="images/a7.jpg" alt=""></p>
<p><img src="images/a8.jpg" alt=""></p>
</div>
<!-- 侧边导航菜单栏 -->
<div class="menuList">
<div class="menuItem">首页</div>
<div class="menuItem" onclick="extendList()" id="add" ondblclick="reloadList()">文章</div>
<div class="extendList" id="addBox">文章</div>
<div class="menuItem">留言板</div>
<div class="menuItem"> <a href="picture.html">个人相册</a></div>
</div>
</div>
<script>
// let add = document.getElementById("add");
function extendList() {
let addBox = document.getElementById("addBox");
addBox.innerHTML=`<div class="menuItem"><a href='uploadAt.html'>文章上传</a></div>
<div class="menuItem">文章分类</div>
<div class="menuItem">技术分享</div>
<div class="menuItem">个人笔记</div>`;
addBox.style.display="block";
let add = document.getElementById("add");
add.classList.add("activeItems");
}
function reloadList(){
let addBox = document.getElementById("addBox");
addBox.style.display="none";
let add = document.getElementById("add");
add.classList.remove("activeItems");
}
</script>
</div>
<!-- 页脚 -->
<div class="footer">
<br>
<br>
<p>皮卡皮卡博客由<strong>知更鸟</strong>全力制作</p>
<p>关于本网站的一切解释权----请咨询杀死一只知更鸟|联系方式:15024779820|地址:内蒙古呼和浩特市三沁园街道办事处</p>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
/* background-image: url('../bgImg/bg1.jpg'); */
background:linear-gradient(to left bottom, lightskyblue 50%,lightpink 50%);
}
.logo {
color: #141d28;
font-size: 30px;
margin-right: 100px;
}
.logo span {
color:#0073ff;
}
.menu-bar {
background-color:white;
height: 60px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 0 5%;
position: relative;
border-bottom: 2px #eee solid;
}
.menu-bar ul {
list-style: none;
display: flex;
justify-content: center;
}
.menu-bar ul li {
padding: 10px 30px;
position: relative;
}
.menu-bar ul li a {
font-size: 20px;
color: #141d28;
text-decoration: none;
transition: all 0.3s;
}
.menu-bar ul li a:hover {
color: #0073ff;
}
/* dropdown menu style */
.dropdown-menu {
display: none;
}
.menu-bar ul li:hover .dropdown-menu {
display: block;
position: absolute;
left: 0;
top: 100%;
background-color: white;
border-radius: 8px;
border: 1px solid #eee;
}
.menu-bar ul li:hover .dropdown-menu ul {
display: block;
margin: 10px;
}
.menu-bar ul li:hover .dropdown-menu ul li {
width: 150px;
padding: 10px;
}
3.homeMain.css
/* 默认样式清除 */
a{
text-decoration: none;
color: black;
}
/* 主体样式 */
.main-box{
width: 70vw;
height: auto;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 60px;
display: flex;
justify-content: space-between;
}
/* 左右盒子布局 */
/* leftbox */
.lt-box{
width: 45vw;
height: auto;
}
/* 左侧文章盒子 */
.lt-box .article{
width: 45vw;
background-color: white;
height: 70vh;
border-radius: 30px;
padding: 1%;
margin-bottom:3vh;
}
/* 文章盒子图片 */
.lt-box .article img{
width: 44vw;
height: 50vh;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
/* 文章标题 */
.lt-box .article h3{
width: 44vw;
height: 3vh;
font-size: 22px;
margin: 0;
padding: 0;
}
.lt-box .article p{
width: 44vw;
height: 15vh;
letter-spacing: 3px;
overflow: hidden;
border-bottom-left-radius:30px ;
border-bottom-right-radius:30px ;
font-size: 18px;
}
/* right box */
.rt-box{
width:20vw ;
}
/* 右侧小分类 个人功能模块*/
.rt-box .person{
width:20vw ;
background-color: white;
height: 30vh;
border-radius: 20px;
position: relative;
}
.rt-box .person .circle{
position: absolute;
top:3vh;
width: 6vw;
height: 12vh;
left: 7vw;
border-radius: 50%;
background-color: antiquewhite;
}
.rt-box .person .circle>img{
width: 6vw;
height: 12vh;
border-radius: 50%;
}
.rt-box .person .prList{
position: absolute;
top:17vh;
display: flex;
height: 6vh;
width: 19vw;
left: 0.5vw;
justify-content: space-between;
}
.rt-box .person .prList>p{
width: 6vw;
display: flex;
flex-direction: column;
text-align: center;
border-radius: 5px;
background-color: cornflowerblue;
}
.rt-box .person .prList p a{
flex: 1;
display: block;
cursor: pointer;
}
.rt-box .person>a{
display: block;
width: 19vw;
height: 30px;
left: 0.5vw;
position: absolute;
background-color: aquamarine;
bottom: 10px;
line-height: 30px;
text-align: center;
border-radius: 10px;
cursor: pointer;
}
/* 超链接模块 */
.rt-box .linkList{
margin-top: 4vh;
width:20vw ;
background-color: white;
height: 20vh;
border-radius: 20px;
display: flex;
flex-direction: row;
/* 弹性伸缩盒子换行 */
flex-wrap: wrap;
justify-content: space-around;
padding: 2%;
}
.rt-box .linkList>p{
width: 3.7vw;
height: 7.4vh;
background-color: lightskyblue;
margin:2%;
border-radius: 8px;
cursor: pointer;
}
.rt-box .linkList p>img{
width: 3.7vw;
height: 7.4vh;
border-radius: 8px;
}
/* 侧边导航菜单栏 */
.menuList{
margin-top: 4vh;
width: 20vw;
padding: 2%;
height: auto;
border-radius: 20px;
background-color: white;
transition: all 1s linear;
}
.menuList .menuItem{
width: 19vw;
background-color: lightskyblue;
height: 6vh;
border-radius: 8px;
margin: 2.5px 0;
cursor: pointer;
line-height: 6vh;
text-align: left;
text-indent: 20px;
font-size: 20px;
}
.menuList .menuItem:hover{
background-color: #eee;
}
.menuList .activeItems{
background-color: #eee;
}
/* 文章侧边栏扩展预备样式 */
.menuList .extendList{
width: 19vw;
height: auto;
border-radius: 8px;
margin-bottom: 5px;
cursor: pointer;
transition: all 1s linear;
line-height: 6vh;
text-align: left;
text-indent: 20px;
font-size: 20px;
display: none;
}
.footer{
width: 98.9vw;
height: 20vh;
margin: 0;
padding: 0;
background-color: white;
}
.footer p{
text-align: center;
height: 20px;
line-height: 20px;
font-size: 20px;
margin: 20px 0;
letter-spacing: 3px;
}
文件上传页面
uploadAt.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章上传</title>
<link rel="styleSheet" href="css/form.css">
<link rel="stylesheet" href="css/banner.css">
<link rel="stylesheet" href="css/footer.css">
</head>
<body>
<!-- 导航部分 -->
<div class="menu-bar">
<h1 class="logo">皮卡皮卡<span>博客.</span></h1>
<ul>
<li><a href="home.html">首页</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">文章 <i class="fas fa-caret-down"></i></a>
<div class="dropdown-menu">
<ul>
<li><a href="uploadAt.html">文章上传</a></li>
<li><a href="#">文章分类</a></li>
<li><a href="#">技术分享</a></li>
<li><a href="#">个人笔记</a></li>
</ul>
</div>
</li>
<li><a href="#">留言板</a></li>
<li><a href="picture.html">个人相册</a></li>
</ul>
</div>
<div class="box">
<form method="post" class="smart-green">
<label><span>文章标题 :</span>
<input id="title" type="text" name="title" />
</label>
<label><span>作者 :</span>
<input id="keywords" type="text" value="" name="keywords" />
<label><span>文章类型 :</span>
<select name="" id="">
<option value="null" disabled selected>---请选择文章类型---</option>
<option value="技术类" >技术类</option>
<option value="感悟类" >感悟类</option>
</select>
<label><span>文章内容|摘要 :</span>
<textarea id="description" name="description"></textarea>
<label><span>文章封面图片上传 :</span><input type="file" name="" id="">
<label><span> </span><input type="submit" class="button" value="确定" /></label>
<input type="hidden" />
</form>
</div>
<!-- 页脚 -->
<div class="footer">
<br>
<br>
<p>皮卡皮卡博客由<strong>知更鸟</strong>全力制作</p>
<p>关于本网站的一切解释权----请咨询杀死一只知更鸟|联系方式:15024779820|地址:内蒙古呼和浩特市三沁园街道办事处</p>
</div>
</body>
</html>
相册页面
picture.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相册页面</title>
<head>
<style>
.box {
width: 70vw;
height: auto;
margin: 20px auto;
column-count: 4;
column-gap: 20px;
}
.item {
margin-bottom: 10px;
}
.item img{
width: 100%;
height:100%;
border-radius: 10px;
transition: all 0.5s linear;
}
.item img:hover{
transform: scale(1.1);
border-radius: 10px;
}
</style>
<link rel="stylesheet" href="css/banner.css">
<link rel="stylesheet" href="css/footer.css">
</head>
<body>
<!-- 导航部分 -->
<div class="menu-bar">
<h1 class="logo">皮卡皮卡<span>博客.</span></h1>
<ul>
<li><a href="home.html">首页</a></li>
<li><a href="#">日志</a></li>
<li><a href="uploadAt.html">文章 <i class="fas fa-caret-down"></i></a>
<div class="dropdown-menu">
<ul>
<li><a href="uploadAt.html">文章上传</a></li>
<li><a href="#">文章分类</a></li>
<li><a href="#">技术分享</a></li>
<li><a href="#">个人笔记</a></li>
</ul>
</div>
</li>
<li><a href="#">留言板</a></li>
<li><a href="picture.html">个人相册</a></li>
</ul>
</div>
<!-- 图片盒子 -->
<div class="box">
<div class="item">
<img src="images/a1.jpg" alt="" />
</div>
<div class="item">
<img src="images/a2.jpg" alt="" />
</div>
<div class="item">
<img src="images/a3.jpg" alt="" />
</div>
<div class="item">
<img src="images/a4.jpg" alt="" />
</div>
<div class="item">
<img src="images/ht1.jpg" alt="" />
</div>
<div class="item">
<img src="images/gy1.jpg" alt="" />
</div>
<div class="item">
<img src="images/kq1.jpg" alt="" />
</div>
<div class="item">
<img src="images/ht2.jpg" alt="" />
</div>
<div class="item">
<img src="images/bbl1.jpg" alt="" />
</div>
<div class="item">
<img src="images/a5.jpg" alt="" />
</div>
<div class="item">
<img src="images/a6.jpg" alt="" />
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<br>
<br>
<p>皮卡皮卡博客由<strong>知更鸟</strong>全力制作</p>
<p>关于本网站的一切解释权----请咨询杀死一只知更鸟|联系方式:15024779820|地址:内蒙古呼和浩特市三沁园街道办事处</p>
</div>
</body>
留言板页面
message.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<link rel="stylesheet" href="css/banner.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/msgbox.css">
</head>
<body>
<!-- 导航部分 -->
<div class="menu-bar">
<h1 class="logo">皮卡皮卡<span>博客.</span></h1>
<ul>
<li><a href="home.html">首页</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">文章 <i class="fas fa-caret-down"></i></a>
<div class="dropdown-menu">
<ul>
<li><a href="uploadAt.html">文章上传</a></li>
<li><a href="#">文章分类</a></li>
<li><a href="#">技术分享</a></li>
<li><a href="#">个人笔记</a></li>
</ul>
</div>
</li>
<li><a href="message.html">留言板</a></li>
<li><a href="picture.html">个人相册</a></li>
</ul>
</div>
<!-- 留言盒子 -->
<div class="msgbox">
<p class="msgItems"><img src="/images/a1.jpg"><span>新年快乐！！！</span></p>
<p class="msgItems"><img src="/images/a2.jpg"><span>666</span></p>
<p class="msgItems"><img src="/images/a3.jpg"><span>2022/12/31</span></p>
<p class="msgItems"><img src="/images/a4.jpg"><span>小白作品</span></p>
<p class="msgItems"><img src="/images/a5.jpg"><span>小狐狸学java</span></p>
<p class="msgItems"><img src="/images/a6.jpg"><span>快点码字</span></p>
<p class="msgItems"><img src="/images/a7.jpg"><span>哦啦啦啦~~~</span></p>
<p class="msgItems"><img src="/images/a8.jpg"><span>知更鸟别倦了</span></p>
<p class="msgItems"><img src="/images/a3.jpg"><span>俺叫王大锤</span></p>
<p class="msgItems"><img src="/images/a1.jpg"><span>咦惹，一乐兄！</span></p>
<form action="" method="post">
<input type="text" name="content" value="">
<input type="submit" value="留言">
</form>
</div>
<!-- 页脚 -->
<div class="footer">
<br>
<br>
<p>皮卡皮卡博客由<strong>知更鸟</strong>全力制作</p>
<p>关于本网站的一切解释权----请咨询杀死一只知更鸟|联系方式:15024779820|地址:内蒙古呼和浩特市三沁园街道办事处</p>
</div>
</body>
</html>
msgbox.css
.msgbox{
width: 70vw;
height: 60vh;
margin: 60px auto;
position: relative;
}
.msgbox .msgItems{
background-color: white;
width: 200px;
height: 50px;
border-radius: 10px;
padding: 5px;
display: inline-block;
}
.msgbox .msgItems img{
height: 40px;
width: 40px;
border-radius: 50%;
}
.msgbox .msgItems span{
display: inline-block;
margin-left: 10px;
line-height:30px ;
height: 30px;
letter-spacing: 3px;
}
.msgbox .msgItems:nth-child(1){
position: absolute;
left:5vw ;
top: 2vh;
color: pink;
}
.msgbox .msgItems:nth-child(2){
position: absolute;
left:20vw ;
top: 6vh;
width: 220px;
}
.msgbox .msgItems:nth-child(3){
position: absolute;
left:36vw ;
top: 4vh;
color: purple;
}
.msgbox .msgItems:nth-child(4){
position: absolute;
left:50vw ;
top: 1vh;
width: 400px;
color: darkcyan;
}
.msgbox .msgItems:nth-child(5){
position: absolute;
left:8vw ;
top: 30vh;
color: red;
}
.msgbox .msgItems:nth-child(6){
position: absolute;
left:35vw ;
top: 40vh;
width: 250px;
color: orange;
}
.msgbox .msgItems:nth-child(7){
position: absolute;
left:68vw ;
top: 25vh;
color: springgreen;
}
.msgbox .msgItems:nth-child(8){
position: absolute;
left:48vw ;
top: 50vh;
width: 400px;
color: lightseagreen;
}
.msgbox .msgItems:nth-child(9){
position: absolute;
left:28vw ;
top: 50vh;
color: lightsalmon;
}
.msgbox .msgItems:nth-child(10){
position: absolute;
left:2vw;
top: 50vh;
width:320px;
}
.msgbox form{
width: 40vw;
height:8vh;
background-color:rgba(156, 152, 152, 0.2);
border-radius: 10px;
position: absolute;
left: 15vw;
top:20vh ;
padding: 7px;
}
input[type="text"]{
width: 84%;
height:40px ;
margin-bottom: 15px;
border-radius: 8px;
text-indent: 20px;
border-color: lightcyan;
outline: aqua;
}
input[type="submit"]{
width:15%;
height:40px ;
border-radius: 8px;
background-color: pink;
border-color: white;
cursor: pointer;
}
好嘞，代码结束，祝大家新年快乐！！！！欢迎大家点赞和收藏！！！新的一年记得加油QAQ
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/105165.html
