元素在页面上的定位搞砸了

时间：2017-05-09 20:20:14

标签： html css

在我的网站上，我的页面大约有大约4000像素的高度。但是，每当我开始插入一个新元素时，无论是<div>，<p>，<img>还是其他什么，它的元素都会比我预期的要高。我想知道是否有办法使它插入的新元素将在前面的元素之后，而不必弄乱位置。目前有最少的jQuery和JavaScript，但有几个元素浮出水面。

HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Final</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
</head>

<body>
    <header id="headerDiv">
        <div id="headerNav">
            <h3 id="name">Colin Bruin</h3>
            <nav>
                <ul>
                    <li><a href="../home/home.html">Home</a></li>
                    <li><a href="../Python.html">Code</a></li>
                    <li><a href="../webpages/webpages.html">Webpages</a></li>
                    <li><a href="../articles/articles.html">Articles</a></li>
                    <li><a href="resume.html">Resume</a></li>
                </ul>
            </nav>
        </div>
        <h1>Discover</h1>
    </header>

    <main>
        <div id="section-header1">

            <h1 class="section-header">About Me</h1>
            <svg height="5" width="100%">
                <line x1="500" y1="0" x2="1000" y2="0" style="stroke:rgb(0,0,0);stroke-width:8" />
                Sorry, your browser does not support inline SVG.
            </svg>
        </div>

        <div id="aboutMe">
            <div id="pictureMe">
                <img src="images/Optimized-Headshot.jpg" alt="Stock Photo" height="550" width="499">
            </div>
            <div id="information">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor eget ante in sodales. Integer lobortis eget massa in vehicula. Praesent nisl libero, viverra id tristique pretium, dictum id enim. Cras maximus, libero vitae lacinia commodo, nisl velit maximus augue, ac vestibulum ex ipsum sed ex. Donec tempor elit et nisi molestie bibendum. Etiam placerat ante ac lobortis commodo. Fusce ut massa tellus. Phasellus bibendum nisl at tellus sagittis dignissim. Ut non massa imperdiet, faucibus leo ut, pretium tortor. Nullam accumsan egestas rhoncus. Ut congue nisi rhoncus commodo molestie. Duis in sem id massa pellentesque facilisis. Aliquam ullamcorper pellentesque nulla, ac commodo arcu scelerisque id. Nulla at efficitur enim. Proin non augue nibh.

                Curabitur et ultrices sapien. Aenean fermentum massa et felis iaculis, nec aliquam est eleifend. Proin sagittis tincidunt iaculis. Fusce vel quam lectus. In et mi nec ex tempus ultricies. Etiam tortor leo, feugiat in elit vitae, fringilla rutrum nunc. Duis posuere accumsan pharetra.

                Donec ut tortor et sapien fringilla fermentum. Vestibulum tincidunt odio quis felis egestas eleifend sit amet a neque. Suspendisse a diam magna. Maecenas suscipit mauris eget ultricies imperdiet. Pellentesque lobortis faucibus viverra. Etiam porttitor mattis enim, et aliquam sem rhoncus rhoncus. Etiam tempor lobortis ultrices. Curabitur sit amet tincidunt elit, non fermentum ante. Praesent a blandit nisi. Fusce eu dui non arcu rutrum porttitor vitae sed mi. Cras vel mauris magna.

                Proin quis purus non justo bibendum dictum. Sed eu erat sit amet lectus tempor hendrerit in et tortor. Donec convallis augue quam, sit.</p>
            </div>
        </div>

        <div id="resume">

            <h1 class="section-header">Resume</h1>
            <svg height="5" width="100%">
                <line x1="500" y1="0" x2="1000" y2="0" style="stroke:rgb(0,0,0);stroke-width:8" />
                Sorry, your browser does not support inline SVG.
            </svg>
            <span class="spacing"></span>

            <div id="skills">
                <h3 id="skills-h3"><span id="skills-title">Skills</span></h3>
                <div class="gridWrap">
                    <div class="left-col" id="html">
                        <div class="skillName">HTML/CSS - Advanced</div>
                    </div>
                    <div class="right-col" id="php">
                        <div class="skillName">PHP - Beginner</div>
                    </div>
                </div>

                <div class="gridWrap">
                    <div class="left-col" id="js">
                        <div class="skillName">Javascript - Proficient</div>
                    </div>
                    <div class="right-col" id="jquery">
                        <div class="skillName">jQuery - Proficient</div>
                    </div>
                </div>

                <div class="gridWrap">
                    <div class="left-col" id="python">
                        <div class="skillName">Python - Proficient</div>
                    </div>
                    <div class="right-col" id="mysql">
                        <div class="skillName">MySQL - Advanced</div>
                    </div>
                </div>

                <div class="slideshow-container">
                    <div class="mySlides fade">
                        <div class="numbertext">1 / 3</div>
                        <img src="http://www.zionsville-in.gov/ImageRepository/Document?documentID=949" style="width:100%; height:500px">
                        <div class="text">Zionsville High School / 2008-2012 / High School Diplomal</div>
                    </div>

                    <div class="mySlides fade">
                        <div class="numbertext">2 / 3</div>
                        <img src="http://www.iuwc.indiana.edu/wp-content/uploads/2016/02/sample_gates.jpg" style="width:100%; height:500px">
                        <div class="text">Indiana University / 2012-2016 / Bachelors in Economics</div>
                    </div>

                    <div class="mySlides fade">
                        <div class="numbertext">3 / 3</div>
                        <img src="http://www.math.purdue.edu/~arshak/f13mwpde/wp-content/uploads/2013/02/hovde-1024x417.jpg" style="width:100%; height:500px">
                        <div class="text">Purdue University / 2016-2017 / Certificate of Web Development</div>
                    </div>

                    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                    <a class="next" onclick="plusSlides(1)">&#10095;</a>
                </div>
                <br>
                <br>
                <div style="text-align:center">
                    <span class="dot" onclick="currentSlide(1)"></span>
                    <span class="dot" onclick="currentSlide(2)"></span>
                    <span class="dot" onclick="currentSlide(3)"></span>
                </div>
            </div>

        </div>

        <div id="webpages">
            <span class="spacing"></span>
            <p>sadglkadsgjdaskfhk</p>
        </div>

    </main>

<footer>
</footer>
</body>
</html>

CSS 

body {overflow-x: hidden;}
header {
    height: 100vh;
    width: 100%;
    background-color: rgba(255,255,255,.2);
}
header::after {
  content: "";
  background: url(http://hipnewjersey.com/wp-content/uploads/2016/12/mountains.jpg);
  background-size: cover;
  background-attachment: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
header h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 2.2em;
    position: relative;
    top: 20px;
    left: 3.5%;
}
nav {
    position: relative;
    left: 68%;
    top: -5px;
}
ul {list-style-type: none;}
li {
    display: inline;
    position: relative;
    margin-left: 20px;
}
ul li a {
    text-decoration: none;
    font-size: 1.2em;
    color: black;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
}
ul li a:hover {opacity: .1;}
header h1 {
    position: relative;
    top: 40%;
    left: 36%;
    font-size: 7.5em;
    color: white;
    font-family: 'Roboto', sans-serif;
}
#headerNav {
    width: 100%;
    background-color: rgba(255,255,255, .9);
    height: 75px;
    position: fixed;
    z-index: 10;
}
#aboutMe {
    width: 1000px;
    height: 550px;
    position: relative;
    top: 150px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -50px;
    background-color: white;
    -webkit-box-shadow: 49px 43px 116px -17px rgba(196,196,196,1);
    -moz-box-shadow: 49px 43px 116px -17px rgba(196,196,196,1);
    box-shadow: 49px 43px 116px -17px rgba(196,196,196,1);
}
#pictureMe, #information {
    width: 498px;
    height: 550px;
    display: inline-block;
}
#information p {
    position: relative;
    top: -200px;
}
#section-header1 {
    margin-top: 125px;
}
.section-header  {
    font-family: 'Lato', sans-serif;
    font-size: 3.5em;
    color: black;
    position: relative;
    text-align: center;
}
svg {
    position: absolute;
    margin-top: -23px;
}
.spacing {
    margin-bottom: 120px;
    display: inline-block;
}

/*Skills*/
#resume {
    position: relative;
    top: 450px;
}
#skills {
    height: 1850px;
    width: 100%;
    margin-top: 30px;
    background-image: url("images/park-wallpapers-12.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    /*http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-landscapes-mountains-sea-lakes-awesome/wallpaper-amazing-landscape-patagonia.jpg*/
}
#skills-h3 {
    color: white;
    height: 80px;
    text-align: center;
    background-color: rgba(0,0,0,.7);
}
#skills-title {
    position: relative;
    top: 35px;
}
#php {background-image: url(https://turbo.paulstamatiou.com/uploads/2007/01/rsstotwittercode.gif);}
#html {
    background-image: url(http://jimbir.ch/sites/default/files/img/blog/Standing-Up-Presentation-Export.png);
    background-size: cover;
}
#js {background-image: url(http://magwebsitefiles2015.blob.core.windows.net/blogfiles/blog-image-iibrary/Script_C_to_Javascript_Meets_Dynamics_CRM_2011_2.jpg);}
#jquery {background-image: url(https://aspblogs.blob.core.windows.net/media/scottgu/Media/image_454269F0.png);}
#python {background-image: url(https://image.slidesharecdn.com/20160722europython2016-160723150413/95/3d-modeling-and-printing-by-python-31-638.jpg?cb=1469286265);}
#mysql {background-image: url(http://www.phpkode.com/media/shots/s/m_mysql-db-cleanup-script.jpg);}
.skillName {
    width: 100%;
    background-color: black;
    color: white;
}
.gridWrap {
    margin-bottom: 50px;
    background-color: blue;
}
.left-col, .right-col {
    width: 400px;
    height: 350px;
    margin-top: 25px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #094C70;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 75px;
}
.left-col {
    float: left;
    margin-left: 20%;
}
.right-col {
    float: right;
    margin-right: 20%;
}

/*Education Slideshow*/
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  width: 100%;
  position: relative;
  display: inline-block;
  margin-top: 100px;
}

.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  background-color: rgba(0,0,0,.7);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

的JavaScript / jQuery的

$(document).ready(function() {
    $(".mySlides:nth-of-type(1)").css("display", "block");
    $(".dot:nth-of-type(1)").addClass('active');
})
    var slideIndex = 1; //Shows which slide should show

    function plusSlides(n) {
      showSlides(slideIndex += n); //Adds one to the slide index then initiates the function
    }

    function currentSlide(n) {
      showSlides(slideIndex = n); //Sets slide to n then initiates the function
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides"); //array of mySlides
      var dots = document.getElementsByClassName("dot"); //array of dots
      if (n > slides.length) {slideIndex = 1} //If index of slides is too high return back to one
      if (n < 1) {slideIndex = slides.length} //If you backtrack from the first slide, it goes to the last one
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none"; //Resets them all to hidden
      }
      for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace("active", ""); //Turns off active dots
      }
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active"; //Adds the active class to the selected dot
    }

0 个答案:

没有答案
相关问题
最新问题