0

我错误地使用了这行代码

   <style type="text/css">

进入我的 Top_menu.css 文件(由复制和过去引起)并忘记将其删除。现在当我想删除我所有的代码时会崩溃!!!这是我的 Top_menu.css 文件:

        <style type="text/css">
        #centeredmenu {
           float:left;
           width:700px;
           background:#fff;

           overflow:hidden;
           position:relative;

        }
        #centeredmenu ul {
           clear:left; 
           float:left;
           list-style:none;
           margin:0;
           padding:0;
        margin-left:330px;
        margin-top:72px;
           text-align:center;
        }
        #centeredmenu ul li {
           display:block;
           float:left;
           list-style:none;
           margin:0 10px 0 10px;

           padding:0;
           position:relative;

        }
        #centeredmenu ul li a {
           display:block;
           margin:0 0 0 1px;
           padding:20px 10px;

           color:#000;
           text-decoration:none;
           line-height:1.3em;
           border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        }
        #centeredmenu ul li a:hover {
           background:#369;
           background:#212121;
           color:#fff;
           padding-top:15px;
        }
        #centeredmenu ul li a.active,
        #centeredmenu ul li a.active:hover {
           color:#fff;
           background:#212121;
           font-weight:bold;
           padding-top:15px;

        }
        #spread
        {
            position:relative;
            top:128px;

            width:955px;
            height:340px;
            background-color:#212121;
        }

这是我的 style.css 文件:

    @charset "utf-8";
    /* CSS Document */
    @import 'reset.css';
    body
    {background:#e8e8e8   url(../images/Back.png) top repeat-x;

    }
    #outer
    {
        width:955px;
        height:1200px;
        margin:0 auto;


    }
    #header
    {
            background:url(../images/header.png) top  no-repeat;
            height:143px;

    }
    #logo h1
    {
        text-indent:-9999px;


    }
    #main_content
    {   
        margin-top:128px;
        height:400px;
        background-color:#ffffff;

    }
        #left_side {width:550px; height:auto; float:left; }
        #left_side h2
        {

            font-size:30px;
            color:#2d5a65;
            padding-top:30px;
            padding-left:30px;

        }
        #left_side span
        {

            font-size:12px;
            font-style:italic;
            color:#bbbaba;
            padding-left:30px;
        }
        #left_side h4
        {

            font-size:12px;
            font-weight:bold;
            color:#6f6f6f;  
            padding-top:30px;
            padding-left:30px;
        }
        #left_side div
        {
                font-size:12px;

            color:#6f6f6f;  
            padding-top:30px;
            padding-left:30px;
            line-height:20px;
        }
        #left_side a
        {
            font-size:12px;

            color:#6f6f6f;  
            padding-top:40px;
            padding-left:30px;
            text-decoration:none;
        }   
        #right_side
        {
            background-color:#f6f6f6;
            width:295px;
            height:300px;
            border:15px solid #e7e7e7;
            float:right;

            margin-top:30px;
            margin-right:40px;

        }
        #inside_right{ height:250px; margin:20px 10px 20px 10px; }
        #inside_right span
        {
            font-size:18px; color:#7c7c7c; 
        }
        #inside_right hr{width:200px; color:#dadada; margin-top:20px;}
        #inside_right img{padding-top:30px; padding-right:10px; float:left;}
        #inside_right div{width:250px; padding-top:25px; line-height:22px; height:150px; font-size:12px;}
        #inside_right a{font-size:12px; font-weight:bold; text-decoration:none; color:#6d6d6d; float:right; padding-right:10px;}

    /*Above footer*/
    #above_footer{height:300px; border-top:10px #5a5a5a solid; border-bottom:10px #666666 solid; background-color:#656565;}
        #f_left{width:230px; height:250px; margin-left:20px; margin-top:20px; float:left;}
        #f_center{width:230px; height:250px;margin-left:100px; margin-top:20px; float:left; ;}
        #f_right{width:230px; height:250px; margin-right:20px; margin-top:20px;  float:right; }
        .header_footer{font-size:20px; color:#ffffff; font-style:italic; margin-bottom:15px;}
        .bold_footer{font-size:11px; color:#ffffff; font-weight:bold; padding-top:10px; clear:left;}
        .reg_footer{font-size:11px; color:#FFF; line-height:15px; padding-top:5px; clear:left;  }
        .footer_line{width:200px; float:left; }
    #below_footer{background-color:#1a1a1a; height:50px;}
        .footer_color{color:#989898; font-size:11px;}
        #copy{  padding:20px; float:left;}
        /*footer menu*/
        #below_footer ul{float:right; padding:20px;}
        #below_footer ul li{float:left; }
        #below_footer ul li a{ text-decoration:none; color:#989898; padding-left:2px; padding-right:2px;}

这是我的html文件:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            <link rel="stylesheet" href="css/Top_menu.css" />
            <link rel="stylesheet"  href="css/style.css" />
        </head>

        <body>
        <div id="outer">
            <div id="header">
                <div id="logo">
                    <h1>cleanfolio</h1>
                </div><!--End Logo-->
                <div id="centeredmenu">
                    <ul>
                    <li><a href="#" class="active"  >Home</a></li>
                    <li><a href="#" >portfolio</a></li>
                    <li><a href="#" >blog</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Contact Us</a></li>
                  </ul>
                </div>  <!-- end Center menu-->
                 <div id="spread">
                  </div> <!-- End Spread -->




                <div id="content">
                    <div id="main_content">
                        <div id="left_side">
                            <h2>Welcome to our company</h2>
                            <span>Lorem Ipsum is simply dummy text of the printing and typesetting</span>
                            <h4>
                            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</h4> 
                           <div>
            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus 
            PageMaker including versions of Lorem Ipsum.<br/><br/>

            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 

                            </div><!--end div-->
                            <a href="#">Read More>></a>
                         </div><!--End Left_side-->

                        <div id="right_side">
                            <div id="inside_right">
                                <span>Testimonials:</span>
                                <hr />
                                <img src="images/unknown.png" alt="unknown"/>
                                <div>It is a long established fact that a        
                           reader will be distracted by the readable content of a page when looking at its layout. Content here, content here', making it look like readable English."</div><!--End Div-->
                                 <a href="#">-John Smith, webdesigner</a>
                            </div><!--End Inside right-->
                        </div><!--End right_side -->
                    </div> <!--end main_content-->
                </div><!--End Content-->
            </div><!--End Header-->
            <div id="above_footer">
                <div id="f_left">
                    <div class="header_footer">Events &lt; Updates</div>
                    <hr class="footer_line" />
                    <div class="bold_footer">
                      Posted on 20 May 09
                    </div><!--end div class bold footer-->
                    <div class="reg_footer">Listuem Names ligula a blandit ornare ligula a quis bibendum elit anten ecm etus blandit
                    </div><!--End Div with class reg_footer-->
                     <hr class="footer_line" />
                     <div class="bold_footer">
                      Posted on 24 May 09
                     </div><!--end div with bold footer class-->
                     <div class="reg_footer">
                     Nulla elit porttitor tellus quis bibendum elit ante nec metus.
                    </div><!--end reg footer class-->
                    <hr class="footer_line" />
                </div><!--End Footer left-->
                <div id="f_center">
                        <div class="header_footer">What We Do</div><!--End header footer-->
                        <hr class="footer_line" />

                        <div class="bold_footer">
                                It has survived not only five centuries, but also 
                        the leap into electronic typesetting, remaining essentially unchanged. 
                        </div><!--End bold footered class-->
                        <br />
                        <div class="reg_footer">
                        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
                        and more recently with desktop publishing software 
                        like Aldus PageMaker including versions of Lorem 
                        Ipsum.
                        </div><!--End reg footer-->
                </div><!--End Footer center-->
                <div id="f_right">
                    <div class="header_footer">Get in touch!</div><!--End header_footer class-->
                     <hr class="footer_line" />
                     <div class="reg_footer">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                 </div><!--End reg_footer-->
                    <hr class="footer_line" />
                    <div class="bold_footer">+123456789</div><!--End bold one-->
                    <div class="bold_footer">+123456789</div><!--End bold one-->
                    <div class="bold_footer">company@domainname.com</div><!--End bold one-->
                </div><!--End Footer right-->
            </div><!--End Above footer-->
            <div id="below_footer">
                <div id="copy" class="footer_color">© Copyright 2009. Your Site Name Dot Com.</div><!--End copy -->
                <ul class="footer_color">
                    <li>All Rights Reserved      </li>
                    <li><a href="#">Home</a><samp>|</samp></li>
                    <li><a href="#">Contact</a><samp>|</samp></li>
                    <li><a href="#">RSS</a></li>
                </ul>
            </div><!--End Below footer-->
        </div> <!--End outer-->
        </body>
        </html>
4

1 回答 1

1

该行不应该在 css 文件中。<link rel="stylesheet" type="text/css" href="Top_menu.css" />你应该在你的主 html 文件中包含你的 css 文件<head></head>.

于 2012-08-23T13:57:05.390 回答