HTML链接不起作用

时间：2014-08-12 15:59:11

标签： html css

我基本上有两个问题。第一个是我的每个网页的链接不起作用。我使用intellisence选择页面文件的URL，所以我不确定为什么我一直找不到＆＃34;资源无法找到＆＃34;运行解决方案并单击链接时出错。第二个问题是我正在尝试创建我的第一个响应式网站。我目前正在修改导航菜单，以便当屏幕低于特定宽度时，它会变为组合成单个下拉菜单（使用样式使其看起来很好）。我使用开源脚本来运行更改。脚本文件名为responsivemobilemenu.js。

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Atlas Web Pages</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        <script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/responsivemobilemenu.js")" type="text/javascript"></script>
    </head>
    <body>
        <div class="box-effect">
            <header id="header">
                <div class="web-header">
                    <div class="logo-image">
                        <img style="vertical-align:top" src="~/Images/WebPageLogo.png" height="85" width="820" alt="Atlas Logo" />
                        <br />
                    </div>
                    <div id="follow-icons">
                        <a href ="www.facebook.com/jmilam90"><img src="~/Images/FBIcon.png" alt="Follow on Facebook" height="40" width="40" /></a>
                        <a href ="www.twitter.com/jmilam900"><img src="~/Images/TwitIcon.png" alt="Follow on twitter" height="40" width="40" /></a>
                        <a href ="https://www.youtube.com/channel/UCCSdkWipauQ1mhzEPAJfOnA"><img src="~/Images/YTIcon.png" alt="Subscribe on Youtube" height="40" width="40" /></a>
                        <a href ="mailto:jmilam90@gmail.com"><img src="~/Images/GMailIcon.png" alt="Send me an Email" height="40" width="40" /></a>
                    </div>
                </div>
            </header>
            <div class="rmm">
                <ul>
                    <li><a href="~/Views/Home/Index">Home</a></li>
                    <li><a href="~/Views/About/About">The Team</a></li>
                    <li><a href="~/Views/Current/CurrentList">Current Line-Up</a></li>
                    <li><a href="~/Views/Retired/RetiredList">Retired Equipment</a></li>
                    <li><a href="~/Views/Tournament/TourneyInfo">Tournaments</a></li>
                    <li><a href="~/Views/Video/Videos">Videos</a></li>
                    <li><a href="~/Views/Sponsor/Sponsors">Sponsors</a></li> 
                </ul>
            </div>
            <div id="body-content">
                @RenderSection("featured", required: false)
                <section class="content-wrapper clear-fix">
                    @RenderBody()
                </section>
            </div>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
        </div>
    </body>
</html>

这是菜单的CSS：

.rmm {
    display:block;
    position:relative;
    width:100%;
    padding:0px;
    margin:0 auto !important;
    text-align: center;
    line-height:19px !important;
}
.rmm * {
    -webkit-tap-highlight-color:transparent !important;
    font-family:Arial;
}
.rmm a {
    color:#ebebeb;
    text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
    margin:0px;
    padding:0px;
}
.rmm ul {
    display:block;
    width:auto !important;
    margin:0 auto !important;
    overflow:hidden;
    list-style:none;
}


/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
    display:none !important;
    height:0px !important;
    width:0px !important;
}


.rmm .rmm-main-list li {
    display:inline;
    padding:0px;
    margin:0px !important;
}
.rmm-toggled {
    display:none;
    width:100%;
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}
.rmm-button:hover {
    cursor:pointer;
}
.rmm .rmm-toggled ul {
    display:none;
    margin:0px !important;
    padding:0px !important;
}
.rmm .rmm-toggled ul li {
    display:block;
    margin:0 auto !important;
}

/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
    text-shadow:1px 1px 1px #333333;
    background-color:#444444;
    border-left:1px solid #555555;
    background-image:url('../rmm-img/graphite-menu-bg.png');
    background-repeat:repeat-x;
}
.rmm.graphite .rmm-main-list li a:hover {
    background-image:url('../rmm-img/graphite-menu-bg-hover.png');
}
.rmm.graphite .rmm-main-list li:first-child a {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
    width:95%;
    background-color:#555555;
    min-height:36px;
    border-radius:6px;
}
.rmm.graphite .rmm-toggled-controls {
    display:block;
    height:36px;
    color:white;
    text-align:left;
    position:relative;
    background-image:url('../rmm-img/graphite-menu-bg.png');
    background-repeat:repeat-x;
    border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
    position:relative;
    top:9px;
    left:15px;
    font-size:16px;
    color:white;
    text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
    display:block;
    position:absolute;
    right:15px;
    top:8px;
}

.rmm.graphite .rmm-button span {
    display:block;
    margin-top:4px;
    height:2px;
    background:white;
    width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
    display:block;
    width:100%;
    background-color:#555555;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #333333;
    border-top:1px solid #777777;
    text-shadow:1px 1px 1px #333333;
}
.rmm.graphite .rmm-toggled ul li a:active {
    background-color:#444444;
    border-bottom:1px solid #444444;
    border-top:1px solid #444444;
}

/* MINIMAL STYLE */

.rmm.minimal a {
    color:#333333;
}
.rmm.minimal a:hover {
    opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
}
.rmm.minimal .rmm-toggled {
    width:95%;
    min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
    display:block;
    height:36px;
    color:#333333;
    text-align:left;
    position:relative;
}
.rmm.minimal .rmm-toggled-title {
    position:relative;
    top:9px;
    left:9px;
    font-size:16px;
    color:#333333;
}
.rmm.minimal .rmm-button {
    display:block;
    position:absolute;
    right:9px;
    top:7px;
}

.rmm.minimal .rmm-button span {
    display:block;
    margin:4px 0px 4px 0px;
    height:2px;
    background:#333333;
    width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
    display:block;
    width:100%;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #dedede;
    color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
    border-top:1px solid #dedede;
}

1 个答案:

答案 0 :(得分：1)

试试这个

 <li><a href="/Home/Index">Home</a></li>
 <li><a href="/About/About">The Team</a></li>
 <li><a href="/Current/CurrentList">Current Line-Up</a></li>
 <li><a href="/Retired/RetiredList">Retired Equipment</a></li>
 <li><a href="/Tournament/TourneyInfo">Tournaments</a></li>
 <li><a href="/Video/Videos">Videos</a></li>
 <li><a href="/Sponsor/Sponsors">Sponsors</a></li>

您应该考虑使用Html Helper。

 @Html.ActionLink("Link Text", "Action Name", "Controller Name")
相关问题
最新问题