当前位置：首页 > news >正文

一个简单的网页设计

news 2025/7/6 6:07:52

综合练习HTML、CSS和Javascript的知识

练习网站主页的开发

这是这学期的一次作业，具体要求如下：

要求：

1.参考网站主界面代码

2.网页内容自拟；

3.网页由页眉、导航栏、主体内容区域和页脚组成

4.页眉：一般包含网站的名称、标志、宣传语等重要信息，用于展示网站的品牌形象和特色，帮助用户快速识别和记住网站，同时也能起到引导用户浏览网站内容的作用

5.导航栏：需要有下拉菜单，可以将网站的各种功能进行分类整合，使用户能够快速定位到不同的功能板块。

6.主体内容区域：是网页的核心部分，包含了网站想要传达给用户的主要信息。

主体内容区域中有轮播图、滚动文字、滚动图片和固定二维码。

主体内容区域中，每个内容区域都有标题和内容

主体内容区域底部需要增加友情链接

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>成毅个人网站</title><link rel="stylesheet" href="./Bootstrap/bootstrap.min.css"><link rel="stylesheet" href="./CSS图标/font_4877511_bybv0m4ur6g/iconfont.css"><script src="./Bootstrap/bootstrap-5.3.0-alpha1-dist/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script><style>header {background-image: -webkit-linear-gradient(top, rgb(218, 239, 224), rgb(247, 250, 246));display: flex;justify-content: space-evenly;text-align: center;height: 150px;font-family: 华文仿宋;color: #0f0f0f;opacity: 0.8;border-style: dashed;border-color: #d0edb4;border-width: 5;height: 200px;padding: 10px;}#b {height: 100px;width: 200px;opacity: 0.6;padding: 10px;}#a img {height: 150px;width: 400px;padding: 40px;}#box1 {background-image: -webkit-linear-gradient(top, rgb(242, 246, 243), rgb(223, 239, 219));display: flex;justify-content: space-evenly;text-align: center;font-family: 华文仿宋;color: #0f0f0f;opacity: 0.8;border-style: dashed;border-color: #d0edb4;border-width: 5;height: 80px;padding: 10px;z-index: 10;}.me-2 {height: 40px;width: 300px;margin-bottom: -27px;}.box2 {display: flex;justify-content: space-evenly;width: 180px;}div span:nth-child(2n) {color: rgb(166, 233, 148);}div span:nth-child(2n+1) {color: rgb(164, 164, 210);}#box2 {z-index: 0;background-image: -webkit-linear-gradient(left, rgb(242, 246, 243), rgb(212, 235, 206));}#zi {text-align: center;padding: 40px;font-family: 华文仿宋;}.carousel-inner {font-family: 华文仿宋;}.nav-item dropdown {z-index: 5;}.carousel {.carousel-item {height: 400px;background-size: cover;background-position: center;overflow: hidden;z-index: 1;}.carousel-item:nth-child(3) {background-image: url(./imge/img-173736136356611eafe22cac9cd502e7b9d3c22534e36febf93413e7d608726efbb90055da34e.jpg);z-index: 1;}.carousel-item:nth-child(2) {background-image: url(./imge/Camera_XHS_16920699056961040g00830n1obvqdlc5g5o1ua8608c6bl24g7v8.jpg);z-index: 1;}.carousel-item:nth-child(1) {background-image: url(./imge/Camera_XHS_16920699203441040g00830n5hifv6lm505on8cd77qk8cvrpbjfg.jpg);z-index: 1;}.carousel-item:nth-child(4) {background-image: url(./imge/Camera_XHS_16920699142711040g00830n5hifv6lm6g5on8cd77qk8coukhmv8.jpg);z-index: 1;}}#box3 {width: auto;overflow: hidden;white-space: nowrap;position: relative;}#box3 p {display: inline-block;padding: 0 100%;/* 右侧留出足够空间 */animation: scroll 50s linear infinite;text-align: center;font-family: 华文仿宋;color: rgb(180, 180, 211);}@keyframes scroll {0% {transform: translateX(0);/* 从左边开始 */}100% {transform: translateX(-100%);/* 滚动到右边 */}}#box4 {width: auto;overflow: hidden;white-space: nowrap;position: relative;display: flex;}#box4 img {width: 30%;height: 100px;margin-right: 1px;/* 图片之间的间隔 */}@keyframes scroll1 {0% {transform: translateX(100%);/* 从左边开始 */}100% {transform: translateX(-100%);/* 滚动到右边 */}}#box4 {animation: scroll1 10s linear infinite;/* 定义动画 */}#box5 {height: 100px;width: 130px;position: fixed;top: 32%;right: 0;z-index: 77;}#box5 img {height: 80px;width: 120px;position: absolute;}#bigbox {position: relative;}#yinyue {background-image: url(./imge/微信图片_20250321194039.jpg);background-size: cover;background-position: center;background-repeat: no-repeat;text-align: center;font-family: 华文仿宋;color: rgb(41, 9, 247);opacity: 0.86;width: 300px;height: 400px;}#yinyue h1,h3 {color: rgb(35, 49, 246);}.scroll-yinyue {height: 180px;overflow: hidden;position: relative;border: 4px solid rgb(21, 20, 20);padding: 10px;margin: 20px auto;}audio {display: block;margin: 20px auto;}.scroll-yinyue p {display: block;animation: scroll-up 10s linear infinite;}@keyframes scroll-up {0% {transform: translateY(0);}100% {transform: translateY(-100%);}}#multiCollapseExample2 video {height: 394px;width: 800px;}#box6 {background-image: -webkit-linear-gradient(top, rgb(242, 246, 243), rgb(223, 239, 219));text-align: center;font-family: 华文仿宋;color: #0f0f0f;opacity: 0.8;border-style: dashed;border-color: #d0edb4;border-width: 5;height: auto;padding: 10px;z-index: 10;}#box6 .btn-primary {background-image: -webkit-linear-gradient(left, #f9f1f1, #93d79c);transition: all 0.5s;border-color: #0ff02d;color: #0f0f0f;}#box6 .btn-primary:hover {height: 40px;width: 160px;}.col,.card-body {background-image: -webkit-linear-gradient(top, rgb(226, 245, 231), rgb(228, 231, 240));text-align: center;font-family: 华文仿宋;color: #0f0f0f;border-style: dashed;border-color: #dae9cd;border-width: 5;height: auto;padding: 10px;z-index: 177;}#box7 {height: 350px;overflow: scroll;position: relative;order: 2px solid rgb(216, 233, 248);display: flex;justify-content: space-evenly;background-color: rgb(232, 240, 247);}.accordion-body {height: 350px;overflow: scroll;position: relative;order: 2px solid rgb(216, 233, 248);display: flex;justify-content: space-evenly;background-color: rgb(229, 237, 225);}.accordion-body img {height: 300px;width: 200px;}#box8 footer {background-image: -webkit-linear-gradient(top, rgb(217, 232, 220), rgb(247, 253, 249));text-align: center;height: 150px;padding: 30px;border-style: dashed;border-color: rgb(174, 233, 203);border-width: 2;border-radius: 3%;opacity: 0.8;font-family: 华文仿宋;}#box10 {height: 700;width: 500px;color: rgb(33, 31, 33);font-family: 华文仿宋;padding: 0%;margin: 0%;background-image: -webkit-linear-gradient(top, rgb(217, 232, 220), rgb(247, 253, 249));box-sizing: border-box;display: flex;justify-content: center;align-items: center;}#box11 {height: 100;overflow: scroll;display: flex;justify-content: space-evenly;background-image: -webkit-linear-gradient(right, rgb(228, 231, 241), rgb(227, 237, 230));}#liuyan {height: 500px;width: 400px;margin-top: 30px;background-color: #b5dfbb;font-family: 华文仿宋;}.list-group-item:nth-child(2n) {background-color: #d8e7da;}.list-group-item:nth-child(2n+1) {background-color: #f3f7fa;}.list-group-item:first-child {background-color: #71ac81;}.list-group-item:nth-child(2) {background-color: #70b081;}#tuka {width: 400px;height: 700px;background-color: #88ae92;margin: 30px;padding: 60px;}#tuka .card {box-shadow: 0 10px 20px #000;}#box9 {width: 1200px;margin-top: -20px;padding: 50px 10px;display: flex;justify-content: center;align-items: center;flex-direction: column;background-image: -webkit-linear-gradient(top, rgb(212, 236, 217), rgb(247, 253, 249));border-radius: 20px;box-shadow: 0 20px 30px #000;opacity: 0.8;}.form {display: flex;justify-content: center;position: relative;flex-direction: column;width: 100%;padding-bottom: 10px;}input:focus,textarea:focus {outline: none;}input,textarea {border: none;color: rgb(16, 16, 16);margin-bottom: 20px;border-radius: 10px;padding: 30px;font: 900 15px '华文仿宋';}#usename {height: 0px;}#massage {height: 70px;}.messages h1 {width: 100%;text-align: center;text-align: left;margin-bottom: 70px;font-size: 140px;background-image: -webkit-linear-gradient(top, rgb(212, 236, 217), rgb(247, 253, 249));}#submitBtn {position: absolute;right: 0;bottom: 0;background-image: -webkit-linear-gradient(top, rgb(212, 218, 236), rgb(247, 253, 249));border: none;font-size: 20px;width: 100px;height: 20px;border-radius: 50px;font-family: 华文仿宋;}#submitBtn:hover {background-image: -webkit-linear-gradient(left, rgb(212, 213, 236), rgb(247, 253, 249));border: none;width: 110px;height: 30px;border-radius: 50px;}#massageBoard {width: 100%;text-align: left;}@keyframes massageFodeIn {to {opacity: 1;}}.message {width: 100%;margin: 10px;padding: 10px;opacity: 0;animation: massageFodeIn 0.5s ease forwards;background-image: -webkit-linear-gradient(left, rgb(203, 200, 230), rgb(218, 242, 226));background-color: aquamarine;margin: 70px 0;border-radius: 10px;box-shadow: 0 10px 20px #000;text-shadow: 0px 0px 20px #ffffff;display: flex;flex-direction: column;align-items: flex-start;width: 430px;}.message-info {display: flex;align-items: center;font-size: 20px;position: relative;background-image: -webkit-linear-gradient(left, rgb(209, 217, 233), rgb(219, 230, 223));background-color: rgb(223, 234, 230);margin: 30px 0;border-radius: 10px;box-shadow: 0 10px 20px #000;text-shadow: 0px 0px 20px #ffffff;position: relative;padding: 10px;}.info {display: flex;align-items: center;}.info img {width: 70px;height: 70px;border-radius: 50%;border: 8px #f4f7f2 solid;margin-right: 20px;}strong {margin-right: 20px;}.message-info span {margin-left: auto;font-size: small;margin-top: -20%;}.content {font-size: 23px;margin: 10px 0 0 70px;width: calc(100% - 90px);padding: 10px;background-color: rgba(233, 241, 229, 0.8);border-radius: 10px;width: 300px;}#yincang {height: 400px;overflow: scroll;}</style>
</head><body><div id="bigbox"><div id="box"><header><div id="a"><img src="./imge/LS20250502151611.png" alt="很高兴认识你"></div><div id="b"><h2>你好&nbsp;~<br>我是成毅</h2><div class="box2"><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span></div><h5>你若盛开，清风自来</h5></div><div id="a"><img src="./imge/LS20250502151657.png" alt="很高兴认识你"></div></header></div><div id="box3"><p>多做事，少抱怨，准没错！<span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span>你若盛开，清风自来！<span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span>风是自由的，以后的你也是<span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span>再坚持一下，也许，彩虹就在你的背后！<span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span>很多事情就像季节一样，翻一页，就成过往！<span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span>约定不会变，我们一起越来越好！<span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span>谢谢你们发现我！<span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span></p></div><div id="box1"><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="./图片链接-成毅剧集/图片链接.html">成毅剧集</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse"data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="./Vue/图片轮效果.html">精选壁纸</a></li><li class="nav-item"><a class="nav-link" href="./秋向晚的记事本/秋向晚.html">每日待办</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="./" role="button" data-bs-toggle="dropdown"aria-expanded="false">更多</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="https://www.douyin.com/?recommend=1">抖音</a></li><li><a class="dropdown-item" href="https://www.xiaohongshu.com/explore">小红书</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item"href="https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=">微博</a></li></ul></li><li class="nav-item"><a class="nav-link disabled">0517</a></li></ul><form class="d-flex"><input class="form-control me-2" type="search" placeholder="请输入内容" aria-label="Search"><button class="btn btn-outline-success" type="submit">Search</button></form></div></div></nav></div><div id="box2"><div><h1 id="zi">《莲花楼》</h1></div><div id="carouselExampleCaptions" class="carousel slide"><div class="carousel-indicators"><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"aria-label="Slide 3"></button><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3"aria-label="Slide 4"></button></div><div class="carousel-inner"><div class="carousel-item active"><div class="carousel-caption d-none d-md-block"><h5>一念心清静&nbsp;莲花处处开</h5><p>“笛盟主真是暴珍天物了”</p></div></div><div class="carousel-item"><div class="carousel-caption d-none d-md-block"><h5>李相夷天下第一</h5><p>“四顾门中没了谁都可以，没了李相夷，不行！”</p></div></div><div class="carousel-item"><div class="carousel-caption d-none d-md-block"><h5>小朋友就是小朋友</h5><p>“嗯~嗯什么嗯”</p></div></div><div class="carousel-item"><div class="carousel-caption d-none d-md-block"><h5>原来我早就不需要什么天下第一了</h5><p>“少年时呢，意气最胜，总觉得能保护身边所有的人”</p></div></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></div><hr><hr><div id="box4"><img src="./imge/LS20250502151657.png" width="100px" alt="毅起跺脚"><img src="./imge/LS20250502151611.png" width="100px" alt="毅起跺脚"><img src="./imge/LS20250502151657.png" width="100px" alt="毅起跺脚"><img src="./imge/LS20250502151611.png" width="100px" alt="毅起跺脚"></div><div id="box5"><img src="./imge/LS20250502102842.png" alt=""></div><div id="box6"><p><a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button"aria-expanded="false" aria-controls="multiCollapseExample1">就在江湖之上</a><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2"aria-expanded="false" aria-controls="multiCollapseExample2">莲花楼打戏</button><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse"aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">李相夷天下第一</button></p><div class="row"><div class="col"><div class="collapse multi-collapse" id="multiCollapseExample1"><div class="card card-body"><div id="yinyue"><div><h1>就在江湖之上（李相夷版）</h1><h3>成毅</h3><div class="scroll-yinyue"><p>就在江湖之上<br>万里风光<br>谁不曾流浪<br>谁不是守着聚散的云<br>隔天涯赏月亮<br>等 不多的时间<br>却偏偏 还有不少眷恋<br>问过自己千遍万遍<br>最不舍得 是哪一个瞬间<br>就在江湖之上<br>万里风光<br>谁不曾流浪<br>谁不是守着聚散的云<br>隔天涯赏月亮<br>就在江湖之上<br>少年轻狂<br>千杯不醉入愁肠<br>人间一趟 如梦一场<br>江湖相忘<br>点 未尽的花烛<br>再反复 彻夜无眠共度<br>见 重新认识的故人<br>同来时路 不必同归途<br>就在江湖之上<br>万里风光<br>谁不曾流浪<br>谁不是守着聚散的云<br>隔天涯赏月亮<br>就在江湖之上<br>少年轻狂<br>千杯不醉入愁肠<br>人间一趟 如梦一场<br>就在江湖之上<br>万里风光<br>谁不曾流浪<br>谁不是守着聚散的云<br>隔天涯赏月亮<br>就在江湖之上<br>少年轻狂<br>千杯不醉入愁肠<br>人间一趟 如梦一场<br>江湖相忘<br></p></div><audio src="./imge/音乐播放器/就在江湖之上.mp3" controls loop autoplay muted></audio></div></div></div></div></div><div class="col"><div class="collapse multi-collapse" id="multiCollapseExample2"><div class="card card-body"><div><video src="./imge/合成 1_2025-04-27_23-13.mp4" controls muted></video></div></div></div></div></div></div><div id="box6"><div class="accordion" id="accordionPanelsStayOpenExample"><div class="accordion-item"><h2 class="accordion-header" id="panelsStayOpen-headingOne"><button class="accordion-button" type="button" data-bs-toggle="collapse"data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"aria-controls="panelsStayOpen-collapseOne">近期在追</button></h2><div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"aria-labelledby="panelsStayOpen-headingOne"><div class="accordion-body"><div id="box7"><video src="./imge/合成 1_2025-04-15_16-28.mp4" controls muted autoplay width="400" alt="应渊" id="shi"></video><video src="./imge/合成 1_2025-04-02_21-07.mp4" controls muted autoplay width="400" alt="唐周" id="shi"></video><video src="./imge/VID_20250428000732.mp4" controls muted autoplay width="400" alt="玄夜" id="shi"></video></div></div></div></div><div class="accordion-item"><h2 class="accordion-header" id="panelsStayOpen-headingTwo"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"aria-controls="panelsStayOpen-collapseTwo">走不出这个莲花楼</button></h2><div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"aria-labelledby="panelsStayOpen-headingTwo"><div class="accordion-body"><div id="box7"><video src="./imge/合成 1_2025-02-07_11-30.mp4" controls muted autoplay width="400" alt="李莲花" id="shi"></video><video src="./imge/lv_0_20250406232406.mp4" controls muted autoplay width="400" alt="唐周" id="shi"></video><video src="./imge/合成 1_2025-02-11_17-14.mp4" controls muted autoplay width="400" alt="李相夷" id="shi"></video></div></div></div></div><div class="accordion-item"><h2 class="accordion-header" id="panelsStayOpen-headingThree"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"aria-controls="panelsStayOpen-collapseThree">莲花楼神图</button></h2><div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"aria-labelledby="panelsStayOpen-headingThree"><div class="accordion-body" id="box7"><div><img src="./imge/IMG_20240801_215704.png" alt="莲花楼" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜欢</span><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./imge/屏幕截图 2025-05-04 092331.png" alt="莲花楼" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜欢</span><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./imge/屏幕截图 2025-05-04 092425.png" alt="莲花楼" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜欢</span><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./imge/屏幕截图 2025-05-04 092504.png" alt="莲花楼" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜欢</span><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./imge/屏幕截图 2025-05-04 092606.png" alt="莲花楼" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜欢</span><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./imge/屏幕截图 2025-05-04 092637.png" alt="莲花楼" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜欢</span><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div><div><img src="./imge/屏幕截图 2025-05-04 092753.png" alt="莲花楼" id="tu"><br><span class="iconfont icon-xihuan" id="biao">喜欢</span><span class="iconfont icon-fenxiang" id="biao1">收藏</span></div></div></div></div></div></div><hr><hr><div id="box11"><div id="liuyan"><h3>留言精选</h3><ul class="list-group"><li class="list-group-item">成毅</li><li class="list-group-item">生日快乐</li><li class="list-group-item">李莲花长命百岁</li><li class="list-group-item">李相夷天下第一</li><li class="list-group-item">花花♡</li><li class="list-group-item">莲花楼☺</li><li class="list-group-item">打戏超帅</li><li class="list-group-item">好好生活</li><li class="list-group-item">一念心清静，莲花处处开</li><li class="list-group-item">江湖风波恶，楼里莲花清</li><li class="list-group-item">追随门主</li><li class="list-group-item">红绸舞剑</li><li class="list-group-item">原来我早就不需要什么天下第一了</li><li class="list-group-item">小朋友就是小朋友</li></ul></div><div id="box10"><div class="massages" id="box9"><h1>寄一封信</h1><div class="form"><input type="text" name="" id="usename" placeholder="用户名"><textarea placeholder="内容" id="massage"></textarea><button id="submitBtn">寄出</button></div><div id="yincang"><div id="massageBoard"><div class="message"><div class="message-info"><div class="info"><imgsrc="../网站初体验/imge/img-1708236603718d13781029f11f0a625c96c810dd4cd6a0619976bc17bcca9ff9f37b843d99f76.jpg"alt="" width="45px" height="50px"><strong>秋向晚</strong><span>发布于20250517</span></div></div><div class="content">平安喜乐</div></div></div></div></div></div><div id="tuka"><div class="card" style="width: 18rem;"><img src="./imge/屏幕截图 2025-05-04 092753.png" class="card-img-top" alt="..."><div class="card-body"><p class="card-text">和尚：“老衲闻着点风声就给你写信，信呢？都寄到狗肚子里了”</p><p class="card-text">李莲花：“和尚你给我写信了呀！？信呢？是不是你？”</p></div></div></div></div><hr><hr><div id="box8"><footer><div><h4>版权所有@秋向晚</h4></div><div><h5>图源微博、秋向晚</h5></div><div class="box"><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span><span class="iconfont icon-xihuan"></span></div></footer></div></div>
</body>
<script>document.getElementById('submitBtn').addEventListener('click', function () {var usename = document.getElementById('usename').value; // 获取用户名var message = document.getElementById('massage').value; // 获取留言内容// 检查用户名是否为空if (usename.trim() === '') {alert('请输入用户名');return;}// 检查留言内容是否为空if (message.trim() === '') {alert('请输入留言内容');return;}// 获取留言板容器var messageBoard = document.getElementById('massageBoard');// 创建新的留言容器var newMessage = document.createElement('div');newMessage.classList.add('message'); // 确保使用正确的类名// 设置留言内容newMessage.innerHTML = `<div class="message-info"><div class="info"><img src="../网站初体验/imge/img-1708236603718d13781029f11f0a625c96c810dd4cd6a0619976bc17bcca9ff9f37b843d99f76.jpg" alt="用户头像" width="70px" height="70px"><strong>${usename}</strong><span>发布于：${getCurrentTime()}</span></div></div><div class="content">${message}</div>`;// 将新留言追加到留言板messageBoard.appendChild(newMessage);// 清空输入框document.getElementById('usename').value = '';document.getElementById('massage').value = '';});// 获取当前时间的函数function getCurrentTime() {var now = new Date();let year = now.getFullYear();let month = ('0' + (now.getMonth() + 1)).slice(-2);let day = ('0' + now.getDate()).slice(-2);let hours = ('0' + now.getHours()).slice(-2);let minutes = ('0' + now.getMinutes()).slice(-2);let seconds = ('0' + now.getSeconds()).slice(-2);return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;}
</script></html>

主页截图：

这里是下拉菜单

这是留言功能，用js绑定实现，具体代码看js部分即可，可实时获取时间并成功留言

总结

技术应用：巩固了HTML、CSS、JavaScript和Bootstrap的使用，理解了如何通过合理的标签结构来构建清晰的页面框架；深入学习了CSS的高级特性，如渐变背景、动画、伪类等，掌握了如何通过CSS实现复杂的页面布局和视觉效果，同时也体会到了CSS在提升页面性能方面的优势；通过实现留言板功能，加深了对JavaScript事件监听、DOM操作、函数调用等基本概念的理解，学会了如何将JavaScript与HTML、CSS结合，实现页面的动态交互效果；体验了Bootstrap框架的强大功能和便捷性，它提供了丰富的组件和布局工具，大大简化了开发过程，提高了开发效率，同时也为页面的响应式设计提供了有力支持；提升了综合开发能力。

开发流程：体会到规划和调试的重要性，合理规划可提高效率，调试优化可提升质量。

遇到的问题：

CSS动画兼容性问题：通过添加浏览器前缀（如-webkit-）解决。

动态元素样式不一致：确保动态生成的元素添加正确类名并定义样式

表单验证不完善：使用正则表达式对输入内容进行格式和长度限制。

查看全文

http://www.dtcms.com/a/267083.html