javascript - 我无法弄清楚如何将我的所有 html 内容分组在同一个包装器中
问题描述
我是 javascript 的新手，但我对使用 HTML 有一点了解。我的网站面临的问题是我创建了一个图片库，一切都按预期工作，但我似乎无法让内容留在网页内。这是我的问题的图像：https ://imgur.com/RkhF0Ka
我已经尝试将包装器和正文高度设置为 100%，我尝试使用不同的显示设置（例如绝对、相对等）编辑 CSS 文件，我尝试在文章本身内创建一个包装器。这些都不起作用。我只想摆脱网页背景中的障碍，并将我的所有内容放在同一页面上。任何帮助将不胜感激。
My HTML Code:
<!-- Title of website and page -->
<title>....:: Gallery</title>
<!-- Added variable width character encoding -->
<meta charset="utf-8">
<!-- Compatiblility for IE and Chrome -->
<!--[if IE]><meta http-equiv='X-UA-Compatible'
content='IE=edge,chrome=1'><![endif]-->
<!-- Link to external CSS style sheet -->
<link href="pps.css" rel="stylesheet">
<!--Added tablet and mobile scaling-->
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Added older browser compatibility-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<!-- Script element to link to modernizer -->
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<!-- Added a wrapper to ensure the whole page shares the same CSS style-- >
<div id="wrapper">
<!-- Document header -->
<header>
<h1>....</h1>
<!-- Added a div class to header for image map -->
<div id="header">
<!--Added image map to HTML document-->
<map name="imgmap" id="imgmap">
<area href="https://..../" shape="rect"
coords="30,25,345,174" alt=".... Logo">
<area href="https://...../" shape="rect"
coords="500,25,845,174" alt="....">
</map>
<img src="...." usemap="#imgmap" alt="...." width="1020" height="200">
</div>
</header>
<nav> <!-- Created navigation bar and an unordered list for website
pages -->
<ul> <!-- Created button class for navigation menu-->
<li><a class="button" href="index.html">Home</a></li>
<li><a class="button" href="...s.html">...s</a></li>
<li><a class="button" href=".....html">...</a></li>
<li><a class="button" href="....html">...</a></li>
<li><a class="button" href="....html">....</a></li>
<li><a class="button" href="....html">....</a></li>
<li><a class="button" href="....html">....</a></li>
</ul>
</nav>
<!-- Added a div class for the hero image of Gallery -->
<div id="galleryhero"></div>
<!-- main body of document -->
<main>
<!-- h2 element for webpage -->
<h2>Gallery</h2>
<!-- Added paragraph to document -->
<p><span class=".....">...</span> ....</p> <br>
<h2>Images</h2>
<!-- Create image gallery layout -->
<article>
<div id="leftarrow"> <!-- create id for left arrow -->
<p><</p>
<figure id="fig2"> <!-- create id for figure 2 -->
<img src="images" alt="fig2" width="360" height="202" />
</figure>
<figure id="fig3">
<img src="images" alt="fig3" width="480" height="270" />
</figure>
<figure id="fig4">
<img src="images" alt="fig4" width="360" height="202" />
</figure>
<div id="rightarrow"> <!-- create id for right arrow -->
<p>></p>
<div id="fiveButton"> <!-- create id for fiveButton -->
<p>Show more images</p>
</div>
</article>
<script src="photos.js"></script> <!-- create script src to load the
file photos.js -->
<br> <!-- Break element -->
<!-- Added a footer to document -->
<footer>
<div id="footer">
<!-- Added an unorderedlist for footer element -->
<ul>
<li><a href=".....html">.....</a></li>
<li><a href=".....html">.....</a></li>
<li><a href=".....html">.....</a><li>
<li><a href=".....html">.....</a></li>
<li><a href=".....html">.....</a></li>
<li><a href=".....html">.....</a></li>
<li><a href=".....html">.....</a></li>
</ul>
</div>
<!-- Added a copyright mark and fake e-mail address -->
Copyright © 2019 ..... <br>
<a href="....">....com</a>
</footer>
</main>
</div>
</body>
</html>
My CSS Code:
/* Document body configurations */
body { background-color: #fffff0;
background: url("bg.jpg"); /* Configured background url to a root-
absolute url */
height: 100%;
color: #000000;
font-family: Verdana, Ariel, Helvetica; }
/* Document h1 configurations */
h1 { background-color: #FFFFFF;
color: #000000;
font-size: 0.1px;
font-family: Georgia, "Times New Roman", Palatino;
text-indent: 100%;
white-space: nowrap;
overflow: hidden; }
/* Document header configurations */
header {height: 205px;
background-color: #FFFFFF;
background: url("ppheader.gif");
margin-bottom: 0;
padding-bottom: 50px;
border-style: solid;
border-color: #000000;
color: #000000;
font-family: Georgia, "Times New Roman", Palatino; }
/* Document h2 configurations */
h2 { background-color: #fffff0;
color: #e65c00;
text-align: center;
font-family: Georgia, "Times New Roman", Palatino; }
/* Document h3 configurations */
h3 { color: #000033;
float:left; }
/* Document main body configurations */
main { padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #fffff0;
margin-left: 1px;
padding-bottom: 300px;
padding-top: 1px; }
/* Document configurations for buttons */
.button { display: block;
width: 10em;
padding: 1em;
color: #FFFFFF;
background-color: #000000;
font-family: Verdana, Helvetica, Arial;
font-size: 1em;
font-weight: bold;
border: 1px solid white;
margin: 0;
text-decoration: none; }
/* Document image gallery configurations */
figure { display: inline-block;
list-style-type: none;
width: 269px;
height: 448px; }
/* Added a caption for videos */
figure figcaption {width: 269px;
padding-bottom: 10px;
margin: 0;
background-color: #f4f4f0;
text-align: center;
font-weight: bold;
font-style: italic;
font-family: Helvetica, serif; }
/* Document button configurations */
.button:link { color: #FFFFFF; }
.button:visited { color: #ffe066; }
.button:hover { color: #990000; }
/* Document navigation bar configurations */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
border-right: 1px solid black;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Document header, navigation, main body, and footer display
configurations */
header, nav, main, footer { display: block; }
/* Document table configurations */
table { margin: auto;
border: 1px solid #982e01;
width: 90%;
border-collapse: collapse; }
td { text-align: center; }
th, td { padding: 5px;
border: 1px solid #982e01; }
/* Document paragraph configurations */
#text { text-align: left; }
tr:first-of-type { background-color: #000000;
color: #FFFFFF; }
tr:nth-of-type(even) { background-color: #fffecc; }
dt { color: #000033;
font-weight: bold; }
.paulpaintservice { color: #982e01;
font-size: 1.2em; }
/* Document logo configurations */
.logo { color: #FFFFFF;
font-size: 3em; }
/* Document footer configurations */
footer { font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px;
margin-top: 100px;
background-color: #fffff0;
margin-left: 5px; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline;
background-color: #fffff0; }
#footer a { padding: 2px 10px; }
/* Document box style configurations */
* { box-sizing: border-box;}
/* Document wrapper configurations that create a box model for the
website */
#wrapper { background-color: #000000;
margin-left: auto;
margin-right: auto;
height: 100%;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px #1e1e1e; }
/* Document hero image configurations for the home, services, gallery,
about, and appointment pages */
#homehero { height: 300px;
background-image: url("hsunset3.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#servicehero { height: 300px;
background-image: url("hsunset2.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#galleryhero { height: 300px;
background-image: url("hsunset.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#abouthero { height: 300px;
background-image: url("hevening.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#projecthero { height: 300px;
background-image: url("hocean.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#securityhero { height: 300px;
background-image: url("hfield.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#appointmenthero { height: 300px;
background-image: url("hvalley.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
/* Configure pc.gif to float to the left on "About" page */
#pc { float: left;
margin: 0 16px 16px 0;
border: 2px ridge black;
border-radius: 5px;
background: #FFFFFF;}
/* Document "About" page paragraph configurations */
p { text-align: left;
font-size: 1.2em; }
/* Document "Gallery" configurations */
#gallery { position: relative; }
#gallery ul { width: fill; list-style-type: none; }
#gallery img { border: 1px solid black;
margin: 10px; }
#gallery a { text-decoration: none; color: #e65c00; font-style: italic;
font-family: Helvetica;
font-weight: bold; }
#gallery span { display: none; }
#gallery li { display: inline-block; }
#gallery a:hover span {display: block;
position: absolute;
left: 300px;
top: 0;
text-align: center;
text-shadow: 2px 2px 3px #000000; }
/* Document navigation configurations */
nav a { text-decoration: none; }
nav a:link { color: #FFFFFF; }
nav a:visited { color: #ffe066; }
nav a:hover { color: #FFFFFF; }
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
border-right: 1px solid black;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Document header, navigation, main body, and footer display
configurations */
header, nav, main, footer { display: block; }
label { float: left;
width: 8em;
display: block;
padding-right: 1em; }
/* Document contact form configurations */
input, textarea { margin-bottom: 1em;
margin-top: 1.2em;
display: block; }
/* Configure <form> */
#mySubmit { margin-left: 10em; }
#mobile { display: none; }
#desktop { display: inline; }
/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a:link, a:visited {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: none;
color: inherit;
}
a:active {
text-decoration: none;
color: inherit;
}
/* main content */
article {
background: white;
position: relative;
}
article h2 {
font-size: 1.2em;
font-weight: bold;
text-align: left;
margin: 0 0 10px 51px;
}
#leftarrow, #rightarrow {
background: #696565;
color: white;
position: absolute;
z-index: 30;
text-align: center;
height: 135px;
width: 40px;
top: 67px;
}
article div:hover {
cursor: default;
}
#leftarrow {
left: 0;
}
#rightarrow {
right: 0;
}
#fiveButton {
display: block;
width: 100%;
position: absolute;
top: 290px;
color: white;
text-align: center;
}
#fiveButton p {
width: 20%;
margin: 0 auto;
line-height: 2em;
background: #696565;
}
#leftarrow p, #rightarrow p {
position: relative;
top: 50%;
margin-top: -0.5em;
}
figure {
position: absolute;
-webkit-box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
-moz-box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
}
#fig2 {
z-index: 10;
left: 13%;
top: 34px;
}
#fig3 {
z-index: 20;
left: 50%;
margin-left: -240px;
top: 0;
}
#fig4 {
z-index: 10;
right: 13%;
top: 34px;
}
/* Document configurations for mobile devices */
@media only screen and (max-width: 1024px)
/* Document body configurations */
{
body { margin: 0;
padding: 0;
background-image: none; }
/* Document wrapper configurations */
#wrapper { min-width: 0;
margin: 0;
box-shadow: none; }
/* Document h1 configurations */
h1 { margin: 0; }
/* Document navigation configurations */
nav { float: none;
width: auto;
padding: 0.5em; }
nav li { display: inline-block; }
nav a { padding: 1em; }
/* Document main body configurations */
main { padding: 1em;
margin-left: 0;
font-size: 90%; }
/* Document footer configurations */
footer { margin: 0; }
/* Document hero image configurations */
#homehero { margin-left: 0; }
#servicehero { margin-left: 0; }
#galleryhero { margin-left: 0; }
#abouthero { margin-left: 0; }
#appointmenthero { margin-left: 0; }
#projecthero { margin-left: 0; }
#securityhero { margin-left: 0; }
/* Document logo configurations */
.logo { margin-left: 0; }
}
/* Document configurations for mobile devices */
@media only screen and (max-width: 768px) {
/* Document h1 configurations */
h1 { height: 100%;
font-size: 1.5em;
padding-left: 0.3em;
background: none; }
/* Document navigation configurations */
nav { padding: 0; }
nav a { display: block;
padding: 0.2em;
font-size: 1.3em;
border-bottom: 1px;
border-color: #330000; }
nav ul { margin : 0;
padding: 0; }
nav li { display: block;
margin: 0;
padding: 0; }
/* Document button configurations */
.button { width: auto; }
/* Document main body configurations */
main { padding-top: 0.1em;
padding-right: 0.6em;
padding-bottom: 0.1em;
padding-left: 0.4em; }
/* Document hero image configurations */
#homehero { display: none; }
#servicehero { display: none; }
#galleryhero { display: none; }
#abouthero { display: none; }
#appointmenthero { display: none; }
#projecthero { display: none; }
#securityhero { display: none; }
/* Document footer configurations */
footer { padding: 0; }
/* Document mobile, desktop, and header display options configurations */
#mobile { display: inline; }
/* Disable desktop mode while on mobile device */
#desktop { display: none; }
/* Disable header image while on mobile device */
#header { display: none; }
}
这是我的图片库 JS 代码：
"use strict"; // interpret document contents in JavaScript strict mode
/* global variables */
var photoOrder = [1,2,3,4,5];
var figureCount = 3;
/* Add src values to img elements based on order specified in photoOrder
array */
function populateFigures() {
var filename;
var currentFig;
if (figureCount === 3) {
//Add for loop with 3 interations and increments i by 1 after each loop
for (var i = 1; i < 4; i++) {
filename = "images/IMG_0" + photoOrder[i] + "sm.jpg";
currentFig = document.getElementsByTagName("img")[i - 1];
currentFig.src = filename;
}
//Else statement and for loop with 6 iterations
} else {
for (var i = 0; i < 5; i++) {
filename = "images/IMG_0" + photoOrder[i] + "sm.jpg";
currentFig = document.getElementsByTagName("img")[i];
currentFig.src = filename;
}
}
}
/* shift all images one figure to the left, and change values in photoOrder
array to match */
rightArrow() {
for (var i = 0; i < 5; i++) {
after each cycle
if ((photoOrder[i] + 1) === 6) {
photoOrder[i] = 1;
} else {
photoOrder[i] += 1;
}
populateFigures(); //Call populateFigures()
}
}
/* shift all images one figure to the right, and change values in photoOrder
array to match */
function leftArrow() {
for (var i = 0; i < 5; i++) {
if ((photoOrder[i] - 1) === 0) {
with index i minus 1 is equal to the value of 0
photoOrder[i] = 5;
} else {
photoOrder[i] -= 1;
}
populateFigures(); //Call populateFigures()
}
}
/* switch to 3-image layout */
function previewThree() {
var articleEl = document.getElementsByTagName("article")[0];
var numberButton = document.querySelector("#fiveButton p");
/* Remove the 1st and 5th figure elements */
articleEl.removeChild(document.getElementById("fig1"));
articleEl.removeChild(document.getElementById("fig5"));
figureCount = 3;
numberButton.innerHTML = "Show more images";
if (numberButton.addEventListener) {
numberButton.removeEventListener("click", previewThree,
false);
numberButton.addEventListener("click", previewFive, false);
} else if (numberButton.attachEvent) {
numberButton.detachEvent("onclick", previewThree);
numberButton.attachEvent("onclick", previewFive);
}
}
/* switch to 5-image layout */
function previewFive() {
var articleEl = document.getElementsByTagName("article")[0];
//Create figure and img elements for 5th image
var lastFigure = document.createElement("figure");
//Configure settings for 5th figure
lastFigure.id = "fig5";
lastFigure.style.zIndex = "5";
lastFigure.style.position = "absolute";
lastFigure.style.right = "45px";
lastFigure.style.top = "67px";
var lastImage = document.createElement("img");
lastImage.width = "240";
lastImage.height = "135";
lastFigure.appendChild(lastImage);
articleEl.appendChild(lastFigure);
//clone figure element for fifth image and edit to be first image
var firstFigure = lastFigure.cloneNode(true);
/* Change the id value for the firstFigure node from fig5 and the value
cloned from the lastFigure node to fig1, remove cloned value for the right
CSS style and specify a new value for the left CSS style */
firstFigure.id = "fig1";
firstFigure.style.right = "";
string
firstFigure.style.left = "45px";
//Use the appendChild() method to add the firstFigure node to document tree
//articleEl.appendChild(firstFigure);
articleEl.insertBefore(lastFigure,
document.getElementById("rightarrow"));
/* Insert the firstFigure node before the existing element with the id
value
fig2 */
articleEl.insertBefore(firstFigure,
document.getElementById("fig2"));
//Change from 3 images to 5 when user switches to viewing 5 photos
figureCount = 5; //Assign an image for each img element
//Add appropriate src values to two new img elements
document.getElementsByTagName("img")[0].src = "images/IMG_0" + photoOrder[0]
+ "sm.jpg";
document.getElementsByTagName("img")[4].src = "images/IMG_0" + photoOrder[4]
+ "sm.jpg";
//change button to hide extra images
var numberButton = document.querySelector("#fiveButton p"); //Assign var
numberButton value to the selector element with id #fiveButton p
numberButton.innerHTML = "Show fewer images"; //Assign the innerHTML
numberButton to the attribute show fewer images
if (numberButton.addEventListener) {
numberButton.removeEventListener("click", previewFive,
false); //Remove 5-image view
numberButton.addEventListener("click", previewThree,
false);
} else if (numberButton.attachEvent) { /* Add else-if statement to switch
between a preview of 5 or 3 images */
numberButton.detachEvent("onclick", previewFive);
numberButton.attachEvent("onclick", previewThree);
}
}
/* create event listeners for left arrow, right arrow, and
center figure element
*/
function createEventListeners() {
var leftarrow = document.getElementById("leftarrow"); //create var named
leftarrow and assign value to the element with the id value leftarrow
//if/else statement to create the event listener for the left navigation
arrow
if (leftarrow.addEventListener) {
leftarrow.addEventListener("click", leftArrow, false);
} else if (leftarrow.attachEvent) {
leftarrow.attachEvent("onclick", leftArrow);
}
/* create a variable and assign an event listener for the right navigation
arrow */
var rightarrow = document.getElementById("rightarrow"); //create var named
rightarrow and assign value to the element with the id value rightarrow
if (rightarrow.addEventListener) {
rightarrow.addEventListener("click", rightArrow, false);
} else if (rightarrow.attachEvent) {
rightarrow.attachEvent("onclick", rightArrow);
}
//Add event listener for the third img element in the document that has index
value 2
var mainFig = document.getElementsByTagName("img")[1]; //Create var variable
mainFig and assign value to the second image element with the index value of
1
//Add if-else statement to create the event listener to call zoomFig() when
user clicks the center image
if (mainFig.addEventListener) { //Add if statement to not zoom into image
if it is not clicked
mainFig.addEventListener("click", zoomFig, false);
} else if (mainFig.attachEvent) { //Add else-if statement to zoom into image
when clicked
mainFig.attachEvent("onclick", zoomFig);
}
var showAllButton = document.querySelector("#fiveButton p"); //Assign var
showAllButton value to the selector element with id #fiveButton p
if (showAllButton.addEventListener) {
showAllButton.addEventListener("click", previewFive, false);
} else if (showAllButton.attachEvent) {
showAllButton.attachEvent("onclick", previewFive);
}
}
/* open center figure in separate window */
function zoomFig() {
var propertyWidth = 960; //Assign var propertyWidth value to 960px
var propertyHeight = 600; //Assign var propertyHeight value to 600px
var winLeft = ((screen.width - propertyWidth) / 2); // Create var named
winLeft and start with the width of the existing browser window minus the
width of the new browser window, divided by two
var winTop = ((screen.height - propertyHeight) / 2); // Create var named
winTop and start with the height of the existing browser window minus the
width of the new browser window, divided by two
var winOptions = "width=960,height=600"; //Create var named winOptions and
assign to the width of 960px and height of 600px
winOptions += ",left=" + winLeft; //Create an option string for the
window.open() method that incorporates the calculated values for the left of
window
winOptions += ",top=" + winTop; //Create an option string for the
window.open() method that incorporates the calculated values for the top of
window
var zoomWindow = window.open("zoom.htm", "zoomwin", "width=960,height=600");
//Create variable named zoomWindow and assign to the window created by
window.open to display contents of zoom html file
zoomWindow.focus(); //Make the external photo gallery window the active
window
}
/* create event listeners and populate image elements */
function setUpPage() { //Call function
createEventListeners(); //Call function
populateFigures(); //Call function
}
/* run setUpPage() function when page finishes loading */
if (window.addEventListener) {
window.addEventListener("load", setUpPage, false);
} else if (window.attachEvent) {
window.attachEvent("onload", setUpPage);
}
发生的另一件奇怪的事情是徽标/标题图像首先加载，然后立即切换到其中一张图片库照片。我无法弄清楚如何解决这个问题......
解决方案
推荐阅读
- javascript - 如何显示每个复选框值而不是选定的位置值
- python - ValueError：x 和 y 必须具有相同的第一维，但具有形状 (1,) 和 (1500001,)
- java - Junit spark：什么是java中assertDataFrameEquals的等价物来比较2个数据帧
- c++ - C++ (Windows)：MultiByteToWideChar 不适用于某些字符
- arrays - 如何在 groovy 中动态地将 2d 数组转换为 3d 数组
- python - 当 uvicorn workers>1 时 uvicorn 和 fastAPI 与 pyinstaller 问题
- javascript - 单击一个单选按钮时更改布局形式
- python - 显示 Pandas 数据框中每一列的前 n 行
- bigcommerce - 尝试在本地启动我的 bigcommerce 主题时出现 401 错误
- java - 如何创建通用 MVEL 表达式