html - % 出现在我的网址中不应该出现的地方

问题描述

我试图弄清楚如何解决有关我的网址外观的问题。基本上，当我进入一个包含我所做工作的页面时，它会显示我的站点的域名，以及相应的 html 文档的标题。有人对为什么每个单词之间有 % 字符有任何建议吗？我已经在 url 下面包含了页面的编码，如图所示
<!doctype html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Soundwave Records Brading | Bradley Buckmaster Graphic Design and Illustration </title>
  <link href="lemonade type.css" rel="stylesheet" type="text/css">
  <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
  <!-- Main Container -->
</head>

<style>
  * {
    box-sizing: border-box;
  }
  /* Style the top navigation bar */
  
  .topnav {
    overflow: hidden;
    background-color: #434e5e;
    min-height: calc(100vh - 53px-60px);
  }
  /* Style the topnav links */
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: gill sans;
    font-size: large;
    font-weight: lighter;
  }
  /* Change color on hover */
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  /* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
  
  @media screen and (max-width: 600px) {
    .topnav a {
      float: none;
      width: 100%;
    }
  }
  
  * {
    box-sizing: border-box;
  }
  /* Create four equal columns that floats next to each other */
  
  .column {
    float: left;
    width: 5%;
    height: 5%;
    margin-left: 48%;
    right: -48%;
    margin-right: auto;
    padding-left: auto;
    padding-right: auto;
    margin-bottom: 50px;
    margin-top: 50px;
  }
  /* Clear floats after the columns */
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  /* On screens that are 992px wide or less, go from four columns to two columns */
  
  @media screen and (max-width: 992px) {
    .column {
      width: 10%;
      margin-left: 46%;
      right: -46%;
      margin-right: auto;
      height: 10%;
      margin-top: 20px;
      margin-bottom: 25px;
    }
  }
  /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
  
  @media screen and (max-width: 600px) {
    .column {
      width: 11%;
      margin-left: 45%;
      margin-top: 15px;
      margin-bottom: auto;
      height: 11%;
      margin-right: auto;
      right: -45%;
      padding-bottom: 15px;
      padding-top: 0px;
    }
  }
  
  * {
    box-sizing: border-box;
  }
  /* Create four equal columns that floats next to each other */
  
  .columns {
    float: left;
    width: 70%;
    height: auto;
    margin-left: 17%;
    right: -17%;
    margin-right: auto;
    padding-left: auto;
    padding-right: auto;
    margin-bottom: 2%;
    margin-top: 2%;
    /* [disabled]padding-bottom: 40px; */
    /* [disabled]padding-top: 20px; */
  }
  /* Clear floats after the columns */
  
  .rows:after {
    content: "";
    display: table;
    clear: both;
  }
  /* On screens that are 992px wide or less, go from four columns to two columns */
  
  @media screen and (max-width: 992px) {
    .columns {
      width: 100%;
      right: -32%;
      margin-right: auto;
      margin-top: 2%;
      margin-bottom: 2%;
      padding-bottom: auto;
      padding-top: auto;
      margin-left: auto;
    }
  }
  /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
  
  @media screen and (max-width: 600px) {
    .columns {
      width: 100%;
      margin-left: auto;
      margin-top: auto;
      margin-bottom: auto;
      padding-top: auto;
      padding-bottom: auto;
    }
  }
  
  * {
    box-sizing: border-box;
  }
  /* Create four equal columns that floats next to each other */
  
  .tagline {
    float: left;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 25px;
    font-weight: 300;
    letter-spacing: normal;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 15px;
    padding-top: 15px;
    font-size: 17px;
    text-transform: none;
    background-color: #434e5e;
    margin-top: auto;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    width: 100%;
  }
  /* Clear floats after the columns */
  
  .hero:after {
    content: "";
    display: table;
    clear: both;
  }
  /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
  
  @media screen and (max-width: 600px) {
    .tagline {
      width: 100%;
      margin-left: auto;
      margin-top: auto;
      margin-bottom: auto;
      padding-top: auto;
      padding-bottom: auto;
    }
  }
</style>





<body>

  <div class="container">

    <div id="container4"></div>

    <div class="topnav">
      <a href="Home.html">Home</a>
      <a href="Contact me.html">Get in contact</a>
      <a href="Work.html">Work</a></div>

    <a data-scroll href="#container3">
      <div class="arrow"></div>
    </a>


    <!-- Navigation -->
    <div class="row"><img src="logo-for-gumtree.png" width="279" height="240" alt="" class="column" /></div>
    <!-- Hero Section -->
    <div class="rows"><img src="Vinyl-Record-PSD-MockUp-CMYK.jpg" alt="" width="2400" height="1700" class="columns" /></div>
    <section class="hero" id="hero">

      <p class="tagline">Indentity and accompanying vinyl record created for a record label company</p>
    </section>
    <!-- About Section -->

    <div id="container3"></div>

    <a data-scroll href="#container4">
      <div class="arrowbottom"></div>
    </a>
    <!-- Footer Section -->



    <div class="copyright">&copy;
      <script>
        document.write(new Date().getFullYear());
      </script> <strong>Bradley Buckmaster</strong></div>



  </div>
  <!-- Main Container Ends -->
</body>

</html>
标签： htmlurl
html - % 出现在我的网址中不应该出现的地方

问题描述

解决方案

推荐阅读
