如何在HTML中创建这种类型的导航栏

问题描述 投票：-2回答：1

我尝试使用border-img创建这种类型的导航栏但无法创建它。任何人都可以为it.enter image description here提供一些帮助或代码

css border navbar
1个回答
1
投票

好的，我想我明白你的意思了。

我认为你应该有2个选项来做倾斜的底边。

  1. 使用图像。因此，示例站点的整个顶部标题是一个图像。

这包括黑色部分和白色底部与facebook横幅的角度。这个图像必须是png，因为它需要一个alpha层。 PNG图像在文件大小中通常相对较大，这使得它不那么吸引人，但实现起来要简单得多。

  1. 使用CSS完成所有操作：

            html {
              height:100%;
            }
            body {
             height:100%;
             margin:0;padding:0;
            }
            h1,h2,p {
              color:white;
            }
            #header {
              /* Just the top banner */
              background-color:black;
              height:125px;
              text-align:left;
              padding-left:30px;
              color:white;
              font-size:50px;
              line-height:100px;
              -webkit-clip-path: polygon(0 0, 100% 0, 100% 75px, 0% 100%);
              clip-path: polygon(0 0, 100% 0, 100% 75px, 0% 100%);
            }
            #content {
              position:relative;
              top:-50px;
              height:calc(100% - 125px - 25px);
              min-height:350px;
              background:url(http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/dark_forest_wallpaper_landscape_nature_1138.jpg);
              background-attachment:fixed;
              background-sizing:100% 100%;
              padding:75px 75px 0 75px;
              -webkit-clip-path: polygon(0 70px, 100% 20px, 100% 100%, 0% 100%);
              clip-path: polygon(0 70px, 100% 20px, 100% 100%, 0% 100%);
            }
            .section {
              background-color:black;
              margin-top:-71px;
              padding:75px 75px 25px 75px;
              font-family:sans-serif;
            }
            .section > p {
              font-size:15px;
              padding:25px;
            }
    <html>
            <head>
            </head>
            <body>
               <div id='header'>
                  TEST
               </div>
              <div id='content'>
                <h1>Title H1</h1>
                <h2>TITLE H2</h2>
                <p>The quick brown fox jumps over the lazy dog</p>
              </div>
              <div class='section'>
                <h1>SUPERCONDUCTIVITY</h1>
                <p>
                  Superconductivity is a phenomenon of exactly zero electrical resistance and expulsion of magnetic flux fields occurring in certain materials, called superconductors, when cooled below a characteristic critical temperature. It was discovered by Dutch physicist Heike Kamerlingh Onnes on April 8, 1911, in Leiden. Like ferromagnetism and atomic spectral lines, superconductivity is a quantum mechanical phenomenon. It is characterized by the Meissner effect, the complete ejection of magnetic field lines from the interior of the superconductor as it transitions into the superconducting state. The occurrence of the Meissner effect indicates that superconductivity cannot be understood simply as the idealization of perfect conductivity in classical physics.
             
                <br>
                <br>
              
The electrical resistance of a metallic conductor decreases gradually as temperature is lowered. In ordinary conductors, such as copper or silver, this decrease is limited by impurities and other defects. Even near absolute zero, a real sample of a normal conductor shows some resistance. In a superconductor, the resistance drops abruptly to zero when the material is cooled below its critical temperature. An electric current through a loop of superconducting wire can persist indefinitely with no power source.
            
                <br>
                <br>
             
In 1986, it was discovered that some cuprate-perovskite ceramic materials have a critical temperature above 90 K (−183 °C). Such a high transition temperature is theoretically impossible for a conventional superconductor, leading the materials to be termed high-temperature superconductors. The cheaply-available coolant liquid nitrogen boils at 77 K, and thus superconduction at higher temperatures than this facilitates many experiments and applications that are less practical at lower temperatures.
                </p>
              </div>
            </body>
            </html>

PS：我在StackOverflow上回答问题时学到了这个，所以这对我来说也是新闻。

奇迹般有效！！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.