网页课程设计-期末大作业-简单设计【原神狂喜】-阿里云开发者社区

课程设计-涵盖内容

本文使用了简单的div盒子+定位布局，flex布局，瀑布流布局，简单的js脚本。废话不多说，先看效果图！！！！

Tips : 文末提供百度网盘链接可直接下载当前项目完整源代码

登录页：
在这里插入图片描述
首页：

文章上传页面：

在这里插入图片描述
相册页面：

留言板页面：

因为时间比较匆忙，所以写的有点简陋，各位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>

2.banner.css 公共样式


  * {
   
    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;
}

4.footer.css 公共样式


.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>&nbsp;</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;
}