html - css/html 适用于本地文件,不适用于 jsfiddle 或 codepen

标签 html css web

我不知道代码有什么问题,仍在学习中。你能帮忙吗? https://jsfiddle.net/visualcurse/ugkamshy/3/

<html>
<head>
    <title>Nature's Gift</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Ljubisa Naumovic">
    <meta name="description" content="Priroda">
    <meta name="keywords" content="web,html,html5,css,development,website,priroda,nature">
    <link rel="icon" href="https://i.imgur.com/Lmd56ST.png" type="image/png" sizes="16x16">
    <link rel="stylesheet" href="css/stilovi.css">
    <link href="https://fonts.googleapis.com/css?family=Do+Hyeon|Montserrat:100,400,700" rel="stylesheet">
</head>
<body>
    <!-- header -->
    <div class="header">
        <div class="header-pozadina">
            <!-- navigacija -->
            <nav class="navigacija">
                <a href="#">Pocetna</a><a href="#">O Nama</a><a href="#">Kontakt</a>
            </nav>
            <!-- navigacija kraj -->   

            <!-- Naslov strane -->
            <div class="header-naslov">
            <h1>Nature's Gift</h1>
            </div>
            <div class="vidijos">
                <a href="#jump">GO!</a>
            </div>
            <div id="jump"></div>
        </div>
    </div>
    <!-- header kraj -->
    <!-- glavni sadrzaj-->
    <section id="glavni">
        <div class="sezone">
            <h2 class="podnaslov1">Seasons</h2>
            <p class="opis"><em><strong>A</strong> season is a division of the year marked by changes in weather, ecology, and amount of daylight. Seasons result from Earth's orbit around the Sun and Earth's axial tilt relative to the ecliptic plane. In temperate and polar regions, the seasons are marked by changes in the intensity of sunlight that reaches the Earth's surface, variations of which may cause animals to undergo hibernation or to migrate, and plants to be dormant.</em></p>
        </div>
        <!-- tema godisnja doba kraj -->


        <!-- tema prolece -->
        <div class="prolece">

                    <!-- glerija prolece -->
                    <div class="galerija">
                    <img src="https://i.imgur.com/C7nXNV7.jpg" alt="Slika 1" width="350" height="200">
                    </div>
                    <!-- glerija prolece kraj-->
                    <h3 class="podnaslov2">Spring</h3>

                    <p class="opis"><em><strong>S</strong>pring is one of the four conventional temperate seasons, following winter and preceding summer. There are various technical definitions of spring, but local usage of the term varies according to local climate, cultures and customs. When it is spring in the Northern Hemisphere, it is autumn in the Southern Hemisphere and vice versa. At the spring, or vernal, equinox, days are approximately 12 hours long with day length increasing as the season progresses.</em></p>
        </div>
        <!-- tema prolece kraj -->


        <!-- tema leto -->
        <div class="leto">

            <!-- glerija leto -->
            <div class="galerija">
            <img src="https://i.imgur.com/GfWad5p.jpg" alt="Slika 1" width="350" height="200">
            </div>
            <!-- galerija leto kraj -->
            <h3 class="podnaslov2">Summer</h3>

            <p class="opis"><em><strong>S</strong>ummer is the hottest of the four temperate seasons, falling after spring and before autumn. At the summer solstice, the days are longest and the nights are shortest, with day-length decreasing as the season progresses after the solstice. The date of the beginning of summer varies according to climate, tradition and culture. When it is summer in the Northern Hemisphere, it is winter in the Southern Hemisphere, and vice-versa.</em></p>
        </div>
        <!-- tema leto kraj -->


        <!-- tema jesen -->
        <div class="jesen">

            <!-- glerija jesen -->
            <div class="galerija">
            <img src="https://i.imgur.com/vGAUzNA.jpg" alt="Slika 1" width="350" height="200">
            </div>
            <!-- galerija jesen kraj -->
            <h3 class="podnaslov2">Autumn</h3>

            <p class="opis"><em><strong>A</strong>utumn, also known as fall in American and Canadian English,[1] is one of the four temperate seasons. Autumn marks the transition from summer to winter, in September (Northern Hemisphere) or March (Southern Hemisphere), when the duration of daylight becomes noticeably shorter and the temperature cools down considerably. One of its main features is the shedding of leaves from deciduous trees.</em></p>

        </div>
        <!-- tema jesen kraj -->
        <!-- tema zima -->
        <div class="zima">
            <!-- glerija zima -->
            <div class="galerija">
            <img src="https://i.imgur.com/RtBMybC.jpg" alt="Slika 4" width="350" height="200">
            </div>
            <!-- galerija zima kraj -->
            <h3 class="podnaslov2">Winter</h3>

            <p class="opis"><em><strong>W</strong>inter is the coldest season of the year in polar and temperate zones (winter does not occur in the tropical zone). It occurs after autumn and before spring in each year. Winter is caused by the axis of the Earth in that hemisphere being oriented away from the Sun. Different cultures define different dates as the start of winter, and some use a definition based on weather. When it is winter in the Northern Hemisphere, it is summer in the Southern Hemisphere, and vice versa. In many regions, winter is associated with snow and freezing temperatures.</em></p>

        </div>
                <!-- tema zima kraj -->
    </section>
    <!-- glavni kraj -->


    <footer class="footer">

        <p>©2018 VisC designs, ALL RIGHTS RESERVED.</p>

   </footer>     
</body>

@import url('https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet');

* {
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}
body {
    background: #000;
    background: url("https://i.imgur.com/UC8QUwl.jpg") fixed no-repeat center;
    background-size: cover;
    height: 100%;
    width: 100%;
}
a {
    text-decoration: none;
}
p, h1, h2, h3, h4, h5, h6 {
    color: #fff;
    text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}
a, h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}
.header {

    border-bottom: 2px solid rgba(0, 0, 0, .8);
    height: 100%;
    background: url("https://i.imgur.com/TYBIAVx.jpg") no-repeat fixed center;
    background-size: cover;
}
.header-pozadina {
    background: rgba(0,0,0, .5);
    text-align: center;
    height: 100%;
    width: 100%;

}
.navigacija {
    background: #333;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 100;
    text-align: center;
    line-height: 30px;
    border-bottom: 1px solid rgba(255,255,255, .1)

}

.navigacija a {
    margin-right: -1px;
    display: inline-block;
    color: white;
    font-size 18px;
    padding: 10px 15px;
    border-left: 1px solid rgba(255,255,255, .1);
}
.navigacija a:last-of-type {
    border-right: 1px solid rgba(255,255,255, .1);
    margin-right: 0px;
}
.navigacija a:hover {
    color: #ddd;
    background-color: rgba(0, 85, 5, 0.6);
}

.header-naslov {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
.header-naslov h1 {
    color: white;
    font-size: 4em;
    text-transform: uppercase;
    text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;


}
.vidijos {
    padding: 10px;
    bottom: 10%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

}
.vidijos a {
    color: white;
    display: inline-block;
    font-size: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 10px 10px;

    text-align: center;
    vertical-align: middle;
    line-height: 35px;
    width: 35px;
}
.vidijos a:hover {
    color: #ddd;
    background-color: rgba(0, 85, 5, 0.6);
}

#glavni {
    z-index: -1;

}

#jump {
    visibility: hidden;
    padding: 24px;
    bottom: 0;
    position: absolute;
}
.sezone {
    text-align: center;
}
.prolece {
    padding: 15px 5px;
    margin: 60px 80px;
    border: 2px solid rgba(0, 110, 5, 0.6);
    background: rgba(0, 0, 0, .8);
    border-radius: 0px 20px 0px 20px;
    box-shadow:0 0 10px rgba(50, 110, 55, 0.6);
    width: 80%;
    overflow: hidden;   
}

.prolece p {
    text-align: justify;   
}

.prolece h3 {
    text-align: center;   
}

.prolece .galerija {
    float: left;
    width: 370px;
}

.leto {
    padding: 15px 5px;
    margin: 60px 80px;
    border: 2px solid rgba(0, 110, 5, 0.6);
    background: rgba(0, 0, 0, .8);
    border-radius: 20px 0px 20px 0px;
    box-shadow:0 0 10px rgba(50, 110, 55, 0.6);
    width: 80%;
    overflow: hidden;
}
.leto p {
    text-align: justify;   
}

.leto h3 {
    text-align: center;   
}

.leto .galerija {
    float: left;
    width: 370px;
}

.jesen {
    padding: 15px 5px;
    margin: 60px 80px;
    border: 2px solid rgba(0, 110, 5, 0.6);
    background: rgba(0, 0, 0, .8);
    border-radius: 0px 20px 0px 20px;
    box-shadow:0 0 10px rgba(50, 110, 55, 0.6);
    width: 80%;
    overflow: hidden;
}

.jesen p {
    text-align: justify;   
}

.jesen h3 {
    text-align: center;   
}

.jesen .galerija {
    float: left;
    width: 370px;
}

.zima {
    padding: 15px 5px;
    margin: 60px 80px;
    border: 2px solid rgba(0, 110, 5, 0.6);
    background: rgba(0, 0, 0, .8);
    border-radius: 20px 0px 20px 0px;
    box-shadow:0 0 10px rgba(50, 110, 55, 0.6);
    width: 80%;
    overflow: hidden;
}
.zima p {
    text-align: justify;   
}

.zima h3 {
    text-align: center;   
}

.zima .galerija {
    float: left;
    width: 370px;
}

.podnaslov1 {
    background-color: rgba(50, 110, 55, 0.6);
    color: white;
    line-height: 40px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    text-decoration: underline;
}
.podnaslov2 {
    color: white;
    padding: 0px 0px 10px 0px;
    font-size: 25px;
}
.opis::first-letter {
    font-size: 35px;
}


.galerija > img {
    padding: 4px 4px;
    border: 1px solid #000;
    background: url(https://i.imgur.com/dcWBP0v.jpg);
    background-size: 350px 200px;
}

footer {
    text-align: center;
    background: #333;
    color: #fff;
    line-height: 50px;
    border-top: 1px solid rgba(255,255,255, .1)
}

它应该看起来像 this当你按下 GO!滚动到某个 id。 但是,整个标题图片没有显示,当我滚动背景图片时,页面会滚动一半左右然后就停止了。

提前致谢!

最佳答案

你在那里犯的一个绝对经典的错误。当您使用百分比时,浏览器会根据父元素的高度计算高度。因此,如果未设置父元素的高度,请不要使用百分比。请改用 vh(视口(viewport)高度),它会根据您的屏幕尺寸调整图像大小。

改变:

.header{
   height: 100%;
}

到:

.header{
   height: 100vh;
}

已修复!

关于html - css/html 适用于本地文件,不适用于 jsfiddle 或 codepen,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50297925/

相关文章:

css - 如何制作消失的发光效果

html - 为什么我的 CSS + HTML 网页在 IE 和 FireFox 中显示不同?

javascript - 页面不会在 Internet Explorer 中居中

html - angularjs中的内联CSS

jquery - Simditor.js 中的 HTML、CSS 水平滚动工具栏

html - 父 div 上的溢出阻止显示框阴影

php - 如果他或她的密码不正确,如何重定向并通知用户?

ubuntu - TYPO3 - 调度程序不运行重复任务

jsp - 在 Hadoop 中配置嵌入式 Jetty

html - 行内 block 不按预期行事