asp.net - CSS 裁剪页面使页眉变小，页脚变大

标签 asp.net 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 文件进行任何更改以使正文大小和页脚变小。谢谢!

最佳答案

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

关于asp.net - CSS 裁剪页面使页眉变小，页脚变大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13013773/

上一篇：css - 仅使用 CSS 定位标题项

下一篇：css - HTML5 元素只能拉伸(stretch)到窗口大小

相关文章：

c# - 运行linq命令时出现Unrecognized attribute 'name'错误

javascript - IIS url 重写 - css 和 js 被错误地重写

image - 将图像放在 <a> 标记的中心

asp.net - autofac、ASP.NET 集成和 HttpRequestScoped

asp.net - IIS 8 发布 ASP.NET 核心应用程序 - 正在使用的文件

c# - 如何使用SqlDataSource选择级联DropDownList

css - Material Design 图标未在浏览器中显示

javascript - 如何使用 css 或 javascript 创建新行？

javascript - 在不同页面上使用相同的 id 会导致图片元素无法渲染？

html - 通过 CSS 防止 iPad 移动版 Safari 截断内容

©2024 IT工具网  联系我们