Question

所以我正在建立一个网站，我正在构建并正在整合样式表。我目前遇到的问题是页面的一个div部分没有连接到样式表。页面的其余部分很好，但它只是这一部分，我不知道为什么。我从第一稿中复制并粘贴它（html和样式），并使用相同的字体和bootstrap cdn（bootstrap fonts 4.1和bootstrap cdn 3.3.7）但是得到了不同的结果。非常感谢您提供的任何帮助。

这里是html

<div class="main">
                    <div class="container">
                    <header>
                        <center><h2>My Work</h2></center>
                    </header>
                    <div class="box">
                        <span class="image featured"><img src="laptopstock.jpg" alt="" /></span>
                        <h3><a href="sampleofficial.html">Arris SURFboard SBG6700-AC Wireless Gateway Manual</a></h3>      
                            <p>The Arris SURFboard SBG6700-AC wireless gateway is the premier modem on the market today. It's top of the line security, simple user interface and blazing fast speeds make it the number one consumer choice for modems. With this guide you can set up your home wireless network in 30 minutes.</p>
                            <br>
                            <p><a href="sampleofficial.html" class="button-alt">Learn More</a></p> 
                        </div>
                    </div>
                </div>

这里是css

        main {
            padding: 8em 0;
        }

            main.header {
                text-align: center;
                margin: 0em 0 3em 0;
                padding-top: 1000em;
            }
    /* difference between padding and margin? 
    padding is on the inside. 
    margin on the outside.*/
    /* this is the gray space between the header and the image */

                main.header h2 {
                    font-size: 2.75em;
                    margin: 0;
                    letter-spacing: .005em;
                    color: #000;
                }

        body.landing main {
            margin-top: -14em;
        }
    .container {
      margin-right: auto;
      margin-left: auto;
      padding-right: 15px;
      padding-left: 15px;
      width: 100%;
    }
.box {
                margin: 1em;
                overflow-x: hidden;
                padding: 2em 2em !important;
            }

                .box.features .features-row {
                    border-top: 0;
                    padding: 0;
                }

                    .box.features .features-row section {
                        border: 0;
                        border-top: solid 1px #e5e5e5 !important;
                        float: none;
                        margin: 2em 0 0 0 !important;
                        padding: 2em 0 0 0 !important;
                        width: 100%;
                    }

                    .box.features .features-row:first-child section:first-child {
                        border-top: 0 !important;
                        margin-top: 0 !important;
                        padding-top: 0 !important;
                    }

                .box .image.featured {
                    margin-left: -2em;
                    width: calc(100% + 4em);
                }

                    .box .image.featured:first-child {
                        margin-bottom: 2em;
                        margin-top: -2em;
                    }

                    .box .image.featured:last-child {
                        margin-bottom: -2em;
                        margin-top: 2em;
                    }

Answer 1

您的元素选择器错误。从您的HTML，＆＃39; main＆＃39;是一个班级，标题是＆＃39;是一个元素。要在css中引用课程，请使用＆＃39;。＆＃39;在.main中，要引用元素，请直接使用标记名称。编写main.header意味着元素＆＃39; main＆＃39;有课程的标题＆＃39;这不是你想要的。改为使用Css;

.main {
        padding: 8em 0;
    }

        .main header {
            text-align: center;
            margin: 0em 0 3em 0;
            padding-top: 1000em;
        }
/* difference between padding and margin? 
padding is on the inside. 
margin on the outside.*/
/* this is the gray space between the header and the image */

            .main header h2 {
                font-size: 2.75em;
                margin: 0;
                letter-spacing: .005em;
                color: #000;
            }

那应该有用。让我知道它是怎么回事。

Answer 2

您的html标头中不推荐使用

中心标记。在css中替换为text-align。一个例子是：h2 {text-align：center; }

CSS不会出现在页面的特定部分

2 个答案: