Closed. This question needs details or clarity。它当前不接受答案。












想改善这个问题吗?添加详细信息,并通过editing this post阐明问题。

3个月前关闭。



Improve this question




我正在尝试使用Golang API提供HTML页面
这是html:
<!DOCTYPE HTML>
<html>

    <body>
      <section>
      <div class="login-box">
    <h2>Login into your account</h2>
    <form method="post" action="/login">
        <label for="name"></label>
        <input type="text" placeholder="Username" id="name" name="name"><br>
        <label for="password"></label>
        <input  type="password" placeholder="Password" id="password" name="password"> <br>
        <br>
        <button type="submit">Login</button>
    </form>

        </div>
      <br>
    <nav class="myNav">
        <ul>
            <li><a href="">Don't have an account?</a>
              <ul>
                <li><a href="">Sing Up</a></li>
                <li><a href="">Login with Google Account</a></li>
              </ul>
          </li>
        </ul>
      </nav>
      </section>
     </html>
<style>
  .login-box{
    font-size: large;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .login-box input{
    border:none;
    outline:none;
    font-size:20px;
    text-align: center;
  }

button{
  width:30%;
  position:absolute;
  left:70%;
  background:none;
  border: 2px solid white;
  padding: 4px;
  cursor:pointer;
  font-size: 18px;
  font-family: "Lucida Console", Courier, monospace;
}

label{
  color:black;
  font-family: 'Comfortaa';
  font-size:30px;
}
body {

  width:100%;
  height:100vh;
    background: linear-gradient(-45deg, #23D5AB, #23A6D5,#E73C7E);
    background-size:300% 300%;
    position:relative;
    animation:change 10s ease-in-out infinite;
}
  @keyframes change{
    0%{
      background-position: 0 50%;
    }
    50%{
      background-position: 100% 50%;
    }
    100%{
      background-position: 0 50%;
    }
  }
.myNav ul {
  margin:0;
  padding:0;
  list-style: none;

}
.myNav >ul {
  display:flex;
  flex-direction:column;

}
ul a{
    display: block;
    padding: .5rem;
    background: #262626;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
  }

 .myNav a:hover,
 .myNav a:focus
  {
    background:crimson;
  }
 .myNav >ul ul a{
    padding-left: 3rem;
    /*flex-direction: column;*/
  }
@media (min-width: 500px){
  .myNav ul{
    flex-direction:row;
  }

  .myNav >ul ul{
    position:relative;
    display:none;
    transition: .4s ease opacity;
    /*display:none;*/

  }
  .myNav >ul>li:hover ul,
  .myNav >ul>li:focus-within ul{
    display:block;
    position:absolute;
  }

  .myNav > li {
    position: relative;
   flex:1;
  }
  .myNav >ul>li:hover ul,
  .myNav >ul>li:focus-within ul{
    display:block;
  }

}
  h2{
      font-family: 'Comfortaa';
      font-size:45px;
      border-bottom: 2px solid #fff;

  }
</style>

    </body>

 </html>
我正在使用golang为以下html提供服务:router.HandleFunc(“/”,Utilities.LoginPage)
当我尝试本机呈现html或在codepen上运行时,但是当我使用Go API提供文件时,html页面看起来不一样!
任何帮助将不胜感激。谢谢 !

最佳答案

要托管静态文件,可以使用net/http File server。您可以在存储库中创建目录,并使用内置的http.FileServer指向处理程序。这是示例:
假设我们将上述文件另存为index.html下的tmp

package main

import (
    "net/http"
)

func main() {
    http.Handle("/", http.FileServer(http.Dir("./tmp")))
    http.ListenAndServe(":8080", nil)
}

关于html - 使用Go服务HTML页面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/62609459/

10-12 12:40
查看更多