Question

我创建了一个包含页眉，页脚和容器的母版页（用于其他页面的内容）。页脚有一个“ asp.net链接按钮”，它需要<form id="form1" runat="server">。现在，我必须在“内容页面”中添加内容，例如“ asp按钮”，“链接”等。但是“ IIS”会产生错误，该错误

“一个网页只能有一个服务器端标记。”

在母版页中，我将<form id="form1" runat="server">放在了<div class="footer-right">标签下，并且如果我尝试将<form id="form1" runat="server">移到页面顶部或其他在其他地方，搜索栏的CSS消失了。如何解决此问题？

如果我将“表单标签”放置在正文标签之后的页面顶部。

这是我的代码

母版页

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication2.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    

    <meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<meta name="keywords" content="footer, search, form, icons" />

	<title>Homepage</title>


    <%--<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>--%>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


	<link rel="stylesheet" href="css/demo.css"/>
	<link rel="stylesheet" href="css/footer-distributed-with-search.css"/>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>
        body {
            margin: 0;
            font-family: Arial;
        }


        .topnav {
            overflow: hidden;
            background-color: #37312f;
            padding: 12px 14px;
            font-family:sans-serif;
            font-weight:bold;
        }

            .topnav a {
                float: left;
                color: #f2f2f2;
                text-align: center;
                padding: 12px 14px;
                text-decoration: none;
                font-size: 17px;
            }

                .topnav a.logo {
                    font-size: 25px;
                    font-weight: bold;
                    color: #fff;
            height: 12px;
            margin-left: 72px;
        }

        .topnav-right {
            float: right;
        }


        .active {
            background-color: #4CAF50;
            color: white;
        }

        .topnav .icon {
            display: none;
        }

        .dropdown1 {
            float: left;
            overflow: hidden;
        }

            .dropdown1 .dropbtn {
                font-size: 17px;
                border: none;
                outline: none;
                color: white;
                padding: 12px 14px;
                background-color: inherit;
                font-family: inherit;
                margin: 0;
            }

        .dropdown1-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: -de1;
        }

            .dropdown1-content a {
                float: none;
                color: black;
                padding: 12px 14px;
                text-decoration: none;
                display: block;
                text-align: left;
            }

        .topnav a:hover, .dropdown1:hover .dropbtn {
            background-color: #555;
            color: white;
        }

        .dropdown1-content a:hover {
            background-color: #ddd;
            color: black;
        }

        .dropdown1:hover .dropdown1-content {
            display: block;
        }

        @media screen and (max-width: 600px) {
            .topnav a:not(:first-child), .dropdown1 .dropbtn {
                display: none;
            }

            .topnav a.icon {
                float: right;
                display: block;
            }
        }

        @media screen and (max-width: 600px) {
            .topnav.responsive {
                position: relative;
            }

                .topnav.responsive .icon {
                    position: absolute;
                    right: 0;
                    top: 0;
                }

                .topnav.responsive a {
                    float: none;
                    display: block;
                    text-align: left;
                }

                .topnav.responsive .dropdown1 {
                    float: none;
                }

                .topnav.responsive .dropdown1-content {
                    position: relative;
                }

                .topnav.responsive .dropdown1 .dropbtn {
                    display: block;
                    width: 100%;
                    text-align: left;
                }
        }

    </style>


</head>



<body>
   <div class="topnav" id="myTopnav">
            <a href="#default" class="logo">Website Name</a>
            <div class="topnav-right">
                <a href="#home" class="active">Home</a>
                <div class="dropdown1">
                    <button class="dropbtn">
                        Tools
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown1-content">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                </div>

                <a href="#about">About Us</a>
                <a href="#news">Contact</a>
                <a href="#contact">Login</a>
                <a href="#about">Sign Up</a>


                <%--Dropdown bar for window resize--%>
                <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> 
            </div> <%--id="Topnav-right--%>
          </div>   <%--id="myTopnav--%>
        &nbsp;&nbsp;
        
        <script>
            function myFunction() {
                var x = document.getElementById("myTopnav");
                if (x.className === "topnav") {
                    x.className += " responsive";
                } else {
                    x.className = "topnav";
                }
            }
        </script>

    
        <!-- The content of your page would go here. -->
         <div class="container" style="background-color:aquamarine">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    


    	<footer class="footer-distributed">

			<div class="footer-left">

				<p class="footer-links">
					<a href="#">Home</a>
					·
					<a href="#">About us</a>
					·
					<a href="#">Contact</a>
					·
					<a href="#">Login</a>
					·
					<a href="#">Sign up</a>
					·
					<a href="#">Feedback</a>
				</p>

				<p class="footer-company-name">websiteName &copy; 2019</p>

			</div>

			<div class="footer-right">

				<form id="form2" runat="server" method="get" action="#">
					<input placeholder="Search our website" name="search" /><asp:LinkButton runat="server" ID="btnSubmit" class="btn btn-mini" OnClick="Page_Load">
                        <i class="fa fa-search" aria-hidden="true"></i></asp:LinkButton>
					<%--<i class="fa fa-search"></i>--%>
				</form>
			</div>
		</footer>


</body>
</html>

内容页面

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm5555555555555555.aspx.cs" Inherits="WebApplication2.WebForm5555555555555555" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
    
    
    <%--<form is="form1" runat="server">--%>
    
    
    <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">
        <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
            <h2>Responsive Topnav with Dropdown</h2>
            <p>Resize the browser window to see how it works.</p>
            <p>Hover over the dropdown button to open the dropdown menu.</p>


           <%-- </form>--%>


</asp:Content>

footer-distributed-with-search.css

.footer-distributed{
	background-color: #292c2f;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	font: bold 16px sans-serif;
	text-align: left;

	padding: 50px 60px;
	margin-top: 80px;
	overflow: hidden;
}

/* Footer left */

.footer-distributed .footer-left{
	float: left;
}

.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 0 0 10px;
	padding: 0;
}

.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}


/* Footer right */

.footer-distributed .footer-right{
	float: right;
}

/* The search form */

.footer-distributed form{
	position: relative;
}

.footer-distributed form input{
	display: block;
	border-radius: 3px;
	box-sizing: border-box;
	background-color:  #1f2022;
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
	border: none;

	font: inherit;
	font-size: 14px;
	font-weight: normal;
	color:  #d1d2d2;

	width: 500px;
	padding: 18px 50px 18px 18px;
}

.footer-distributed form input:focus{
	outline: none;
}

/* Changing the placeholder color */

.footer-distributed form input::-webkit-input-placeholder {
	color:  #5c666b;
}

.footer-distributed form input::-moz-placeholder {
	opacity: 1;
	color:  #5c666b;
}

.footer-distributed form input:-ms-input-placeholder{
	color:  #5c666b;
}

/* The magnify glass icon */

.footer-distributed form i{
	width: 18px;
	height: 18px;
	position: absolute;
	top: 16px;
	right: 18px;

	color: #d1d2d2;
	font-size: 18px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 1000px) {

	.footer-distributed form input{
		width: 300px;
	}

}

@media (max-width: 800px) {

	.footer-distributed{
		padding: 30px;
		text-align: center;
		font: bold 14px sans-serif;
	}

	.footer-distributed .footer-company-name{
		margin-top: 10px;
		font-size: 12px;
	}

	.footer-distributed .footer-left,
	.footer-distributed .footer-right{
		float: none;
		max-width: 300px;
		margin: 0 auto;
	}

	.footer-distributed .footer-left{
		margin-bottom: 20px;
	}

	.footer-distributed form input{
		width: 100%;
	}

}

我使用过的CSS模板 Beautiful and Responsive Footer Templates

Answer 1

在您的情况下，母版页中包含的样式表使用相对路径。用runat=server指定样式表链接，并在其前面加上虚拟Web根路径（〜）。例子：

<link rel="stylesheet" href="~/css/demo.css" runat="server"/>
<link rel="stylesheet" href="~/css/footer-distributed-with-search.css" runat="server"/>

对您页面上的所有样式表（显然不是CDN链接）执行此操作，并将<form>放在<body>之后，请确保<head>元素也需要{ {1}}。将网站发布到虚拟目录中时，可以使用虚拟Web根路径（〜），这样就不会遇到问题。

在何处放置Form（服务器端）标签，以免影响网页的CSS？

1 个答案: