网页制作记录
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浪漫庄园综合查询--游戏资讯一手掌握</title>
<link rel="stylesheet" href="/css/styles.css">
<!-- 引入favicon -->
<link rel="icon" href="img/lm.ico" type="image/x-icon">
</head>
<body>
<div id="container">
<div id="sidebar">
<div id="logo">
<a href="/" style="text-decoration:none;">
<svg t="1741755903244" class="icon" viewBox="0 0 2214 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4354" width="200" height="200"><path d="M1694.422326 163.982884c32.232186 0 52.962233 16.14586 59.773023 45.282232l0.619163 2.857675 51.98586 330.859162 144.336372-330.859162c13.145302-29.93414 45.472744-47.020651 75.525954-48.092279l2.988651-0.047628h184.796279l-361.067163 677.804651c-72.656372 128.833488-181.045581 176.580465-274.217674 177.925953l-4.048372 0.023814H1394.783256l22.742325-136.168186c8.108651-35.280372 24.409302-51.509581 49.021024-52.509767l2.488558-0.059535h102.4c45.877581 0 89.683349-37.197395 97.875349-83.051163a80.538791 80.538791 0 0 0-0.452465-30.958139l-0.881117-3.548279-156.386232-549.459349h182.831628z m456.263441 555.16279c17.717581 0 32.744186 6.239256 45.067907 18.622512 12.466605 12.502326 18.693953 27.52893 18.693954 45.103628 0 17.622326-6.239256 32.696558-18.693954 45.067907-12.323721 12.383256-27.350326 18.741581-45.067907 18.741581-17.538977 0-32.553674-6.346419-45.067907-18.741581-12.40707-12.371349-18.682047-27.433674-18.682046-45.067907 0-17.574698 6.274977-32.601302 18.693953-45.103628 12.502326-12.383256 27.517023-18.622512 45.056-18.622512z m0 9.370791c-14.717023 0-27.338419 5.286698-37.864186 15.955349-10.35907 10.597209-15.550512 23.385302-15.550511 38.4-0.011907 15.074233 5.167628 27.88614 15.562418 38.435721 10.51386 10.63293 23.099535 15.919628 37.852279 15.919628 14.752744 0 27.52893-5.286698 37.947535-15.919628 10.537674-10.549581 15.812465-23.361488 15.812465-38.435721 0-14.990884-5.274791-27.790884-15.812465-38.4-10.418605-10.668651-23.230512-15.955349-37.947535-15.955349z m3.012466 19.360744c6.120186 0 11.323535 2.083721 15.598139 6.036838 4.226977 4.012651 6.489302 8.989767 6.489302 14.88372 0 9.061209-4.429395 15.264744-13.133395 18.539163l-1.940837 0.654884 16.788837 29.767442h-11.323535l-16.014884-28.517209h-10.537674v28.529116h-9.644651v-69.893954h23.718698z m-1.071628 8.584931h-13.002419v24.528372h13.002419c3.869767 0 7.025116-1.238326 9.477953-3.42921a11.252093 11.252093 0 0 0 3.691163-8.775442 11.561674 11.561674 0 0 0-3.691163-8.811162 12.514233 12.514233 0 0 0-7.858605-3.441117l-1.619348-0.071441zM254.654512 0c52.962233 0 79.074233 20.71814 71.096558 72.58493l-0.500093 3.095814-15.562419 88.18307h124.058791l-27.338419 154.921674H282.278698l-33.815814 191.821396c-8.049116 46.020465 20.801488 64.571535 51.950139 71.668093l4.465117 0.928744c0.738233 0.154791 1.488372 0.285767 2.226604 0.416744l4.465116 0.714419 2.226605 0.321488 4.417488 0.535814 4.369861 0.416744 4.286512 0.309582 4.167441 0.214325 6.024931 0.178605 3.810232 0.035721 6.167814-0.047628 7.906233-0.190512 4.274604-0.202418-30.350883 172.770232-9.180279 0.976372-6.394047 0.547721-4.88186 0.309582-5.524838 0.238139-6.286883 0.166698c-1.119256 0.011907-2.28614 0.035721-3.476838 0.035721l-9.454139-0.011907-8.977861-0.178605-6.191627-0.214325-6.334512-0.297675-6.489302-0.39293-6.596465-0.488186-6.715535-0.595349-6.810791-0.714419-6.882233-0.833488-6.953674-0.964465-3.500651-0.535814-7.025116-1.166884-7.048931-1.309767C118.164837 736.327442 28.612465 685.460837 51.08093 542.886698l0.988279-5.917768 38.364279-218.183442H0l27.231256-154.921674h89.552372L145.622326 0h109.044093z m630.569674 158.077023c1.357395 0 2.714791 0.035721 4.048372 0.095256l3.917395 0.23814 3.667349 0.333395 4.810419 0.595349 6.310698 1.035907-34.458791 195.34586-3.786419-0.738232-5.310511-0.833489-5.35814-0.66679-4.167442-0.428652-4.619907-0.357209a227.542326 227.542326 0 0 0-2.476651-0.166698l-5.262884-0.250046a239.211163 239.211163 0 0 0-5.655814-0.130977l-2.976744-0.023814c-1.595535 0-3.214884 0.011907-4.893767 0.059535l-5.108093 0.166698-5.298605 0.297674-5.477209 0.452465-5.643907 0.595349-2.869582 0.357209-5.846325 0.86921c-45.32986 7.358512-101.364093 31.648744-135.930047 100.637767-9.882791 20.36093-17.610419 44.81786-23.170976 73.978047l-1.154977 6.322604-38.554791 219.469396h-198.608372l104.209861-591.348093h106.603162c52.986047 0 78.990884 20.75386 70.989396 72.632558l-0.500093 3.095814-11.668838 65.512186c39.709767-80.610233 125.868651-147.134512 214.242233-147.146419z" fill="#323E48" p-id="4355"></path><path d="M1297.205581 170.960372c124.189767 37.364093 214.539907 152.504558 214.539907 288.577488 0 166.411907-134.906047 301.425116-301.472744 301.401303-3.798326 0-7.608558-0.083349-11.394977-0.23814l-5.643907-0.297674 31.851163-180.593116c59.915907-7.322791 106.472186-58.201302 106.472186-120.28428 0-45.829953-25.48093-85.670698-63.071256-106.269767l-3.155348-1.666977 31.874976-180.628837z m-86.849488-12.811907c3.774512 0 7.596651 0.11907 11.394977 0.309582l5.691535 0.321488-31.815442 180.61693c-59.915907 7.179907-106.555535 58.463256-106.555535 120.153302 0 45.770419 25.540465 85.77786 63.106977 106.293582l3.143442 1.666977-31.791628 180.736c-124.201674-37.376-214.587535-152.576-214.587535-288.708466 0-166.292837 134.977488-301.389395 301.413209-301.389395z" fill="#00ADBB" p-id="4356"></path></svg>
</a>
</div>
<ul id="nav">
<li data-page="home">
<svg class="nav-icon" viewBox="0 0 1024 1024">
<path d="M527.701333 179.768889a21.504 21.504 0 0 0-31.402666 0L155.136 536.746667a32.597333 32.597333 0 0 0-7.850667 19.569777v453.12H395.946667v-267.946666c0-62.748444 50.858667-113.607111 113.550222-113.607111h5.006222c62.691556 0 113.550222 50.858667 113.550222 113.607111v267.946666h248.661334V556.259556a32.654222 32.654222 0 0 0-7.850667-19.569778L527.701333 179.768889z m472.120889 309.191111L547.271111 29.468444a49.493333 49.493333 0 0 0-70.656 0L24.177778 488.96a33.223111 33.223111 0 0 0 47.217778 46.648889L512 88.177778l440.604444 447.374222a33.109333 33.109333 0 1 0 47.217778-46.648889z" fill="#1DECFE"></path>
</svg> 首页
</li>
<li data-page="price">
<svg class="nav-icon" viewBox="0 0 1024 1024">
<path d="M192 672c19.2 0 32 12.8 32 32v128c0 19.2-12.8 32-32 32s-32-12.8-32-32v-128c0-19.2 12.8-32 32-32zM416 480c19.2 0 32 12.8 32 32v320c0 19.2-12.8 32-32 32s-32-12.8-32-32V512c0-19.2 12.8-32 32-32zM608 608c19.2 0 32 12.8 32 32v192c0 19.2-12.8 32-32 32s-32-12.8-32-32v-192c0-19.2 12.8-32 32-32zM832 448c19.2 0 32 12.8 32 32v352c0 19.2-12.8 32-32 32s-32-12.8-32-32V480c0-19.2 12.8-32 32-32z" fill="#597EF7" p-id="2626"></path><path d="M419.2 323.2l-246.4 246.4c-12.8 12.8-32 12.8-44.8 0-12.8-12.8-12.8-32 0-44.8l291.2-291.2 192 192 217.6-217.6c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8l-262.4 262.4-192-192z" fill="#50E3C2"></path>
</svg> 价格
</li>
<li data-page="zhanshi">
<svg class="nav-icon" viewBox="0 0 1024 1024">
<path d="M0 979.2c0 25.6 19.2 44.8 44.8 44.8h934.4c25.6 0 44.8-19.2 44.8-44.8v-704H0v704z m595.2-371.2h256v83.2h-256V608zM512 774.4h339.2v83.2H512v-83.2z m-19.2-544H0L102.4 51.2c12.8-19.2 38.4-32 64-32h320v211.2z m531.2 0H537.6V25.6h320c25.6 0 51.2 12.8 64 32L1024 230.4z" fill="#409EFF" p-id="10926"></path>
</svg> 展示
</li>
<li data-page="gongju">
<svg class="nav-icon" viewBox="0 0 1024 1024">
<path d="M400.85 95.19c-0.23 0-0.46 0.02-0.69 0.02-42.02 0.1-81.91 9.18-117.94 25.33l194.42 209.82-64.89 60.11-76.09 70.49-142.21-153.48c-0.24 4.79-0.44 9.59-0.44 14.44 0 160.33 115.86 314.94 276.22 314.94 47.99 0 79.94 0 147.23-56.96 46.45-51.46 74.74-119.63 74.74-194.41-0.01-160.33-130-290.3-290.35-290.3z" fill="#9CD5E4" p-id="15888"></path><path d="M801.86 950.09c-37.61 0-75.21-14.24-103.94-42.76l-190.06-188.7c-32.14 10.01-65.47 15.07-99.37 15.07-184.62 0-334.82-150.2-334.82-334.82 0-53.85 12.49-105.4 37.11-153.19l22.09-42.85 209.87 226.51 96.56-89.46-210.6-227.31 42.96-19.28c43.26-19.41 89.3-29.25 136.83-29.25 184.63 0 334.83 150.2 334.83 334.83 0 40.29-7.07 79.5-21.04 116.85l183.53 182.2c57.72 57.33 58.07 150.92 0.75 208.65-28.79 29-66.75 43.51-104.7 43.51zM524.99 640.36l220.58 218.98c31.26 31.06 81.97 30.86 113.02-0.41 31.05-31.26 30.86-81.97-0.41-113.02L641.83 531.12l9.79-21.43c15.98-34.98 24.09-72.26 24.09-110.81 0-147.35-119.87-267.22-267.22-267.22-21.45 0-42.51 2.51-62.99 7.49l189.36 204.39L339.09 524.9 152.16 323.16c-7.24 24.39-10.88 49.71-10.88 75.72 0 147.34 119.87 267.21 267.21 267.21 33 0 65.32-6.01 96.07-17.85l20.43-7.88z" fill="#233649" p-id="15889"></path>
</svg> 工具
</li>
<li data-page="ziyou">
<svg class="nav-icon" viewBox="0 0 1024 1024">
<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#69ADF4" p-id="22213"></path><path d="M613.761496 745.452845h122.876808c32.906875 0 58.695233-28.008754 55.661543-60.455907l-30.990566-331.448767C759.408137 333.211037 742.176524 317.655495 721.550466 317.655495H613.761496v427.79735z" fill="#FFFFFF" opacity=".4" p-id="22214"></path><path d="M304.475186 277.749026c-20.698687 0-37.963024 15.825309-39.757219 36.446578l-32.247619 370.544337c-2.842139 32.643492 22.890351 60.712904 55.65835 60.712904h338.738881c32.72969 0 58.449409-28.007956 55.666332-60.618725l-31.617895-370.571473C649.152948 293.613443 631.878235 277.749026 611.15321 277.749026h-62.321135v51.479345c0 50.47051-40.915305 91.385814-91.385815 91.385815s-91.385814-40.915305-91.385814-91.385815V277.749026h-61.58526z" fill="#FFFFFF" p-id="22215"></path><path d="M410.755691 277.749026v51.479345c0 25.786762 20.903807 46.690569 46.690569 46.690569s46.690569-20.903807 46.690569-46.690569V277.749026h-93.381138z" fill="#FFFFFF" p-id="22216"></path>
</svg> 自由
</li>
<li data-page="ziliao">
<svg class="nav-icon" viewBox="0 0 1024 1024">
<path d="M696.32 81.92a40.96 40.96 0 0 1 40.96 40.96v655.36a40.96 40.96 0 0 1-40.96 40.96H204.8a40.96 40.96 0 0 1-40.96-40.96V122.88a40.96 40.96 0 0 1 40.96-40.96h491.52zM204.8 0a122.88 122.88 0 0 0-122.88 122.88v655.36a122.88 122.88 0 0 0 122.88 122.88h491.52a122.88 122.88 0 0 0 122.88-122.88V122.88a122.88 122.88 0 0 0-122.88-122.88H204.8z" fill="#4E4E4E" p-id="24788"></path><path d="M901.12 245.76a40.96 40.96 0 0 1 40.96 40.96v573.44c0 90.43968-73.23648 163.84-163.75808 163.84H368.64a40.96 40.96 0 1 1 0-81.92h409.68192A81.87904 81.87904 0 0 0 860.16 860.16V286.72a40.96 40.96 0 0 1 40.96-40.96zM245.76 245.76a40.96 40.96 0 0 1 40.96-40.96h327.68a40.96 40.96 0 1 1 0 81.92H286.72a40.96 40.96 0 0 1-40.96-40.96zM245.76 450.56a40.96 40.96 0 0 1 40.96-40.96h327.68a40.96 40.96 0 1 1 0 81.92H286.72a40.96 40.96 0 0 1-40.96-40.96z" fill="#4180FF" p-id="24789"></path><path d="M245.76 655.36a40.96 40.96 0 0 1 40.96-40.96h327.68a40.96 40.96 0 1 1 0 81.92H286.72a40.96 40.96 0 0 1-40.96-40.96z" fill="#4180FF" p-id="24790"></path>
</svg> 资料
</li>
<li data-page="jubao">
<svg class="nav-icon" viewBox="0 0 1024 1024">
<path d="M791.057 201.71c40.66 0 66.583 21.367 66.583 32.553v437.674c0 11.155-25.923 32.522-66.583 32.522H620.311l-9.238 2.262-3.488 0.848-11.375 2.797-10.086 6.001-3.205 1.917-9.3 5.562-7.448 7.855-55.868 58.853-62.75-62.372-6.755-6.441-7.038-4.525-9.898-6.002-10.024-3.142-11.5-3.613H232.912c-40.597 0-66.52-21.367-66.52-32.522V234.263c0-11.186 25.923-32.553 66.52-32.553h558.145m0-78.555H232.88c-80.125 0-145.074 49.74-145.074 111.108v437.674c0 61.241 64.949 111.076 145.074 111.076h157.392l1.068 0.346 0.817 0.534L508.544 899.65l3.456 1.194 3.08-1.226 108.059-113.84 3.205-1.918 3.488-0.848h161.225c80.157 0 145.137-49.835 145.137-111.076V234.263c0-61.367-64.98-111.108-145.137-111.108z" fill="#4796E3" p-id="26760"></path><path d="M557.185 608.685c0 17.847-14.423 32.301-32.302 32.301h-29.6c-17.847 0-32.332-14.454-32.332-32.301v-29.6a32.364 32.364 0 0 1 32.333-32.332h29.599c17.848 0 32.302 14.485 32.302 32.333v29.599z m-94.266-347.368l-22.246 27.494 47.132 206.85h43.205l48.421-210.778-22.246-23.566z" fill="#FFC001" p-id="26761"></path>
</svg> 举报
</li>
<li data-page="guanyu">
<svg class="nav-icon" viewBox="0 0 1024 1024">
<path d="M476.9536 314.368a36.48 36.48 0 1 1 36.48-36.48 36.48 36.48 0 0 1-36.48 36.48z m0 97.28a24.32 24.32 0 0 1 24.32 24.32v389.12a24.32 24.32 0 0 1-48.64 0v-389.12a24.32 24.32 0 0 1 24.32-24.32zM511.1296 998.4c-134.1696 0-280.6784-30.0544-368.128-119.168a22.7072 22.7072 0 0 1-4.8896-4.6336 2.4064 2.4064 0 0 1-0.256-0.256 23.9104 23.9104 0 0 1-5.12-14.464 24.2432 24.2432 0 0 1 24.1152-24.32 23.6288 23.6288 0 0 1 19.5584 10.88l0.8448-0.6144a431.1552 431.1552 0 0 0 308.3264 129.5872 438.4768 438.4768 0 1 0-409.9072-294.4 25.7536 25.7536 0 0 1 1.9456 20.992 24.1408 24.1408 0 0 1-29.5424 17.2032 23.6544 23.6544 0 0 1-12.8-9.216l-0.256 0.1792c0-0.256-0.1536-0.512-0.256-0.768a23.808 23.808 0 0 1-4.1984-12.6208 482.1248 482.1248 0 0 1-27.4944-159.232c0-268.6208 241.6384-512 508.1344-512A486.4256 486.4256 0 0 1 511.1296 998.4zM103.6032 759.68a26.368 26.368 0 0 1 17.7664 23.3984 24.6784 24.6784 0 0 1-22.7584 24.0384c40.6528-2.4064-36.1216 13.2352-24.5504-30.2592a24.0896 24.0896 0 0 1 29.5424-17.1776z" fill="#48BCF5" p-id="27775"></path><path d="M512.0256 1024a509.6704 509.6704 0 0 1-363.52-152.3712 24.5248 24.5248 0 0 1-5.12-4.8896l-0.3072-0.256a25.0368 25.0368 0 0 1-5.5552-15.36 25.6 25.6 0 0 1 25.6-25.6 25.1648 25.1648 0 0 1 20.7616 11.4432l0.896-0.6656a465.3824 465.3824 0 1 0-107.776-173.3632 27.008 27.008 0 0 1 2.048 22.0928 25.6 25.6 0 0 1-31.36 18.0992 25.1648 25.1648 0 0 1-13.5936-9.7024l-0.2816 0.2048c0-0.256-0.1536-0.5376-0.256-0.8192a25.1392 25.1392 0 0 1-4.4544-13.2864A503.4496 503.4496 0 0 1 0.0256 512a512 512 0 1 1 512 512zM106.7776 745.7536a27.7504 27.7504 0 0 1 18.8416 24.6528 26.112 26.112 0 0 1-24.1408 25.2928c43.136-2.56-38.4 13.9264-26.0352-31.8464a25.6 25.6 0 0 1 31.3344-18.0992zM513.0496 268.8a38.4 38.4 0 1 1 38.4-38.4 38.4 38.4 0 0 1-38.4 38.4z m0 102.4a25.6 25.6 0 0 1 25.6 25.6v409.6a25.6 25.6 0 0 1-51.2 0v-409.6a25.6 25.6 0 0 1 25.6-25.6z" fill="#4076FE" p-id="27776"></path>
</svg> 关于
</li>
<!-- 其他导航项 -->
</ul>
</div>
<div id="content"></div>
</div>
<script src="/js/scripts.js"></script>
</body>
</html>{/tabs-pane}
{tabs-pane label="JS文件"}
document.addEventListener("DOMContentLoaded", function() {
var navItems = document.querySelectorAll('#nav li');
navItems.forEach(function(item) {
item.addEventListener('click', function(event) {
event.preventDefault(); // 防止默认行为
var page = this.getAttribute('data-page');
loadPage(page);
updateURL(page);
// 执行特定于页面的JavaScript代码
if (page === 'home') {
executeHomePageScript();
} else if (page === 'price') {
executePricingPageScript();
}
});
});
function loadPage(pageName) {
var xhr = new XMLHttpRequest();
xhr.open("GET", pageName + ".html", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('content').innerHTML = xhr.responseText;
}
};
xhr.send();
}
function updateURL(pageName) {
var baseUrl = window.location.origin; // 获取当前域名
var newUrl = '';
switch (pageName) {
case 'home':
newUrl = baseUrl;
break;
case 'price':
newUrl = baseUrl + '/' + pageName;
break;
// 添加其他页面的URL映射
default:
newUrl = baseUrl;
}
window.history.pushState({page: pageName}, '', newUrl);
}
function executeHomePageScript() {
console.log("首页特定的JavaScript代码正在执行");
// 示例：添加一个按钮点击事件
const button = document.createElement('button');
button.innerText = '点击我';
button.onclick = function() {
alert('按钮被点击了！');
};
document.getElementById('content').appendChild(button);
}
function executePricingPageScript() {
console.log("价格页面特定的JavaScript代码正在执行");
// 在这里编写价格页面特定的JavaScript代码
}
// 默认加载首页并执行相应的脚本
loadPage('home');
executeHomePageScript();
// 监听浏览器的前进后退事件
window.onpopstate = function(event) {
if (event.state && event.state.page) {
loadPage(event.state.page);
if (event.state.page === 'home') {
executeHomePageScript();
} else if (event.state.page === 'price') {
executePricingPageScript();
}
}
};
// 检查初始URL以确保正确加载页面
var path = window.location.pathname;
var pageName = path.split('/').pop();
if (pageName === '') {
loadPage('home');
executeHomePageScript();
} else if (pageName === 'price') {
loadPage(pageName);
executePricingPageScript();
}
});{/tabs-pane}
{tabs-pane label="CSS文件"}
#container {
display: flex;
}
#sidebar {
width: 200px;
background-color: #8da38e6c; /* 设置背景颜色为灰色 */
height: 100vh;
}
#nav {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
padding: 15px; /* 增加内边距以调整项目内部间距 */
margin-bottom: 10px; /* 增加外边距以调整项目之间的间距 */
cursor: pointer;
display: flex;
align-items: center;
border-radius: 4px;
transition: background-color 0.3s ease;
}
#nav li:hover {
background-color: #ddd;
}
#nav li svg.nav-icon {
margin-right: 8px;
width: 16px;
height: 16px;
}
#content {
flex-grow: 1;
padding: 20px;
}{/tabs-pane}