个人中心
gpt4 book ai didi

html - CSS冲突，网站没有意义。属性不适用于某些 div

转载 作者：行者123 更新时间：2023-11-28 04:20:22 28 4
gpt4 key购买 nike

我的 HTML 代码:

<!DOCTYPE HTML> <!-- KOD KOLORU AKCENTÓW STRONY #2E16B1--> <!-- tytuły - Montserrat, tekst-raleway-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Portfolio. Aleksander Jess</title>
        <meta name="author" content="Aleksander Jess" />
        <meta name="description" content="Kilka słów o mnie"/>
        <meta content="True" name="HandheldFriendly">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="viewport" content="width=device-width">
        <!-- ****** favicony faviconit.com ****** -->
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
        <link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
        <link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
        <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
        <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
        <link rel="apple-touch-icon" href="/favicon-57.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
        <link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
        <link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
        <link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
        <link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
        <link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
        <meta name="msapplication-TileColor" content="#FFFFFF">
        <meta name="msapplication-TileImage" content="/favicon-144.png">
        <meta name="msapplication-config" content="/browserconfig.xml">
    <!-- ****** favicony faviconit.com ****** -->
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
    </head>
    <body>
        <div id="all" class="all">
            <!-- TOP--><!-- TOP--><!-- TOP--><!-- TOP--> 
            <div id="top" class="top">
                <!--BANNER--><!--BANNER--><!--BANNER--><!--BANNER-->
                <div id="banner" class="banner">
                <audio controls autoplay>
                    <source src="/audio/Jani R - Center Focus.mp3">
                </audio>
                <img class="logo" id="logo" src="images/logo.png" >
                <div id="menu_box" class="menu_box">
                    <a class="menu_link" href="#menu">Menu</a>
                </div>
                </div>
            <!--NAV--><!--NAV--><!--NAV--><!--NAV-->
                <nav>
                    <ul class="topnav" id="myTopnav">
                        <li><a class="menu" href="index.html">AJ</a></li>
                        <li><a class="menu" href="sub/ja.html">O mnie</a></li>
                        <li><a class="menu" href="sub/praca.html">Co robię?</a></li>
                        <!--SUBMENU-->
                        <ul class="topnav_down" id="topnav_down">
                            <li><a class="menu" href="sub/muzyka.html">Muzykę</a></li>
                            <li><a class="menu" href="sub/zdjecia.html">Zdjęcia</a></li>
                            <li><a class="menu" href="sub/filmy.html">Filmy</a></li>
                            <li><a class="menu" href="sub/tlumaczenia.html">Tlumaczenia</a></li>
                        </ul>
                        <li><a class="menu" href="kontakt.html">Kontakt</a></li>

                    </ul>
                </nav>
            </div>

        </div>    
                        <div id="slider" class="slider">
                    <script src="../js/jssor.slider-22.2.6.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jssor_1_slider_init = function() {

            var jssor_1_options = {
              $AutoPlay: true,
              $SlideDuration: 1600,
              $SlideEasing: $Jease$.$OutQuint,
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            /*responsive code begin*/
            /*you can remove responsive code if you don't want the slider scales while window resizing*/
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 1920);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            /*responsive code end*/
        };
    </script>
    <style>
        /* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */
        .jssorb05 {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: absolute;
            /* size of bullet elment */
            width: 8px;
            height: 8px;
            background: url('slider_img/b05.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb05 div { background-position: -7px -7px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
        .jssorb05 .av { background-position: -67px -7px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

        /* jssor slider arrow navigator skin 22 css */
        /*
        .jssora22l                  (normal)
        .jssora22r                  (normal)
        .jssora22l:hover            (normal mouseover)
        .jssora22r:hover            (normal mouseover)
        .jssora22l.jssora22ldn      (mousedown)
        .jssora22r.jssora22rdn      (mousedown)
        .jssora22l.jssora22lds      (disabled)
        .jssora22r.jssora22rds      (disabled)
        */
        .jssora22l, .jssora22r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 58px;
            cursor: pointer;
            background: url('slider_img/a22.png') center center no-repeat;
            overflow: hidden;
        }
        .jssora22l { background-position: -10px -31px; }
        .jssora22r { background-position: -70px -31px; }
        .jssora22l:hover { background-position: -130px -31px; }
        .jssora22r:hover { background-position: -190px -31px; }
        .jssora22l.jssora22ldn { background-position: -250px -31px; }
        .jssora22r.jssora22rdn { background-position: -310px -31px; }
        .jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
        .jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }
    </style>
    <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:300px;overflow:hidden;visibility:hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" style="position:absolute;top:0px;left:0px;background-color:rgba(0,0,0,0.7);">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
            <div style="position:absolute;display:block;background:url('../img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
        </div>
        <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:500px;overflow:hidden;">
            <div>
                <img data-u="image" src="../slider_img/turntable-1109588_1920.jpg" />
                <div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;font-weight:400;color:#ffffff;line-height:60px;font-family: 'RalewayFont';"href="../sub/muzyka.html">Tworzę muzykę</div>

            </div>

              <div>
                <img data-u="image" src="../slider_img/07044434_panorama-1.jpg" />
                <div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;font-weight:400;color:#ffffff;line-height:60px;font-family: 'RalewayFont';"href="../sub/zdjecia.html">Robię zdjęcia</div>

            </div>
            <div>
                <img data-u="image" src="../slider_img/camera-1334278_1920.jpg" href="sub/filmy.html" />
                <div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;font-weight:400;color:#ffffff;line-height:60px;font-family: 'RalewayFont';"href="../sub/filmy.html">Montuję filmy</div>

            </div>
           </div>
            <a data-u="any" href="http://www.jssor.com" style="display:none">Full Width Slider</a>

        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
            <!-- bullet navigator item prototype -->
            <div data-u="prototype" style="width:16px;height:16px;"></div>
        </div>
        <!-- Arrow Navigator -->
        <span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
        <span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
    </div>
    <script type="text/javascript">jssor_1_slider_init();</script>
                </div>   
        <!--MIDDLE--><!--MIDDLE--><!--MIDDLE--><!--MIDDLE-->
        <div id="mid" class="mid">
                <div id="content" class="content">
                <div id="content_text">
            <p class="main_text">Strona poświęcona osobie <em class="em"> AJ</em>. </p> <!-- klasa EM, main text-->
            <hr>
            <p class="text">There is some text here</p>

        </div>

        </div>

        </div>
        <div id="feed" class="feed">
                <p class="feed_t" id="feed_t">Mój Twitter</p>
                <a class="twitter-timeline" width="300" height="500" dnt="true" theme="light" link-color="#2E16B1" href="https://twitter.com/AJWRSW">Tweets by AJWRSW</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
            </div>    

            <div id="bottom" class="bottom">
                <footer class="bottom_footer" id="bottom_footer">
                    <ul class="bottom_list">
                        <p class="bottom_list_item">Follow me on</p>
                        <li><a class="bottom_list_item">Twitter</a></li>
                        <li><a class="bottom_list_item">FB</a></li>
                        <li><a class="bottom_list_item">VSCO</a></li>                   

                    </ul>
                    <p class="copyright">
                        Copyright 2017. Aleksander Jess
                    </p>
                </footer>   
            </div>

    </body>
</html>

我的 CSS

@font-face
{
    font-family: 'MontserratFont';
    src: local('☺'),
        src: url('../fonts/Montserrat-Regular.ttf') format('truetype'),
        src: url('fonts/Montserrat-Regular.otf') format('opentype'),
        src: url('/fonts/Montserrat-Regular.woff') format('woff'),
        src: url('/fonts/Montserrat-Regular.eot') format('embedded-opentype');
        src: url('/fonts/Montserrat-Regular.eot') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'RalewayFont';
    src: local('☺'),
        src: url('../fonts/Raleway-Regular.ttf') format('truetype'),
        src: url('fonts/Raleway-Regular.otf') format('opentype'),
        src: url('/fonts/Raleway-Regular.eot') format('embedded-opentype'),
        src: url('fonts/Raleway-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body
{
    font-family: Helvetica, Arial;
    padding:0;
    margin:0;
}

div.top
{
    float:left;
    width:100%;


}
div.menu_box
{
    display: none;  
}   
div.slider
{
    padding-top: 20px;
    padding-bottom: 20px;
}
div.banner
{
    width:100%;
    background:#000000;
    height:200px;

}

img.logo
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;

    line-height: 70%;
    height: 70%;
}   
audio
{
    position: absolute;
    right: 0px;
    volume:0.1; 
    top: 215px;
}   
ul.topnav
{
        font-family: 'Montserrat';
        font-weight: 200;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #000000;
}
ul.topnav li
{
    float:left
}
ul.topnav_down
{
    list-style-type: none;
}
ul.topnav li a 
{
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 15px;
}
ul.topnav li a:hover 
    {
        background-color: #000;
    }
ul.topnav li.icon 
    {
        display: none;
    }

ul.topnav_down 
{
    position: relative;
    display: inline-block;
}

.topnav_down-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.topnav_down:hover .dropdown-content 
{
    display: block;
}
div.mid
{

    width: 70%;


}
p.main_text 
{
    font-family: 'MontserratFont';
    color: #2E16B1;
    font-weight: 400;
    font-size: larger;
    font-variant: small-caps;
}

p.text
{
    font-family: 'RalewayFont';
    text-align:justify; 
    float:right;
    padding-bottom:20px;
    font-weight: 100;
}   



div.content
{
    float:right;
    margin: 0 10px 0 10px;
    padding-right: 5px;

}

div.feed
{
    position:absolute;
    right:100%;
}
p.feed_t
{
    width:30%;
    font-family:'MontserratFont';

}
a.twitter-timeline
{
    position:absolute;
    right:10px;
}

div
{
    width:100%;
}
footer
{
    position:absolute;
    bottom:0px;
    color:white;
    background-color:black;
    font-family: 'RalewayFont';
    width:100%;
}


@media all and (max-width: 767px)
{

    div.all
    {
        float: left;
        width: 100%;
        min-height: 350px;
        background: #ffffff;
    }

    img.logo
    {
        width:auto;
    }
    div.slider
    {
        display: none;
    }

    h1
    {
        display: none;  
    }


    div.mid
    {
        width:100%;
        padding-left: 5px;
        padding-right: 5px;
    }

    div.feed
    {
        display: none;
    }
}

底部的 div 似乎过着自己的生活。它似乎没有响应

行的任何 css 代码 
position:absolute;
bottom:0px;

我应该在底部看到它。除了我没有。

It looks like this

你们有什么想法吗？

编辑

我设法修复了布局位。不幸的是，mid 决定只“合并”p.main_text 位。它“忘记”了 p.text 部分。所以当我在 div.mid 后面添加阴影时，阴影最终只在 p.main_text 下面。有什么提示吗？

最佳答案

代码中的问题是您只设置了子项的样式 footer忘记 child 没有 parent 什么也做不了。给予它许可。

如果要版权区footer在底部，给你给 child 的样式到 parent 

.bottom
{
    position:absolute;
    bottom:0px;
    color:white;
    background-color:black;  
    font-family: 'RalewayFont';
    width:100%;
}

希望你明白这是如何工作的

关于html - CSS冲突，网站没有意义。属性不适用于某些 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42238491/

28 4 0
文章推荐： html - 在不破坏布局的情况下，无法让我的页眉与页面顶部齐平
文章推荐： html - 无法将 Li 置于 Ul 的中心
文章推荐： javascript - 拆分字符串并分配给字段
文章推荐： javascript - 如何在 JavaScript for Canvas 中启用加速硬件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com