2012-02-22 49 views
0

所以我有HTML和CSS代码:页面的HTML CSS截掉

<!DOCTYPE html> 
<html> 
<head> 
    <title>Solomon Wise</title> 
     <style = text/css> 
      body { 
       background-color: #F5F5DC; 
      } 
      .body { 
       font-family: Futura, Geneva, sans-serif; 
       width: 300px; 
       border-style: solid; 
       border-width: 1px; 
       border-radius: 10px; 
       padding-left: 10px; 
       padding-right: 10px; 
       position: fixed; 
       top: 50px; 
       left: 50px; 
       background-color: White; 
      } 
      .javascript { 
       font-family: Futura, Geneva, sans-serif; 
       width: 300px; 
       border-style: solid; 
       border-width: 1px; 
       border-radius: 10px; 
       padding-left: 10px; 
       padding-right: 10px; 
       position: fixed; 
       top: 50px; 
       left: 500px; 
       background-color: White; 
      } 
      .HTMLCSS { 
       font-family: Futura, Geneva, sans-serif; 
       width: 300px; 
       border-style: solid; 
       border-width: 1px; 
       border-radius: 10px; 
       padding-left: 10px; 
       padding-right: 10px; 
       position: fixed; 
       background-color: White; 
       top: 300px; 
       left: 500px; 
      } 
      .Python { 
       font-family: Futura, Geneva, sans-serif; 
       width: 300px; 
       border-style: solid; 
       border-width: 1px; 
       border-radius: 10px; 
       padding-left: 10px; 
       padding-right: 10px; 
       position: fixed; 
       background-color: White; 
       top: 500px; 
       left: 500px; 
      } 
      p { 
       color: #747E80; 
      } 
      a:link { 
       color:DarkBlue; 
      } 
      a:visited { 
       color:Black; 
      } 
      a:hover { 
       color:DarkCyan; 
       } 
     </style> 
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
</head> 
<body> 
    <div class = 'body'> 
     <h1>Solomon Wise</h1> 
     <nav> 
      <p class = 'one'>Hi, I'm Solomon, I'm 13 years old and I live in NYC. I love music, coding, sports, and minimalism.</p> 
      <a href = "http://pastebin.com/u/slmnwise">Pastebin</a></br> 
      <a href = "http://turntablestars.com/profile/Bill">TTStars Profile</a> 
     </nav> 
     <a href="https://twitter.com/slmnwise" class="twitter-follow-button" data-show-count="false"><img src = 'http://aux.iconpedia.net/uploads/1161475967.png'></a> 
     <a href="http://www.facebook.com/SolomonIsGreat.net"><img src = "http://whatnowatlanta.com/wp-content/themes/canvas/images/ico-social-facebook.png"</a> 
     <a href="http://www.goodreads.com/user/show/7658526-solomon-wise"><img src = "http://4.bp.blogspot.com/-NtFTy_OM9oU/TsaFQylMW-I/AAAAAAAAE2s/XwdLy3eiBbk/s1600/goodreads-button-much-rounder-corners-600x600.jpg" height = "32" width = "32"></a> 
     <a href="http://stackoverflow.com/users/1207787/solomon-wise"><img src = "http://alindeman.github.com/images/stackoverflow_32.png"></a></br> 
    </div> 
    <div class = 'javascript'> 
     <h3>Javascript</h3> 
     <p class = 'two'>I can make small web applications in Javascript, along with adding dynamic features and functionality to a website in Javascript, such as adding a twitter mashup or an RSS feed.</p> 
    </div> 
    <div class = 'HTMLCSS'> 
     <h3>HTML and CSS</h3> 
     <p class = 'three'>I can design snazzy looking websites in HTML and CSS, just contact me to request one and we can work something out!</p> 
    </div> 
    <div class = 'Python'> 
     <h3>Python</h3> 
     <p class = 'four'>I can write applications and small games in Python, I have a good bit of experience in the language and work with it a lot</p> 
    </div> 
    </div> 
</body> 
</html> 

和网站看起来完全正常,除了一两件事。 Python框的底部被切断,我不能向下滚动查看页面的其余部分!我该如何解决?

回答

4

变化position: fixed;position: absolute;在所有这些“盒子” ......

固定

位置意味着元素没有与视互动以同样的方式其他的就这样他们就不会影响页面的滚动...

希望这有助于-ck

2

更改CSS位置属性

position: absolute;