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

课程设计-涵盖内容

本文使用了简单的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;
}

好嘞，代码结束，祝大家新年快乐！！！！欢迎大家点赞和收藏！！！新的一年记得加油QAQ

补充说明：最近好多友友说缺少文件，我直接放个百度网盘的链接吧
链接: https://pan.baidu.com/s/1SaX3C-3qg4xXIGNRoNy0yA?pwd=4w8n 提取码: 4w8n

网页课程设计-期末大作业-简单设计【原神狂喜】

课程设计-涵盖内容

代码部分

登录页

1.index.html

2.index.css

博客首页

1.home.html

2.banner.css 公共样式

3.homeMain.css

4.footer.css 公共样式

文件上传页面

uploadAt.html

相册页面

picture.html

留言板页面

message.html

msgbox.css

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

网页课程设计-期末大作业-简单设计【原神狂喜】

课程设计-涵盖内容

代码部分

登录页

1.index.html

2.index.css

博客首页

1.home.html

2.banner.css 公共样式

3.homeMain.css

4.footer.css 公共样式

文件上传页面

uploadAt.html

相册页面

picture.html

留言板页面

message.html

msgbox.css

热门文章

最新文章

相关课程

相关电子书

相关实验场景