html - 为什么我的网站布局分崩离析？

转载作者：行者123 更新时间：2023-11-28 04:11:50

所以我在 udemy 上了一门关于用 CSS3 和 HTML5 编写 PSD 页面模型的类(class)。一切顺利，然后当我开始布置侧边栏时，我的布局崩溃了，多个对象出现错位。没有一个 div 位于正确的位置，内容散布在整个页面上，颜色显示不正确。总的来说，它似乎坏了，我无法将其恢复到需要的位置。

演示 JSFiddle:http://jsfiddle.net/4fT7R/

HTML:

<head>

    <title>Gyeahhhh and shit...</title>
    
    <link href="styles/normalize.css" rel="stylesheet" type="text/css" media="screen">
    <link href="styles/style.css" rel="stylesheet" type="text/css" media="screen">
    
</head>

<body>

    <header>
    
        <div class="container clearfix">
        
            <a id="logo" href="/" title="Return to Home">
                <img src="images/logo.gif" alt="Logo"> 
            </a>
        
            <nav>
        
                <ul>
                    <li><a href="">About</a></li>
                    <li><a href="">Services</a></li>
                    <li class="last-link"> <a href="">Contact</a></li>
                </ul>
            
            </nav><!-- end nav -->
            
        </div><!-- end container -->
                
    
        <div id="hero">
        
            <div class="container clearfix">
            
                <div id="hero-title">
                
                    <h1>Really big title 2.0</h1>
                    <h2>Simple, yet engaging and descriptive subtitle</h2>
                
                    <div id="call-to-action">
                        <a href="" class="btn btn-large">Primary call to action</a>
                        <a href="" class="btn btn-secondary">Secondary action</a>
                    </div><!-- end call-to-action -->
                    
                </div><!-- end hero-title -->
                
                <img src="images/computer.png" alt="large desktop computer" id="hero-image">
            
            </div><!-- end container -->                    
                
                
        </div><!-- end hero -->       
    
    
    </header>

    
    <div id="content" class="container clearfix">
    
        
        <section id="column-content">
        
            <div id="lead-in">
    
                <h3>PSD to HTML5 &amp; CSS3</h3>
                <p class="lead">Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue.
                Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
                
            </div><!-- end lead-in -->  
            
            <div class="column four">
            
                <img src="images/puppy.jpg" alt="puppy">
                <h4>A Cute Puppy</h4>
                <p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

            </div><!-- end column -->
            
            <div class="column four">
            
                <img src="images/crazy_dog.jpg" alt="puppy">
                <h4>Crazy Dog</h4>
                <p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

            </div><!-- end column -->
            
            <div class="column four last">
            
                <img src="images/husky.jpg" alt="A beautiful husky staring off into the distance">
                <h4>A Beautiful Husky</h4>
                <p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

            </div><!-- end column -->
            
            
            
        </section><!-- end column content -->
    
                
        <aside>
            
            <div class="widget">
            
                <h4>Latest News</h4>
                <h5>Dec 02 2013 </h5>
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            
            </div><!-- end widget -->
    
            <div class="widget second-widget">
            
                <h4>Follow Us</h4>
                    
                <div id="social-links"> 
                    <a href="http://www.twitter.com" target="_blank"> <img src="images/social_twitter.gif" alt="Follow us on Twitter"></a>
                    <a href="http://www.facebook.com" target="_blank"> <img src="images/social_facebook.gif" alt="Follow us on Facebook"></a>
                    <a href="http://www.youtube.com" target="_blank"> <img src="images/social_youtube.gif" alt="Follow us on YouTube"></a>
                </div>
                                
            </div><!-- end widget -->
    
        </aside><!--end aside -->
                    
    
    </div><!-- end CONTENT -->
    
    <div id="secondary-cta" class="container clearfix">
    
        <h4>Keep up to date with the latest news from our company</h4>
        
        <form>
            <input type="email" placeholder="Enter your email here">
            <input type="submit" class="btn btn-small" value="Sign up">
        </form>
    
    </div><!-- end secondary-cta -->
    
    
    
    <footer>
    
        <div id="footer" class="container clearfix">
        
            <p id="copyright">Copyright &copy; 2014 Gyeeahhh Enterprises</p>
        
            <nav>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Services</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </nav><!-- end footer nav -->
            
        </div><!-- end footer -->
        
    </footer>
    
    
    

</body>

CSS:

/*  -----------------------------------------------------------------------------------------------
    General Styles
    ----------------------------------------------------------------------------------------------- */
    
    html {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizelegibility;
    }
    
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 20 px;
        color: #444444;
    }
    
/*  -----------------------------------------------------------------------------------------------
    Typography
    ----------------------------------------------------------------------------------------------- */
    
    h1, h2, h3 {
        font-weight: 300;
        margin: 0;
        line-height; 45px;
    }
    
    h4, h5, h6 {
        font-weight: bold;
        margin: 5px 0 5px 0 /* top-right-bottom-left */
    }
    
    h1 {
        font-size: 48px;
    }
    
    h2 {
        font-size: 24px;
    }
    
    h3 {
        font-size: 30px;
    }
    
    h4 {
        font-size: 18px;
        margin: 10px 0 /* if top/bottom and right/left are the same, then top/bottom - left/right */
    }

    h5 {
        font-size: 13px;
        margin: 0;
        text-transform: uppercase;
    }   
    
    p {
        margin: 0 0 10px 0; /* top-right-bottom-left */
    }
    
    p.lead {
        font-size: 18px;
        font-weight: 300;
        line-height: 24px;
    }
    
/*  -----------------------------------------------------------------------------------------------
    Layout
    ----------------------------------------------------------------------------------------------- */
    
    .container {
        width: 940px;
        padding: 0 10px; /* actual width=960px */
        margin: 0 auto; /* sets containers to center content despite screen size */
        
    }
    
    header {
        background: #000; /* if a color code is six of the same number, you can use shorthand and only put the first 3 - i.e. #000 = #000000 */
    }
    
    #logo {
        display: block; /* there are two main types of elements...block and inline. block level elements
                        span the entire width of its container. inline elements are the width of the
                        element itself. images are block level, links are inline. */
        padding: 17px 0; /* you can select a specific margin i.e. top or left */
        float: left;
    }
    
    #hero {
        background: #00c0ff;
        color: #000;
    }
    
    #hero-title {
        width: 520px;
        padding: 60px 0;
        float: left;
    }
    
    #call-to-action {
        margin: 40px 0;
    }
    
    #hero-image {
        float: right;
        margin: 10px 0 -30px 0;
    }
    
    
    #lead-in {
        margin-bottom: 30px;
    }
    
    #content {
        padding: 100px 0;
    }
    
    #column-content {
        width: 700px;
        float: left;
    }
    
    
    /*  -----------------------------------------------------------------------------------------------
    Sidebar
    -----------------------------------------------------------------------------------------------*/ 
    
    aside {
        background: #444;
        width: 160px; /* 220px with 60px of left and right padding */
        color: #fff;
        float: left;
        margin-left: 20px;
        padding: 30px;
        font-size: 12px;
        line-height: 18px;  
    }
    
    aside .widget {
        margin: 10px 0;
    }
    
    aside .second-widget {
        margin-top: 40px;
    }
    
    #social-links {
        margin-top: 10px;
    }
    
    
    
    
/*  -----------------------------------------------------------------------------------------------
    Navigation
    ----------------------------------------------------------------------------------------------- */
    
    /* nav ul is an example of selecting a parent and its child...refer to HTML */
    
    nav ul {
        margin: 0;
        padding: 0;
        float: right;
    }
    
    nav ul li {
        list-style: none;
        float: left; /* css-tricks.com/all-about-floats for more */
    }

    header nav ul li a {
        display: block;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        padding: 20px;
        border-left: solid 1px #333;
    }
    
    header nav ul li a:hover {
        background: #222;
    }
    
    header nav ul li a:active {
        -webkit-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Safari/Chrome */
            -moz-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Firefox */
                -box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* fallback */           
    }

    .last-link {
        border-right: solid 1px #333;
    }
    
    aside .widget h4 {
        font-weight: 200;
        font-size: 20px;
        margin: 0 0 10px; /* top --> right and left --> bottom */
    }
    
    aside .socials a {
        position: relative;
    
    aside .socials a:hover {
        position: relative;
        top: -1px;
    }
/*  -----------------------------------------------------------------------------------------------
    Buttons
-------------------------------------------------------------------------------------------------*/ 
    .btn {
        width: auto;
        background: #0090bf;
        border: 1px solid #1e728c;
        color: #fff;
        cursor: pointer;
        display: inline-block; /* IE7 inline-block fix */
        zoom: 1;
        *display: inline;
        margin: 0;
        outline: none;
        padding: 10px 20px 11px;
        position: relative;
        text-align: center;
        text-decoration: none;
        
        /* button shadows */
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
                
        /* CSS3 transitions */      
        -webkit-transition: background-color 0.15s ease-in-out
            -moz-transition: background-color 0.15s ease-in-out
                -o-transition: background-color 0.15s ease-in-out
                    transition: background-color 0.15s ease-in-out
    }

    .btn:hover {
        color: #fff;
        background-color: #0086b2;
    }

    .btn:active {
        -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
            -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
                box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
        color: #fff;
    }

    .btn-large {
        padding: 20px 30px;
        font-size: 24px;
        font-weight: 200;       
    }
    
    .btn-secondary {
        font-size: 20px;
    }
    
    .btn-secondary:hover {
        text-decoration: underline;
    }
    
    .btn-secondary:active {
        position: relative;
        top: 1px;
    }
    
    .btn-secondary, .btn-secondary:hover, .btn-secondary:active {
        background: none;
        border: none;
        -webkit-box-shadow: none;
            -moz-box-shadow: none;
                box-shadow: none;
        
    }





/*  -----------------------------------------------------------------------------------------------
    Global Styles
--------------------------------------------------------------------------------------------------- */  
    
    
    .column {
        float: left;
        margin-right: 20px;
    }
    
    .four {
        width: 220px;
    }
    
    .last {
        margin-right: 0;
    }
    
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        zoom: 1; /* for IE6/7 (trigger hasLayout) */
    }

最佳答案

发生了什么

您提到事情突然分崩离析。任何一个有效的 CSS 规则只会影响某些事情，因此当由于一次更改而出现多个问题时，我倾向于首先查找拼写错误:缺少括号和缺少分号。

那些是你的罪魁祸首。主要问题是您缺少一个右括号，这导致大部分 CSS 无法应用。还缺少一些分号，导致某些小效果无法在某些浏览器上应用。

代码

Updated Fiddle

当前:

aside .socials a {
    position: relative;

aside .socials a:hover {
    position: relative;
    top: -1px;
}

正确:(缺少右括号)

aside .socials a {
    position: relative;
}

aside .socials a:hover {
    position: relative;
    top: -1px;
}

当前:

header nav ul li a:active {
    -webkit-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Safari/Chrome */
        -moz-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Firefox */
            -box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* fallback */
}

正确:(`box-shadow` 没有`-`)

header nav ul li a:active {
    -webkit-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Safari/Chrome */
        -moz-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Firefox */
            box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* fallback */
}

当前:

-webkit-transition: background-color 0.15s ease-in-out
    -moz-transition: background-color 0.15s ease-in-out
        -o-transition: background-color 0.15s ease-in-out
            transition: background-color 0.15s ease-in-out

正确:

-webkit-transition: background-color 0.15s ease-in-out;
    -moz-transition: background-color 0.15s ease-in-out;
        -o-transition: background-color 0.15s ease-in-out;
            transition: background-color 0.15s ease-in-out;

总结

任何时候一切都会一下子变得困惑，要怀疑拼写错误……尤其是缺少括号。

关于html - 为什么我的网站布局分崩离析？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22691553/

文章推荐： html - iOS Safari 上 Pinterest 的自定义 URL 方案以打开板 URL？

文章推荐： c++ - 如何将函数写入管道/套接字对？

文章推荐： PHP & MySQL - 如何在下拉菜单中显示选定的值

HTML 列表与 chrome 分崩离析
以下代码在 firefox 上运行良好，但在 chrome 上运行不佳: http://jsfiddle.net/4tYfY/4/ 1 2 3 4 .

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 为什么我的网站布局分崩离析？

HTML:

CSS:

发生了什么

代码

当前:

正确:(缺少右括号)

当前:

正确:(`box-shadow` 没有`-`)

当前:

正确:

总结

首页

博学

6Ren·AI

商城

html - 为什么我的网站布局分崩离析？

HTML:

CSS:

发生了什么

代码

当前:

正确:(缺少右括号)

当前:

正确:(box-shadow 没有-)

当前:

正确:

总结

正确:(`box-shadow` 没有`-`)