如何解决页脚格式问题 - 将页脚直接放在内容之下
我在这个网站上有一个我正在构建的页脚，并已将其设置为显示在我网站内容的正下方。当我在页面上链接了一些段落或照片时，此页脚显示在内容正下方（正如我希望的那样），但是当我尝试在滑块中使用照片时，页脚不会出现在此滑块下方，而是它重叠照片。
我想设置页脚，使其像在其他页面上一样显示在照片滑块下方（不要太靠页面下方）。任何有关如何正确设置页脚格式的建议将不胜感激。
下面是我的代码。
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white;">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkBox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;"><a href="#">ホーム</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">ブログ</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">小泉ついて</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">参考文献</a></li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">著者：◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">撮影日：◯◯◯◯年◯◯月◯◯日</p>
<br><ul class="slider_fade">
<li><img src="photos/Home_Page/geiko.JPG" width="85%"></li>
<li><a href="photos/Links/Kansai/Kansai_html_photos/Kyoto_html_photo/Kyoto/Blog/Kongoji/Kongoji_html_photo/Kongoji.html"><img src="photos/Home_Page/Kongoji_homepage.jpg" alt="Kongoji_homepage.jpg" width="85%"></a></li>
<li><img src="photos/Home_Page/fuji.JPG" width="85%"></li>
</ul>
</div>
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© 2020年 | <a href="#">English</a></footer>
</div>
<style>
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: inherit;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,.page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
.slider_fade {
text-align: center;
position: relative;
z-index: 1;
}
.slider_fade > li {
position: absolute;
list-style: none;
visibility: hidden;
animation: anime_slider_fade 25s 0s infinite;
}
.slider_fade > li:nth-of-type(2) {
animation-delay: 6s;
}
.slider_fade > li:nth-of-type(3) {
animation-delay: 15s;
}
@keyframes anime_slider_fade {
0% {
visibility: visible;
opacity: 0;
}
15% {
opacity: 1;
}
33.3% {
opacity: 1;
}
48.3% {
opacity: 0;
}
100% {
opacity: 0;
}
}
*,*:before,*:after {
padding-left: 0;
margin: 0;
Box-sizing: border-Box;
}
ol,ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
@media (max-width: 1050px)and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
解决方法
我添加了一些我身边的照片来测试我发现的问题并修复了页脚。现在，它固定在页面底部。来，看看
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox" />
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul
style="text-align: center; margin-left: 210px; overflow: hidden"
>
<li style="border-bottom: 0.05px solid lightgray">
<a href="#">ホーム</a>
</li>
<li style="border-bottom: 0.05px solid lightgray">
<a href="#">ブログ</a>
</li>
<li style="border-bottom: 0.05px solid lightgray">
<a href="#">小泉ついて</a>
</li>
<li style="border-bottom: 0.05px solid lightgray">
<a href="#">参考文献</a>
</li>
<div class="searchbar">
<form
id="frmSearch"
class="search2"
method="get"
action="default.html"
style="
padding-right: 20px;
padding-top: 20px;
text-align: right;
position: inline;
"
/>
<input
class="search2"
id="txtSearch"
type="text"
name="serach_bar"
size="31"
maxlength="255"
value=""
style="center: 396px; top: 185px; width: 180px; height: 26px"
/>
<input
class="search1"
type="submit"
name="submition"
value="検索"
style="
padding-bottom: 20px;
left: 0px;
top: 153px;
height: 25px;
width: 32px;
"
/>
<input
class="search2"
type="hidden"
name="sitesearch"
value="default.html"
/>
<script type="text/javascript">
document.getElementById("frmSearch").onsubmit = function () {
window.location =
"http://www.google.com/search?q=site:yoursitename.com " +
document.getElementById("txtSearch").value;
return false;
};
document.getElementById("cp_toggle03").onchange =
function () {
if (document.getElementById("cp_toggle03").checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
};
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br />
<h1 style="text-align: center; font-size: 40px">◯◯◯◯</h1>
<br />
<p style="text-align: justify; font-size: 16px"></p>
<p style="text-align: center; font-size: 13px">著者：◯◯◯◯</p>
<p style="text-align: center; font-size: 13px">
撮影日：◯◯◯◯年◯◯月◯◯日
</p>
<br />
<ul class="slider_fade">
<li><img src="photos/Home_Page/geiko.JPG" width="85%"></li>
<li><a href="photos/Links/Kansai/Kansai_html_photos/Kyoto_html_photo/Kyoto/Blog/Kongoji/Kongoji_html_photo/Kongoji.html"><img src="photos/Home_Page/Kongoji_homepage.jpg" alt="Kongoji_homepage.jpg" width="85%"></a></li>
<li><img src="photos/Home_Page/fuji.JPG" width="85%"></li>
</ul>
</div>
</div>
<br /><br />
<footer class="site-footer" style="font-size: 12px">
小泉© 2020年 | <a href="#">English</a>
</footer>
</div>
<style>
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: inherit;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,.page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;
position: fixed;
width: 100%;
height: 50px;
margin-top: -50px;
z-index: 10;
background-color: white;
}
.slider_fade {
text-align: center;
position: relative;
z-index: 1;
}
.slider_fade > li {
position: absolute;
list-style: none;
visibility: hidden;
animation: anime_slider_fade 25s 0s infinite;
}
.slider_fade > li:nth-of-type(2) {
animation-delay: 6s;
}
.slider_fade > li:nth-of-type(3) {
animation-delay: 15s;
}
@keyframes anime_slider_fade {
0% {
visibility: visible;
opacity: 0;
}
15% {
opacity: 1;
}
33.3% {
opacity: 1;
}
48.3% {
opacity: 0;
}
100% {
opacity: 0;
}
}
*,*:before,*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color 0.3s ease-in;
transition: background-color 0.3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
img {
height: 80vh;
width: 100%;
object-fit: scale-down;
margin-bottom: 100px;
}
@media (max-width: 1050px) and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: 0.05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
}
.cp_menuicon > span:before,.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block; /*カバーを表示*/
opacity: 0.6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: 0.7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
</style>
</body>
</html>
,
<!DOCTYPE html>
<html lang="en; jp;">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<head>
<style>
footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;
position: fixed;
width: 100%;
height: 50px;
margin-top: -50px;
z-index: 10;
background-color: white;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.slider_fade {
text-align: center;
position: relative;
z-index: 1;
}
.slider_fade > li {
position: absolute;
list-style: none;
visibility: hidden;
animation: anime_slider_fade 25s 0s infinite;
}
.slider_fade > li:nth-of-type(2) {
animation-delay: 6s;
}
.slider_fade > li:nth-of-type(3) {
animation-delay: 15s;
}
@keyframes anime_slider_fade {
0% {
visibility: visible;
opacity: 0;
}
15% {
opacity: 1;
}
33.3% {
opacity: 1;
}
48.3% {
opacity: 0;
}
100% {
opacity: 0;
}
}
*,*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
@media (max-width: 1050px)and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: relative;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: rel;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" s>
<div style="background-color: white;">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center;">
<li style="border-bottom: .05px solid lightgray;"><a href="#">ホーム</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">ブログ</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">小泉ついて</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">参考文献</a></li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">著者：◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">撮影日：◯◯◯◯年◯◯月◯◯日</p>
<br>
<div class="center">
<ul class="slider_fade">
<li><a><img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Kongoji_homepage.jpg" width="85%"></a></li>
<li><img src="https://www.w3schools.com/howto/img_forest.jpg" width="85%"></li>
<li><img src="https://www.w3schools.com/img_forest.jpg" width="85%"></li>
<li><img src="https://www.w3schools.com/howto/img_mountains.jpg" width="85%"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer style="font-size: 12px;">
<p>小泉© 2020年 |</p><a href="#">English</a>
</footer>
</body>
</html>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
