如何让这个css自动适合屏幕

时间：2017-04-28 03:07:58

标签： html css

我下载了一个模板用于我的主页，但它并没有像我预期的那样提供良好的显示效果。该页面跨越屏幕区域到屏幕截图中给出的右侧部分。我搜索了一些解决方案，但没有工作，例如，

<meta name=”viewport” content=”width=device-width, initial-scale=1″ /><!--Added2017-4-28-->
<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–><!--Added2017-4-28-->

<!-- begin snippet: js hide: false co nsole：true babel：false - ＆gt; 

/*
Template Name: Education Board
File: Layout CSS
Author: OS Templates
Author URI: http://www.cssmoban.com/
Licence: <a href="#">Website Template Licence</a>
*/

@import url(navi.css);
@import url(forms.css);
@import url(tables.css);
@import url(homepage.css);
@import url(gallery.css);
@import url(portfolio.css);
@import url(featured_slide.css);

body{
    font: normal 100% Helvetica, Arial, sans-serif;
}

<!--width:auto;-->

body{
    margin:0;
    padding:0;
    font-size:1em;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#979797;
    background-color:#333333;
    }

.main {float: right;width: auto;}
.leftBar {float: left;width: auto%;}

img{margin:0; padding:0; border:none;}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart{list-style-type:none; margin:0; padding:0;}

.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:inline-block;}
html[xmlns] .clear{display:block;}
* html .clear{height:1%;}

a{outline:none; text-decoration:none;}

.fl_left{float:left;}
.fl_right{float:right;}

.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D8D8D8; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}

/* ----------------------------------------------Wrapper-------------------------------------*/

div.wrapper{
    display:block;
    width:100%;
    text-align:left;
    }

div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
    margin:0 0 15px 0;
    padding:0;
    font-size:16px;
    font-weight:normal;
    font-style:italic;
    line-height:normal;
    color:#333333;
    background-color:transparent;
    }

.row1, .row2{color:#979797; background-color:#E1D6CB;}
.row3{color:#979797; background-color:#FFFFFF; border-top:1px solid #510000; border-bottom:5px solid #E1D6CB;}
.row3 a{color:#896C50; background-color:#FFFFFF;}
.row4{padding:30px 0;}

/* ----------------------------------------------Generalise-------------------------------------*/

#header, #container, #footer, #copyright{
    position:relative;
    margin:0 auto 0;
    display:block;
    width:960px;
    }

/* ----------------------------------------------Header-------------------------------------*/

#header{padding:25px 0 30px 0;}

#header h1, #header p, #header ul{
    margin:0;
    padding:0;
    list-style:none;
    line-height:normal;
    }

#header h1{font-size:26px; font-variant:small-caps; font-style:normal;}
#header h1 a{color:#333333; background-color:#E1D6CB;}

#header p{font-size:12px;}
#header p a{color:#510000; background-color:#E1D6CB;}

#header .fl_left, #header .fl_right{margin-bottom:15px;}
#header .fl_right{margin-top:13px;}

#header .fl_right p{float:left; margin:5px 50px 0 0;}

/* ----------------------------------------------Content-------------------------------------*/

#container{padding:30px 0; line-height:1.6em;}

#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{
    background-color:#FFFFFF;
    margin:0 0 15px 0;
    padding:0 0 10px 0;
    border-bottom:1px solid #D8D8D8;
    }

#container .readmore{
    display:block;
    width:100%;
    text-align:right;
    line-height:normal;
    }

#content{
    display:block;
    float:left;
    width:630px;
    }

/* ------Comments-----*/

#comments{margin-bottom:40px;}

#comments .commentlist{margin:0; padding:0;}

#comments .commentlist ul{margin:0; padding:0; list-style:none;}

#comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}

#comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
#comments .commentlist li.comment_odd a{color:#896C50; background-color:#F7F7F7;}

#comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
#comments .commentlist li.comment_even a{color:#896C50; background-color:#E8E8E8;}

#comments .commentlist .author .name{font-weight:bold;}
#comments .commentlist .submitdate{font-size:smaller;}

#comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight:normal; text-transform:none;}

#comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}

/* ----------------------------------------------Column-------------------------------------*/

#column{
    display:block;
    float:right;
    width:300px;
    }

#column .holder, #column #featured{
    display:block;
    width:300px;
    margin-bottom:30px;
    }

#column .holder h2.title{
    display:block;
    width:100%;
    height:65px;
    margin:0;
    padding:15px 0 0 0;
    font-size:20px;
    text-transform:none;
    line-height:normal;
    border-bottom:1px dotted #999999;
    }

#column .holder h2.title img{
    float:left;
    margin:-15px 8px 0 0;
    padding:5px;
    border:1px solid #999999;
    }

#column div.imgholder{
    display:block;
    width:290px;
    margin:0 0 10px 0;
    }

#column .holder p.readmore{
    display:block;
    width:100%;
    font-weight:bold;
    text-align:right;
    line-height:normal;
    }

/* Featured Block */

#column #featured ul, #column #featured h2, #column #featured p{
    margin:0;
    padding:0;
    list-style:none;
    color:#666666;
    background-color:#F7F7F7;
    }

#column #featured a{
    color:#896C50;
    background-color:#F7F7F7;
    }

#column #featured li{
    display:block;
    width:250px;
    margin:0;
    padding:20px 25px;
    color:#666666;
    background-color:#F7F7F7;
    }

#column #featured li p.imgholder{
    display:block;
    width:240px;
    height:90px;
    margin:20px 0 15px 0;
    }

#column #featured li h2{
    margin:0;
    padding:0 0 8px 0;
    font-weight:normal;
    font-family:Georgia, "Times New Roman", Times, serif;
    line-height:normal;
    border-bottom:1px dotted #999999;
    }

#container #column .readmore a{
    display:block;
    width:100%;
    margin-top:15px;
    height:auto;
    padding-left:0;
    font-weight:bold;
    text-align:right;
    line-height:normal;
    background:none;
    }

#column .latestnews{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    }

#column .latestnews li{
    display:block;
    width:100%;
    height:99px;
    margin:0 0 11px 0;
    padding:0 0 21px 0;
    border-bottom:1px dotted #C7C5C8;
    overflow:hidden;
    }

#column .latestnews li.last, #column .last{
    margin-bottom:0;
    }

#column .latestnews p{
    display:inline;
    }

#column .latestnews img{
    float:left;
    margin:0 10px 0 0;
    padding:4px;
    border:1px solid #C7C5C8;
    clear:left;
    }

/* ----------------------------------------------Footer-------------------------------------*/

#footer{line-height:1.6em; background:url("../images/footer_bg.gif") 550px 0 repeat-y;}

#footer a{
    color:#979797;
    background-color:#333333;
    }

#footer h2{
    color:#FFFFFF;
    background-color:#333333;
    font-weight:bold;
    font-style:normal;
    }

#footer ul{
    margin:0;
    padding:0;
    list-style:none;
    }

#footer address{
    font-style:normal;
    }

#footer .footbox{
    display:block;
    float:left;
    width:200px;
    margin-right:30px;
    }

#footer #social{
    margin-bottom:20px;
    }

#footer #social ul{
    margin:20px 0 0 0;
    }

#footer #social li{
    display:inline;
    margin-right:15px;
    }

#footer .last{margin:0;}

/* ----------------------------------------------Copyright-------------------------------------*/

#copyright{
    padding:15px 0;
    border-top:1px solid #979797;
    }

#copyright p{
    margin:0;
    padding:0;
    }

#copyright, #copyright a{
    color:#979797;
    background-color:#333333;
    }


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head profile="http://gmpg.org/xfn/11">
<title>NCUT Test</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″ /><!--Added2017-4-28-->
<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–><!--Added2017-4-28-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />

<!-- CSS Mode -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)"  
href="style/css/css600.css" />  

<link rel="stylesheet" type="text/css" href="styles/layout.css" />
<link rel="stylesheet" type="text/css" href="styles/navi.css" />
<link rel="stylesheet" type="text/css" href="styles/forms.css" />
<link rel="stylesheet" type="text/css" href="styles/tables.css" />
<link rel="stylesheet" type="text/css" href="styles/homepage.css" />
<link rel="stylesheet" type="text/css" href="styles/gallery.css" />
<link rel="stylesheet" type="text/css" href="styles/portfolio.css" />
<link rel="stylesheet" type="text/css" href="styles/featured_slide.css" />
  <!-- 400px screen -->

<link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" /> <!-- 400px 600px screen -->

<!--ink rel="stylesheet" href="styles/layout.css" type="text/css" /-->
<!-- End CSS Mode --><!--Added2017-4-28-->

<!-- Homepage Specific Elements -->
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.timers.1.2.js"></script>
<script type="text/javascript" src="scripts/jquery.galleryview.2.1.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.galleryview.setup.js"></script>
<!-- End Homepage Specific Elements -->
</head>
<body id="top">
<div class="wrapper row1">
  <div id="header" class="clear">
    <div class="fl_left">
      <h1><a href="index.html">NCUT Test</a></h1>
      <p>Free CSS Website Template</p>
    </div>
    <div class="fl_right">
      <p><a href="#">A - Z Index</a> | <a href="#">Student Login</a> | <a href="#">Staff Login</a></p>
      <form action="#" method="post" id="sitesearch">
        <fieldset>
          <legend>Site Search</legend>
          <input type="text" value="Search Our Website&hellip;" onfocus="this.value=(this.value=='Search Our Website&hellip;')? '' : this.value ;" />
          <input type="image" src="images/search.gif" id="search" alt="Search" />
        </fieldset>
      </form>
    </div>
    <div id="topnav">
      <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="style-demo.html">Test 1</a></li>
        <li><a href="full-width.html">Test 2</a></li>
        <li><a href="3-columns.html">Test 3</a></li>
        <li><a href="portfolio.html">Test 4</a></li>
        <li><a href="gallery.html">Test 5</a></li>
        <li><a href="#">This a very long link</a></li>
        <li class="last"><a href="#">This is the last</a></li>
      </ul>
    </div>
  </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper row2">
  <div id="hpage_featured" class="clear">
    <!-- ####################################################################################################### -->
    <div id="featured_slide">
      <ul>
        <li><img src="images/1.jpg" alt="" />
          <div class="panel-overlay">
            <h2>Nullamlacus dui ipsum</h2>
            <p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. <a href="#">Continue Reading &raquo;</a></p>
          </div>
        </li>
        <li><img src="images/2.jpg" alt="" /></li>
        <li><img src="images/3.jpg" alt="" />
          <div class="panel-overlay">
            <h2>Semvelit nonummy odio tempus</h2>
            <p>Justolacus eger at pede felit in dictum sempus elit curabitur ipsum. Ametpellentum. <a href="#">Continue Reading &raquo;</a></p>
          </div>
        </li>
        <li><img src="images/4.jpg" alt="" />
          <div class="panel-overlay">
            <h2>Pedefamet orci orci quisque</h2>
            <p>Nonnam aenenasce morbi liberos malesuada risus id donec volutpat estibulum curabitae. <a href="#">Continue Reading &raquo;</a></p>
          </div>
        </li>
      </ul>
    </div>
    <!-- ###### -->
    <div class="intro clear">
      <div class="welcome clear"><img class="imgl" src="images/5.jpg" alt="" />
        <div class="fl_right">
          <h2>Welcome to Our University</h2>
          <p>Morbit incidunt maurisque eros molest nunc anteget sed vel lacus mus semper. Anter dumnullam interdum eros dui urna consequam ac nisl nullam ligula vestassa condimen tumfelis.</p>
        </div>
      </div>
      <div class="popular">
        <h2>Most Popular Links</h2>
        <ul class="clear">
          <li><a href="#">&raquo; Visiting the University</a></li>
          <li><a href="#">&raquo; Undergraduate Courses</a></li>
          <li><a href="#">&raquo; Graduate Courses</a></li>
          <li><a href="#">&raquo; Postgraduate Research</a></li>
          <li><a href="#">&raquo; Postgraduate Taught</a></li>
          <li><a href="#">&raquo; International Students</a></li>
          <li><a href="#">&raquo; Lifelong Learning</a></li>
          <li><a href="#">&raquo; Graduate Health Services</a></li>
          <li><a href="#">&raquo; Graduate Housing</a></li>
          <li><a href="#">&raquo; Graduate Programs</a></li>
          <li><a href="#">&raquo; Graduate Student Association</a></li>
          <li><a href="#">&raquo; Campus Life At a Glance</a></li>
          <li><a href="#">&raquo; Campus Recreation</a></li>
          <li><a href="#">&raquo; Campus Safety &amp; Security</a></li>
          <li><a href="#">&raquo; Class Schedules</a></li>
          <li><a href="#">&raquo; Course Descriptions &amp; Catalogue</a></li>
          <li><a href="#">&raquo; Residential Colleges</a></li>
          <li><a href="#">&raquo; Schools and Colleges</a></li>
          <li><a href="#">&raquo; Student Activities</a></li>
          <li><a href="#">&raquo; Student Affairs</a></li>
        </ul>
      </div>
    </div>
    <!-- ####################################################################################################### -->
  </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper row3">
  <div id="container" class="clear">
    <!-- ####################################################################################################### -->
    <div id="homepage" class="clear">
      <!-- ###### -->
      <div id="content">
        <div id="top_featured" class="clear">
          <ul class="clear">
            <li>
              <h2>Sentumquisque Morbi</h2>
              <img src="images/6.jpg" alt="" />
              <p>Morbit incidunt maurisque eros molest nunc anteget sed vel lacus mus semper. Anter dumnullam interdum eros dui urna consequam ac nisl nullam ligula vestassa.</p>
              <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
            </li>
            <li class="last">
              <h2>Sentumquisque Morbi</h2>
              <img src="images/7.jpg" alt="" />
              <p>Morbit incidunt maurisque eros molest nunc anteget sed vel lacus mus semper. Anter dumnullam interdum eros dui urna consequam ac nisl nullam ligula vestassa.</p>
              <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
            </li>
          </ul>
        </div>
        <div id="latestnews">
          <h2>Latest News &amp; Events</h2>
          <ul>
            <li>
              <p><strong>Sentumquisque morbi dui congue tincidunt eu quis</strong><br />
                This is a W3C compliant free website template from <a href="http://www.cssmoban.com/" title="CSSMoban">Web Template</a>. This template is distributed using a <a href="#">Website Template Licence</a>&hellip;</p>
              <p class="readmore"><a href="#">Read The Full Story &raquo;</a></p>
            </li>
            <li>
              <p><strong>Sentumquisque morbi dui congue tincidunt eu quis</strong><br />
                You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more CSS templates visit <a href="#">Free Website Templates</a>&hellip;</p>
              <p class="readmore"><a href="#">Read The Full Story &raquo;</a></p>
            </li>
            <li class="last">
              <p><strong>Sentumquisque morbi dui congue tincidunt eu quis</strong><br />
                Vestassapede et donec ut est liberos sus et eget sed eget. Quisqueta habitur augue magnisl magna phasellus sagittitor&hellip;</p>
              <p class="readmore"><a href="#">Read The Full Story &raquo;</a></p>
            </li>
          </ul>
        </div>
        <div id="quicklinks">
          <h2>Quick Links</h2>
          <ul>
            <li>
              <p><a href="#">Make an Application <img src="images/8.jpg" alt="" /></a></p>
            </li>
            <li>
              <p><a href="#">Order a Prospectus <img src="images/9.jpg" alt="" /></a></p>
            </li>
            <li class="last">
              <p><a href="#">Support Us <img src="images/10.jpg" alt="" /></a></p>
            </li>
          </ul>
        </div>
      </div>
      <!-- ###### -->
      <div id="column">
        <div class="holder">
          <h2>Take The Virtual Tour</h2>
          <!-- Begin Flash Here - This is the correct method for W3C validation -->
          <object type="application/x-shockwave-flash" data="https://www.youtube.com/v/vxAU88LxLis?version=3&amp;hl=en_US&amp;fs=1&amp;rel=0" width="300" height="250">
            <param name="movie" value="https://www.youtube.com/v/vxAU88LxLis?version=3&amp;hl=en_US&amp;fs=1&amp;rel=0" />
            <param name="wmode" value="opaque" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#E9E9E9" />
            <param name="allowfullscreen" value="false" />
            <param name="allowscriptaccess" value="never" />
          </object>
          <!-- End Flash Here -->
          <p>Aliquatpede id pellus elit quis in nec consectetuer mattis duis in. Ipsumet ris morbi quis ac nulla aenean trisuscelerit nonummy augue et.</p>
          <p class="readmore"><a href="#">Apply To The University Today &raquo;</a></p>
        </div>
        <div class="holder last">
          <h2>Student &amp; Staff Representatives</h2>
          <ul class="staffmembers">
            <li class="clear"><img class="imgl" src="images/11.jpg" alt="" />
              <div class="fl_left">
                <p><strong>Principals Name Here</strong></p>
                <p>Principal / Headmaster</p>
                <p><a href="#">View Full Profile &raquo;</a></p>
              </div>
            </li>
            <li class="clear"><img class="imgl" src="images/12.jpg" alt="" />
              <div class="fl_left">
                <p><strong>Another Name Goes Here</strong></p>
                <p>Head of Student Access</p>
                <p><a href="#">View Full Profile &raquo;</a></p>
              </div>
            </li>
            <li class="clear"><img class="imgl" src="images/13.jpg" alt="" />
              <div class="fl_left">
                <p><strong>Yet Another Name Here</strong></p>
                <p>Student Union Representative</p>
                <p><a href="#">View Full Profile &raquo;</a></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- ###### -->
    </div>
    <!-- ####################################################################################################### -->
  </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper row4">
  <div id="footer" class="clear">
    <!-- ####################################################################################################### -->
    <div class="footbox">
      <h2>Quick Links</h2>
      <ul>
        <li><a href="#">&raquo; Homepage</a></li>
        <li><a href="#">&raquo; Contact Us</a></li>
        <li><a href="#">&raquo; Sitemap</a></li>
        <li><a href="#">&raquo; Privacy Policy</a></li>
        <li><a href="#">&raquo; Terms of Use</a></li>
        <li><a href="#">&raquo; Copyright Information</a></li>
        <li><a href="#">&raquo; Website Matters</a></li>
      </ul>
    </div>
    <div class="footbox">
      <h2>How To Find Us</h2>
      <address>
      Address Line 1<br />
      Address Line 2<br />
      Town/City<br />
      Postcode/Zip<br />
      <br />
      Tel: xxxx xxxx xxxxxx<br />
      Email: <a href="#">contact@domain.com</a>
      </address>
    </div>
    <div class="fl_right">
      <div id="social">
        <h2>Connect With Us</h2>
        <ul>
          <li><a href="#"><img src="images/social/facebook.gif" alt="" /></a></li>
          <li><a href="#"><img src="images/social/twitter.gif" alt="" /></a></li>
          <li><a href="#"><img src="images/social/flickr.gif" alt="" /></a></li>
          <li><a href="#"><img src="images/social/youtube.gif" alt="" /></a></li>
          <li class="last"><a href="#"><img src="images/social/rss.gif" alt="" /></a></li>
        </ul>
      </div>
      <div id="newsletter" class="clear">
        <form action="#" method="post">
          <fieldset>
            <legend>Subscribe To Our Newsletter:</legend>
            <input type="text" value="Enter Email Here&hellip;" onfocus="this.value=(this.value=='Enter Email Here&hellip;')? '' : this.value ;" />
            <input type="text" id="subscribe" value="Submit" />
          </fieldset>
        </form>
      </div>
    </div>
    <!-- ####################################################################################################### -->
  </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper">
  <div id="copyright" class="clear">
    <p class="fl_left">Copyright &copy; 2011 - All Rights Reserved - <a href="#">Domain Name</a></p>
    <p class="fl_right">Template from <a href="http://www.cssmoban.com/" title="Moban">Moban</a></p>
  </div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

您可以向正文添加包装类。

.wrapper {
  margin: 0 auto;
  max-width: 1200px;
}
相关问题
最新问题