1. 首页
  2. 问答
  3. CSS剪裁页面使页眉很小，页脚很大

CSS剪裁页面使页眉很小，页脚很大

2012-10-22 58 views
0

我最近更改了页面上的一些CSS，它使得页面变小，页脚变大，所以我想在布局和CSS中删除页脚，但是没有运气。我经历了几次，似乎无法弄清楚。任何建议让我知道。CSS剪裁页面使页眉很小，页脚很大

_Layout.cshtml

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script> 
    <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <meta name="viewport" content="width=device-width" /> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 
    <header> 
     <div class="content-wrapper"> 
      <div class="float-left"> 
       <p class="site-title">@Html.ActionLink("ARPP Razor", "Index", "Home")</p> 
      </div> 
      <div class="float-right"> 
       <section id="login"> 
        @Html.Partial("_LoginPartial") 
       </section> 
      </div> 
       <nav> 

        <ul> 
         @*<li>@Html.ActionLink("Home", "Index", "Home")</li>*@ 
         <li><a href="#">ARPP</a> 
          <ul> 
           <li>@Html.ActionLink("Genes", "Genes", "Home")</li> 
           <li>@Html.ActionLink("Clones","Clones","Home")</li> 
          </ul> 
         </li> 
         <li><a href="#">File Management</a> 
          <ul> 
          <li>@Html.ActionLink("Upload", "Upload", "FileManagement")</li> 
          <li>@Html.ActionLink("Create File", "CreateFile", "FileManagement")</li> 
          <li>@Html.ActionLink("File to Fasta", "FileToFasta", "FileManagement")</li> 
          </ul> 
         </li> 
        </ul> 
       </nav> 

     </div> 
    </header> 
    <div id="body"> 

     <section class="content-wrapper main-content clear-fix"> 
      @RenderBody() 
     </section> 
    </div> 


    @Scripts.Render("~/bundles/jquery") 
    @RenderSection("scripts", required: false) 
</body>

和的site.css

nav { 
margin: 20px auto; 
text-align: center; 
} 

nav ul ul { 
display: none; 
} 

nav ul li:hover > ul { 
    display: block; 
} 


nav ul { 
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
padding: 0 0px; 
border-radius: 100px; 
list-style: none; 
position: relative; 
display: inline-table; 
} 
nav ul:after { 
    content: ""; clear: both; display: block; 
} 

nav ul li { 
    float: left; 
} 
    nav ul li:hover { 
     background: #4b545f; 
     background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
     background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
     background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
    } 
     nav ul li:hover a { 
      color: #fff; 
     } 

    nav ul li a { 
     display: block; padding: 25px 40px; 
     color: #757575; text-decoration: none; 
    } 


nav ul ul { 
    background: #5f6975; border-radius: 0px; padding: 0; 
    position: absolute; top: 100%; 
} 
    nav ul ul li { 
     float: none; 
     border-top: 1px solid #6b727c; 
     border-bottom: 1px solid #575f6a; position: relative; 
    } 
     nav ul ul li a { 
      padding: 15px 40px; 
      color: #fff; 
     } 
      nav ul ul li a:hover { 
       background: #4b545f; 
      } 

nav ul ul ul { 
    position: absolute; left: 100%; top:0; 
} 

/* tables 
----------------------------------------------------------*/ 
table { 
border-collapse: collapse; 
border-spacing: 0; 
margin-top: 0.75em; 
border: 0 none; 
} 

th { 
font-size: 1.2em; 
text-align: left; 
border: none 0px; 
padding-left: 0; 
} 

th a { 
    display: block; 
    position: relative; 
} 

th a:link, th a:visited, th a:active, th a:hover { 
    color: #333; 
    font-weight: 600; 
    text-decoration: none; 
    padding: 0; 
} 

th a:hover { 
    color: #000; 
} 

th.asc a, th.desc a { 
    margin-right: .75em; 
} 

th.asc a:after, th.desc a:after { 
    display: block; 
    position: absolute; 
    right: 0em; 
    top: 0; 
    font-size: 0.75em; 
} 

th.asc a:after { 
    content: '▲'; 
} 

th.desc a:after { 
    content: '▼'; 
} 

td { 
padding: 0.25em 2em 0.25em 0em; 
border: 0 none; 
} 

tr.pager td { 
padding: 0 0.25em 0 0; 
} 

aside { 
float: right; 
width: 25%; 
} 

aside ul { 
    list-style: none; 
    padding: 0; 
} 

    aside ul li { 
     background: url("../Images/bullet.png") no-repeat 0 50%; 
     padding: 2px 0 2px 20px; 
    } 

.label { 
font-weight: 700; 
} 

/* login page */ 
#loginForm { 
border-right: solid 2px #c8c8c8; 
float: left; 
width: 55%; 
} 

#loginForm .validation-error { 
    display: block; 
    margin-left: 15px; 
} 

#loginForm .validation-summary-errors ul { 
    margin: 0; 
    padding: 0; 
} 

#loginForm .validation-summary-errors li { 
    display: inline; 
    list-style: none; 
    margin: 0; 
} 

#loginForm input { 
    width: 250px; 
} 

#loginForm input[type="checkbox"], 
#loginForm input[type="submit"], 
#loginForm input[type="button"], 
#loginForm button { 
    width: auto; 
} 

#socialLoginForm { 
margin-left: 40px; 
float: left; 
width: 40%; 
} 

#socialLoginForm h2 { 
    margin-bottom: 5px; 
} 

#socialLoginList button { 
margin-bottom: 12px; 
} 

#logoutForm { 
display: inline; 
} 

/* contact */ 
.contact h3 { 
font-size: 1.2em; 
} 

.contact p { 
margin: 5px 0 0 10px; 
} 

.contact iframe { 
border: 1px solid #333; 
margin: 5px 0 0 10px; 
} 

/* forms */ 
fieldset { 
border: none; 
margin: 0; 
padding: 0; 
} 

fieldset legend { 
    display: none; 
} 

fieldset ol { 
    padding: 0; 
    list-style: none; 
} 

    fieldset ol li { 
     padding-bottom: 5px; 
    } 

label { 
display: block; 
font-size: 1.2em; 
font-weight: 600; 
} 

label.checkbox { 
display: inline; 
} 

input, textarea { 
border: 1px solid #e2e2e2; 
background: #fff; 
color: #333; 
font-size: 1.2em; 
margin: 5px 0 6px 0; 
padding: 5px; 
width: 300px; 
} 

textarea { 
font-family: inherit; 
width: 500px; 
} 

input:focus, textarea:focus { 
    border: 1px solid #7ac0da; 
} 

input[type="checkbox"] { 
    background: transparent; 
    border: inherit; 
    width: auto; 
} 

input[type="submit"], 
input[type="button"], 
button { 
    background-color: #d3dce0; 
    border: 1px solid #787878; 
    cursor: pointer; 
    font-size: 1.2em; 
    font-weight: 600; 
    padding: 7px; 
    margin-right: 8px; 
    width: auto; 
} 

td input[type="submit"], 
td input[type="button"], 
td button { 
    font-size: 1em; 
    padding: 4px; 
    margin-right: 4px; 
} 

/* info and errors */ 
.message-info { 
border: 1px solid; 
clear: both; 
padding: 10px 20px; 
} 

.message-error { 
clear: both; 
color: #e80c4d; 
font-size: 1.1em; 
font-weight: bold; 
margin: 20px 0 10px 0; 
} 

.message-success { 
color: #7ac0da; 
font-size: 1.3em; 
font-weight: bold; 
margin: 20px 0 10px 0; 
} 

.error { 
color: #e80c4d; 
} 

/* styles for validation helpers */ 
.field-validation-error { 
color: #e80c4d; 
font-weight: bold; 
} 

.field-validation-valid { 
display: none; 
} 

input.input-validation-error { 
border: 1px solid #e80c4d; 
} 

input[type="checkbox"].input-validation-error { 
border: 0 none; 
} 

.validation-summary-errors { 
color: #e80c4d; 
font-weight: bold; 
font-size: 1.1em; 
} 

.validation-summary-valid { 
display: none; 
} 


/* content */ 
article { 
float: left; 
width: 70%; 
} 

/* page elements 
----------------------------------------------------------*/ 
/* featured 
.featured { 
background-color: #fff; 
} 

.featured .content-wrapper { 
    background-color: #7ac0da; 
    background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6)); 
    background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    color: #3e5667; 
    padding: 20px 40px 30px 40px; 
} 

    .featured hgroup.title h1, .featured hgroup.title h2 { 
     color: #fff; 
    } 

    .featured p { 
     font-size: 1.1em; 
    } 

/* page titles */ 
hgroup.title { 
margin-bottom: 10px; 
} 

hgroup.title h1, hgroup.title h2 { 
display: inline; 
} 

hgroup.title h2 { 
font-weight: normal; 
margin-left: 3px; 
} 

/* features 
section.feature { 
width: 300px; 
float: left; 
padding: 10px; 
} 


/* login 
----------------------------------------------------------*/ 
#login { 
display: block; 
font-size: .85em; 
margin: 0 0 10px; 
text-align: right; 
} 

#login a { 
    background-color: #d3dce0; 
    margin-left: 10px; 
    margin-right: 3px; 
    padding: 2px 3px; 
    text-decoration: none; 
} 

#login a.username { 
    background: none; 
    margin: 0; 
    padding: 0; 
    text-decoration: underline; 
} 

#login ul { 
    margin: 0; 
} 

#login li { 
    display: inline; 
    list-style: none; 
} 
/* main layout 
----------------------------------------------------------*/ 
.content-wrapper { 
margin: 0 auto; 
max-width: 960px; 
} 

#body { 
background-color: #efeeef; 
clear: both; 
padding-bottom: 0px; 
} 

.main-content { 
    background: url("../Images/accent.png") no-repeat; 
    padding-left: 10px; 
    padding-top: 30px; 
} 

.featured + .main-content { 
    background: url("../Images/heroAccent.png") no-repeat; 
} 



footer { 
clear: both; 
background-color: #e2e2e2; 
font-size: .8em; 
height: 100px; 
} 


/* site title 
----------------------------------------------------------*/ 
.site-title { 
color: #c8c8c8; 
font-family: Rockwell, Consolas, "Courier New", Courier, monospace; 
font-size: 2.3em; 
margin: 0; 
} 

.site-title a, .site-title a:hover, .site-title a:active { 
background: none; 
color: #c8c8c8; 
outline: none; 
text-decoration: none; 
} 

.webGrid {margin: 4px; border-collapse: collapse; width: 300px;} 
.header {background-color: #E8E8E8; font-weight: bold; color: #FFF;} 
.webGrid th. .webGrid td {border: 1px solid #C0C0C0; padding: 5px;} 
.alt{background-color: #E8E8E8; color: #000;} 
.person{ width:200px; font-weight:bold;} 

html { 
background-color: #e2e2e2; 
margin: 0; 
padding: 0; 
} 

.spacing{ 
height: 20px; 
} 

body { 
background-color: #fff; 
border-top: solid 10px #000; 
color: #333; 
font-size: .85em; 
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; 
margin: 0; 
padding: 0; 
} 

a { 
color: #333; 
outline: none; 
padding-left: 3px; 
padding-right: 3px; 
text-decoration: underline; 
} 

a:link, a:visited, 
a:active, a:hover { 
    color: #333; 
} 

a:hover { 
    background-color: #c7d1d6; 
} 

header, footer, hgroup, 
nav, section { 
display: block; 
} 

mark { 
background-color: #a6dbed; 
padding-left: 5px; 
padding-right: 5px; 
} 

.float-left { 
float: left; 
} 

.float-right { 
float: right; 
} 

.clear-fix:after { 
content: "."; 
clear: both; 
display: block; 
height: 0; 
visibility: hidden; 
} 

h1, h2, h3, 
h4, h5, h6 { 
color: #000; 
margin-bottom: 0; 
padding-bottom: 0; 
} 

h1 { 
font-size: 2em; 
} 

h2 { 
font-size: 1.75em; 
} 

h3 { 
font-size: 1.2em; 
} 

h4 { 
font-size: 1.1em; 
} 

h5, h6 { 
font-size: 1em; 
} 

h5 a:link, h5 a:visited, h5 a:active { 
    padding: 0; 
    text-decoration: none; 
}

我的CSS文件，使身体正常尺寸和页脚小的任何更改都将不胜感激。谢谢！

来源

2012-10-22 Badmiral

+0

在网络上的任何地方，我们都可以看到一个活生生的例子吗？ – Sean

回答

1

看起来您并未使用<footer>元素来划定网站的页脚。如果这样做，定义专门应用于页脚内容的新CSS样式将变得微不足道。

来源

2012-10-23 19:17:16

相关问题

 相关问题