【发布时间】：2017-05-04 02:38:48
【问题描述】：
CSS3 过渡在 HTML 页面中可以正常工作，但在 .aspx 页面中则不行。有没有办法克服这个问题？我想在 Web Forms 中做这个应用程序，因为它使设计表单变得更加容易。任何意见将不胜感激。
这是 .aspx 页面：
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CMSWebForms.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="Content/jquery-1.10.2.min.js" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-combined.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Content/test.css"/>
</head>
<body>
<ul id="sidebar" class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: fixed; top: 0; left: 0;">
<li><h1 class="text-center"><a tabindex="-1" href="#">CMS</a></h1></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Sales</a>
<ul class="dropdown-menu text-right">
<li><a tabindex="-1" href="#">Customers</a></li>
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Pricing</a>
<ul class="dropdown-menu text-center">
<li><a tabindex="-1" href="#">A</a></li>
<li><a tabindex="-1" href="#">B</a></li>
<li><a tabindex="-1" href="#">C</a></li>
<li><a tabindex="-1" href="#">D</a></li>
<li><a tabindex="-1" href="#">E</a></li>
</ul>
</li>
<li><a tabindex="-1" href="#">Quotes</a></li>
<li><a tabindex="-1" href="#">Orders</a></li>
<li><a tabindex="-1" href="#">Pricing</a></li>
<li><a tabindex="-1" href="#">Reports</a></li>
</ul>
</li>
<p> </p>
<!--<p> </p>-->
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Manufacturing</a>
<ul class="dropdown-menu text-center">
<li><a tabindex="-1" href="#">One</a></li>
<li><a tabindex="-1" href="#">Two</a></li>
<li><a tabindex="-1" href="#">Three</a></li>
<li><a tabindex="-1" href="#">Four</a></li>
<li><a tabindex="-1" href="#">Five</a></li>
</ul>
</li>
</ul>
<!--</div>-->
<!--<div id="wrapper">-->
<div id="page-content-wrapper">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li>
<button id="sidebarToggle" class="btn btn-primary btn-lg">
<i class="fa fa-angle-left"></i>
</button>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="btn btn-sm btn-info">
<i class="fa fa-sign-in"></i> Log in
</a>
</li>
</ul>
</div>
</nav>
<div class="content-header container-fluid text-center">
<h1 id="home" class="">
CMS
</h1>
</div>
<div class="page-content inset container-fluid">
<div class="row">
<div class="jumbotron text-center">
<h1 class="">Hello Beautiful!</h1>
<p class="">
</p>
Name:
<asp:TextBox ID="TextBox1" runat="server" Width="248px"></asp:TextBox>
Address:
<asp:TextBox ID="TextBox2" runat="server" Width="248px"></asp:TextBox>
</div>
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<h4 class="text-center text-primary">©2016 Apiron Technologies, Inc.</h4>
</div>
</div>
</div>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script src="Scripts/site.js"></script>
</body>
</html>
</asp:Content>
这是 CSS：
#sidebar{
background: #000;
color: #999999;
border-radius: 0;
padding: 0;
height: 100%;
width: 200px;
margin-top: 0;
transition: .25s;
}
#sidebar.dropdown-menu.text-right.hide-sidebar{
left: -200px !important;
transition: .25s;
}
.navbar.navbar-inverse{
border-radius: 0 !important;
background: #1536b6 !important;
}
.navbar-inverse
.navbar-inverse .nav>li>a {
color: #fff !important;
}
.btn-info{
color: #fff !important;
}
.navbar.navbar-inverse.navbar-fixed-bottom{
margin-left: 200px !important;
}
#page-content-wrapper {
margin-left: 200px;
transition: .25s;
}
#page-content-wrapper.hide-sidebar{
margin-left: 0;
transition: .25s;
}
.dropdown-menu {
border-radius: 0;
padding: 0;
}
.dropdown-menu li a {
background: #000;
color: #999999;
display: block;
text-decoration: none;
outline: none;
}
.dropdown-menu li a:hover,
.dropdown-menu li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.dropdown-menu.text-right li a {
background: #000;
color: #999999;
display: block;
text-decoration: none;
outline: none;
}
.dropdown-menu.text-right li a:hover,
.dropdown-menu.text-right li.active {
color: #fff;
background-color: #333131 ;
text-decoration: none;
}
.dropdown-submenu.pull-right{
background: #000;
display: block;
width: 100%;
}
#myId {
color: aqua;
}
这里是 JS：
(function () {
var $sidebarAndWrapper = $("#sidebar,#page-content-wrapper");
var $icon = $("#sidebarToggle i.fa");
$("#sidebarToggle").on("click", function () {
$sidebarAndWrapper.toggleClass("hide-sidebar");
if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
$icon.removeClass("fa-angle-left");
$icon.addClass("fa-angle-right");
}
else {
$icon.removeClass("fa-angle-right");
$icon.addClass("fa-angle-left");
}
});
})();
【问题讨论】：
-
尝试先加载 css 文件，然后再加载 js 文件。不确定这是否有效，但在某些地方，他们指的是先加载 css，然后再加载 js
-
<link rel="stylesheet" type="text/css" href="Content/jquery-1.10.2.min.js" />这是什么？这是你加载js文件的方式吗？错了
标签： javascript html css asp.net css-transitions