如何为有序图像页面制作背景模板? (网站))>

问题描述 投票:1回答:1

我正在为我的网站制作网站,我想手工制作这个网站,以便发展html技能。我正在使用Neocities的内置html编辑器。

我现在已经构建了a home page,几乎已经完成了(我只需要使链接的三个页面排在最前面即可,但我知道该怎么做。)

我的问题是:我不知道如何有效地添加漫画页面。

这是我在努力的地方:

  • 我现在唯一的想法是每次添加页面时都要从头开始创建新页面。
  • 这意味着必须复制我所有的背景和设置代码,然后还必须更改按钮链接的位置(因此,在第1页上,'next'链接到2,但是在2页上,'next'将具有链接到3)
  • 这是一场噩梦。所以这是我需要弄清楚的:
  • 我需要一种上传图像并将其插入我的基本站点中的方法,而不必重新复制我的所有代码,因为我的存储空间有限,而且这将非常耗时。
  • 我需要页面具有固有的顺序,以便可以链接到“下一页”,以便下一个按钮始终可以按顺序链接到下一页,而无需指定该页面是什么
  • 我可以弄清楚如何制作和链接首页和最后一页按钮,但不能制作和链接下一页和上一页按钮。我也想不出如何在不重新构建每个页面的整个站点的情况下更轻松地添加页面。任何帮助,将不胜感激!这是我当前的代码(非常业余):

body {
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  
}
/*by the way if anyone sees this note do you have any idea why my tiles don't extend all the way to the edge? it's been bothering me*/
#BGPics {
  background: url(https://okite-shinji-kun.neocities.org/beantower.png) left bottom no-repeat, url(https://okite-shinji-kun.neocities.org/tile.png) left top repeat;
  background-size: 600px, 168px;
}


header {
  text-align: center;
  font-size: 35px;
  font-family: "Times New Roman", Times, serif;
  LINE-HEIGHT:5px;
  color: #FF2963;
  height: auto;
}
h3 {
    font-size: 25px;
  font-family: "Times New Roman", Times, serif;
  LINE-HEIGHT:5px;
  color: #E9B9C8;
  letter-spacing: 7px;
}

footer {
  background-color: #1B1421;
  padding: 10px;
  margin: 0px;
  width:100%;
  text-align: center;
  color: white;
}

/*RESPONSIVE LAYOUT: i started this page from a tutorial thing and i dont know if this part is still relevant because ive tweaked it so much. also the comicpic and frame sections are messy but i wasnt sure how else to get a border around my image*/
@media (max-width: 600px) {
comicpic {
    padding: 30px;
    height: auto;
    margin: auto;
}
  }
}

p {
  word-break: break-all;
}

.inline-block {
   display: inline-block;
}
.verticalcenter {
    display: table-cell;

    vertical-align: middle;
}
.frame {
width: 643px;
height: auto;
background: #1B1421; 
padding: 25px 25px;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>OSK</title>
<meta charset="utf-8">


</head>
<body style="background-color: #FFAED2;" >

<div id="BGPics">
<header>
<div id="banner" align="center">
    <div class="inline-block verticalcenter">
        <img src="https://okite-shinji-kun.neocities.org/title.png" alt="起きて心慈くん!(Wake up, Shinji-kun!)" style="height: 230px; width:680px; padding-bottom: 10px" >
    </div>

    <div class="inline-block verticalcenter">
    <a href="/humans.html">
    <img src="https://okite-shinji-kun.neocities.org/humans_y.png" alt="HUMANS" style="height: 50px; width: 150px; padding-left: 20px; padding-right: 10px"></a>
    </div>

    <div class="inline-block verticalcenter">
    <a href="/archive.html"><img src="https://okite-shinji-kun.neocities.org/archive_y.png" alt="ARCHIVE" style="height: 50px; width: 188px; padding: 10px;"></a>
    </div>
     <div class="inline-block verticalcenter">
     <a href="/about.html"><img src="https://okite-shinji-kun.neocities.org/about_y.png" alt="ABOUT" style="height: 50px; width: 150px; padding-left: 10px, padding-right: 20px;"></a>
    </div>
</div>
 

</header>

<div align="center" class=frame>
<comicpic>
    <img src="https://okite-shinji-kun.neocities.org/block%20img.png" alt="BLANK SHAPE IN THE SIZE OF MY ACTUAL COMPIC PAGES" style="width:643px;">
</comicpic>
</div>

<footer>
  <p>Footer</p>
</footer>
</div>
</body>
</html>

我正在为我的网站制作网站,我想手工制作这个网站,以便发展html技能。我正在使用Neocities的内置html编辑器。我现在已经建立了一个主页,......>

html pagination
1个回答
0
投票

我认为该网站将通过使用javascript帮助您解决分页问题https://www.thatsoftwaredude.com/content/6125/how-to-paginate-through-a-collection-in-javascript抛出说明,这些说明为js函数提供了很好的解释。

© www.soinside.com 2019 - 2024. All rights reserved.