Question

我目前正在开发一个网络表单项目并创建了一个导航栏。我想知道我必须做些什么才能使导航栏响应，这样当窗口大小重新调整时，导航栏会相应改变，而不是一起压扁。

我使用的代码如下：

Master.site页面

<%@ Master Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="NestedMasterPage1.master.cs" Inherits="TGASAttempt.NestedMasterPage1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" runat="server" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <header>
        <div class="container">
            <img src="TGASlogo.png" alt="logo" class="logo">

            <nav>
                <ul>
                    <li><a href="Home Page.aspx">Home Page</a></li>
                    <li><a href="~/">About</a></li>
                    <li><a href="~/">Contact</a></li>
                    <li><a href="~/">List1</a></li>
                    <li><a href="~/">List2</a></li>
                    <li><a href="~/">List3</a></li>
                    <li><a href="~/">List4</a></li>
                    <li><a href="~/">List5</a></li>
                    <li><a href="Signup.aspx">Sign Up</a></li>
                    <li><a href="Login.aspx">Login</a></li>
                </ul>
            </nav>

        </div>
    </header>

        <div>

        </div>
</body>
</html>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
                <asp:ContentPlaceHolder ID="nestedContent" runat="server">


                </asp:ContentPlaceHolder>

            </asp:Content>

stylesheet.css中

body {
    padding-left:200px;
    padding-right:200px;
    margin: 0;
    background: #F0EFE8;    
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
}

.container {
    width:80%;
    margin:0 auto;
}

header {
    background: #FFD63C;
}

header::after {
    content: '';
    display:table;
    clear:both;
}

.logo {
    float:left;
    padding:5px 0;
}

nav {
    float:right;
}

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

nav li {
    display:inline-block;
    margin-left:35px;
    padding-top:35px;

    position:relative;
}

nav a {
color:#444;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-weight:500;

}

nav a:hover {
    color:#FFF;

}

    nav a::before {
        content: '';
        display: block;
        height: 5px;
        background-color: #FFF;
        position: absolute;
        top: 0;
        width: 0%;
        transition:all ease-in-out 250ms;
    }

    nav a:hover::before{
        width:100%;
    }

Answer 1

我认为@media查询是您正在寻找的。

@media screen and (max-width: 720px){
   nav {
       // this styling will have affect when user is using screen with 720px or lower width
    }
}

Answer 2

您可以尝试下载任何免费的自适应主题，并尝试将它们集成到您的代码中。使用现成主题比使用快速解决方法更好。

free responsive theme

如何使我当前的导航栏响应（ASP.NET）

2 个答案: