Question

所以我需要做我的学校项目，该项目正在使用asp.net构建一个网站并包含一个母版页。现在我有点卡住，因为我的菜单不是我想要的地方（我指的是我希望它在哪里使用油漆），我不知道我做错了所以如果有人能告诉我我如何改变菜单位置以及它为什么不适合我，我会很高兴。

 this is the video page code


`<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Videos.aspx.cs" Inherits="WebApplication1.Videos" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="StyleSheet.css" rel="stylesheet" />
    <style type="text/css">
        .auto-style1 {
            height: 298px;
            margin-top: 0px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Videos</h1>
    <p>This page will show avideos about Muay Thai techniques, trainings and also other intresting content</p>



    <div id="video1">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/6Glyrl0-cSk" frameborder="0" allowfullscreen class="auto-style3"></iframe>
    </div>
    <h3>Buakaw training</h3>
    <p></p>
    <p></p>
        <div id="video2">
    <iframe width="420" src="https://www.youtube.com/embed/Mf1Ch8mJ464" frameborder="0" allowfullscreen class="auto-style1"></iframe> 
      </div>

    &nbsp;











</asp:Content>`

这是css代码：

`body {
            background-color:black;
        font-size:13px;
        font-family:Arial, Helvetica, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        line-height: 16px;
        direction:rtl;
        border-color:cornsilk;
        }
        #header{
            height:120px;
            background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSljBA8SLU52gNwOjT0HYxWNs17EXF3ykPDNLaiwy0lsC4rx71w") repeat-x;
            direction:rtl;
            text-align:center;
            position:fixed;


        }
        #header2
        {
            height:30px;

        }


        p
        {
            direction:rtl;
            text-align:left;
            color:brown;
            font-size: x-large;
        }
        HomePage picture
        {
            text-align:left;
        }
        table,td
        {
            border:1px white solid;
           border-collapse:collapse;
           border-spacing:30px;


        }
        td
        {
         font-size:23px
        }
        td
        {
        padding-top: .5em;
        padding-bottom: .5em;
        }
        h1
        {
            text-align:center;
        }
        img
        {
            padding:5px;
        }
        video1
        {
           text-align:left;
           position:absolute
        }
        video2
        {
        text-align:left;
        position:relative;
        }
        #video1
        {
            position:static;
            text-align:left;

        }
        #video2
        {
        position:static;
        text-align:left;
        }
        h3{
            text-align:left;
        }`

 and this is the master page code:

    ` <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="NewWebsite.Site1" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div id="header">

    </div>
    <div id="header2">
    <form id="form1" runat="server">
    <div>
        <h2>Menu</h2>
        <table>
        <tr>
        <td><a href="HomePage.aspx"> Home Page</a></td>
        </tr>
            <tr>
        <td><a href="TopFighter.aspx"> Top Fighters</a></td>
        </tr>
            <tr>
        <td><a href="YoutubeVideos.aspx">Videos</a></td>
        </tr>
            </table>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>

    </div>
    <div id="left">

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

Where I want to put my manu

Answer 1

我只是不知道你为什么不使用bootstrap？如果您使用w bootstrap，那么使用响应式设计就可以轻松地将内容放置在任何您想要的位置，例如

只需要在其中加入2个div，就像

一样

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row col-sm-8">
  Now place your Video Content here like :
    <h1>Videos</h1>
    <p>This page will show avideos about Muay Thai techniques, trainings and also other intresting content</p>



    <div id="video1">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/6Glyrl0-cSk" frameborder="0" allowfullscreen class="auto-style3"></iframe>
    </div>
    <h3>Buakaw training</h3>
    <p></p>
    <p></p>
   
    </div>
    <div class="row col-sm-4">
    And place you navigation here like :
   <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">  
    </div>
  </div>
</div>

</body>
</html>

＆＃13;

在整页视图中运行此代码段，您将了解如何调整更多内容并执行您想要的内容

如何在asp.net中更改母版页面菜单位置

1 个答案: