用HTML+CSS+JS搭建一个超简单的静态实用网站页面

article/2025/9/25 7:24:18

废话少说先上效果图，查看网站请访问→http://110.41.21.119:16001/

这是一个超简洁的网页，主要特征有：

头部背景颜色渐变效果：

<div class="header"><div class="loader"><span style="--i:1;">一</span><span style="--i:2;">些</span><span style="--i:3;">好</span><span style="--i:4;">用</span><span style="--i:5;">的</span><span style="--i:6;">网</span><span style="--i:7;">站</span><span style="--i:7;">。</span></div>
</div>

/* 标题 */
.header {padding: 80px;text-align: center;background: #6cb6e8;color: white;animation: headerColor 6s ease-in-out infinite;
}/* 标题字体加大 */
.header h1 {font-size: 40px;
}@keyframes headerColor {0%   {background-color: #6cb6e8;}25%  {background-color: rgba(88, 164, 182, 0.85);}50%  {background-color: rgba(106, 191, 127 , 0.81);}75%  {background-color: rgba(97, 162, 206, 0.91);}100% {background-color: #6cb6e8;}
}

鼠标移到头部文字的动效：


.loader {position: relative;
}.loader span {position: relative;font-size: 2.8em;color: #fff;display: inline-block;text-transform: uppercase;animation: animate 2s ease-in-out infinite;animation-delay: calc(0.1s * var(--i));animation-play-state: paused;
}.loader:hover span {animation-play-state: running;
}@keyframes animate {0%,40%,100% {transform: translate(0);}20% {transform: translate(-20px) rotate3d(1, 0, 1, 10deg);}
}

点击左侧操作栏可跳转到指定位置：

<div class="side"><div class="menuCard" style="height:88px;text-align: center;"><h3>程序员</h3><span class="icon iconfont">&#xe757;</span></div><br><div class="menuCard" style="height:88px;text-align: center;"><h3>设计</h3><span class="icon iconfont">&#xe79d;</span></div><br><div class="menuCard" style="height:88px;text-align: center;"><h3>产品</h3><span class="icon iconfont">&#xe61b;</span></div><br><div class="menuCard" style="height:88px;text-align: center;"><h3>通用</h3><span class="icon iconfont">&#xe61c;</span></div><br>
</div>
<div class="main">
<!--        程序员--><div class="cardFlex"><div style="width: 100%; margin-top: 16px; text-align: center;">------程序员专属工具------</div><div class="card" id="cardOne1"><h1>Element UI</h1><hr><p style="text-indent:2em;">网站快速成型工具。</p></div><div class="card" id="cardOne2"><h1>稀土掘金</h1><hr><p style="text-indent:2em;">一个帮助开发者成长的社区。</p></div><div class="card" id="cardOne3"><h1>React</h1><hr><p style="text-indent:2em;">用于构建用户界面的 JavaScript 库。</p></div><div class="card" id="cardOne4"><h1>TypeScript</h1><hr><p style="text-indent:2em;">让我们使用 TypeScript 来创建一个简单的Web应用。</p></div><div class="card" id="cardOne5"><h1>Vue.js</h1><hr><p style="text-indent:2em;">易学易用，性能出色，适用场景丰富的 Web 前端框架。</p></div><div class="card" id="cardOne6"><h1>亦是美网络</h1><hr><p style="text-indent:2em;">致力于操作系统应用与计算机网络技术的IT网站。</p></div></div>
<!--        设计--><div class="cardFlex"><div style="width: 100%; margin-top: 16px; text-align: center;">------设计专属工具------</div><div class="card" id="cardTwo1"><h1>即时设计</h1><hr><p style="text-indent:2em;">可云端编辑的专业级 UI 设计工具，为中国设计师量身打造 Windows 也能用的「协作版 Sketch」。</p></div><div class="card" id="cardTwo2"><h1>花瓣设计</h1><hr><p style="text-indent:2em;">花瓣，陪你做生活的设计师。</p></div><div class="card" id="cardTwo3"><h1>站酷ZCOOL</h1><hr><p style="text-indent:2em;">站酷ZCOOL,中国设计师互动平台。</p></div><div class="card" id="cardTwo4"><h1>大作网</h1><hr><p style="text-indent:2em;">全球设计灵感搜索引擎。</p></div><div class="card" id="cardTwo5"><h1>视觉中国</h1><hr><p style="text-indent:2em;">花瓣，陪你做生活的设计师。</p></div><div class="card" id="cardTwo6"><h1>UI中国</h1><hr><p style="text-indent:2em;">UI中国用户体验平台,中国用户体验联盟理事单位。</p></div></div>
<!--        产品--><div class="cardFlex"><div style="width: 100%; margin-top: 16px; text-align: center;">------产品专属工具------</div><div class="card" id="cardThree1"><h1>36Kr</h1><hr><p style="text-indent:2em;">36氪_让一部分人先看到未来。</p></div><div class="card" id="cardThree2"><h1>知犀</h1><hr><p style="text-indent:2em;">思维创造，积累每一个灵感的瞬间。</p></div><div class="card" id="cardThree3"><h1>iSlide</h1><hr><p style="text-indent:2em;">让 PPT 设计简单起来。</p></div><div class="card" id="cardThree4"><h1>奶牛快传</h1><hr><p style="text-indent:2em;">迅捷不止文件，传输创意无限。</p></div><div class="card" id="cardThree5"><h1>ProcessOn</h1><hr><p style="text-indent:2em;">免费在线流程图思维导图。</p></div><div class="card" id="cardThree6"><h1>PMCAFF</h1><hr><p style="text-indent:2em;">PMCAFF产品经理社区。</p></div></div><div class="cardFlex"><div style="width: 100%; margin-top: 16px; text-align: center;">------通用工具------</div><div class="card" id="cardFour1"><h1>iconfont</h1><hr><p style="text-indent:2em;">阿里巴巴矢量图标库。</p></div><div class="card" id="cardFour2"><h1>ABCD PDF</h1><hr><p style="text-indent:2em;">ABCD PDF在线转换工具，所有工具都是 100% 免费使用。</p></div><div class="card" id="cardFour3"><h1>tikolu</h1><hr><p style="text-indent:2em;">emoji合成。</p></div></div></div>

var menuCard = document.getElementsByClassName("menuCard");
var mainCard = document.getElementsByClassName("cardFlex");
for(var i = 0;i < menuCard.length;i++){menuCard[i].index = i;menuCard[i].onclick = function (){for (var j=0; j < menuCard.length; j++){console.log(menuCard[this.index]);mainCard[j].style.display = "none";mainCard[this.index].style.display = "flex";console.log(this.index)}}
}

响应式布局：


/* 响应式布局 - 在屏幕设备宽度尺寸小于 700px 时, 让两栏上下堆叠显示 */
@media screen and (max-width: 700px) {.row {flex-direction: column;}
}/* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让导航栏目上下堆叠显示 */
@media screen and (max-width: 400px) {.navbar a {float: none;width: 100%;}
}/* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让卡片上下堆叠显示 */
@media screen and (max-width: 400px) {.cardFlex{flex-direction: column;}.card{width: 100%;padding-bottom: 5%;}
}/* 响应式布局 - 在屏幕设备宽度尺寸大于 400px 时, 让卡片上下堆叠显示 */
@media screen and (min-width: 400px) {.cardFlex{flex-direction: row;}.card{width: 32%;padding-bottom: 5%;}
}

等。

源代码下载地址：https://gitee.com/xyaoo/Practical-website

源码内附登录页面代码。