个人中心
gpt4 book ai didi

html - 如何在纯 CSS 中格式化页脚？

转载 作者：行者123 更新时间：2023-11-28 03:42:38 26 4
gpt4 key购买 nike

我不知道如何使用 CSS 或 JS 格式化某些内容，我需要帮助，因为我想了解一些新知识。

body {
  font-family: Oswald;
  background-color: #FFFFFF;
}

#header {
  background-image: url(bg.jpg);
  background-size: cover;
  background-attachment: fixed;
  font-size: 45px;
}

#header .top {
  font-size: 95px;
  border: 25px solid #FFFFFF;
  color: #FFFFFF;
  visibility: visible;
}

#header h2 {
  visibility: hidden;
}

blockquote {
  color: #000000;
}

a {
  text-decoration: none;
  color: #FFFFFF;
}

a:hover {
  color: #0C7FDA;
}

nav {
  font-size: 45px;
  padding: 8px;
  margin: 5px;
  margin-bottom: 10px;
  position: fixed;
  top: 75px;
  left: 498px;
  background-color: #795548;
  background-size: cover;
  display: inline;
  box-shadow: 4px 3px 8px 2px;
  /* For some material effect :D */
}

nav a:hover {
  color: #4CAF50;
}

aside {
  float: right;
}

article {
  float: left;
}

#hidden {
  visibility: hidden;
}

#topheader {
  background-color: #FDEB0F;
  padding: 4px;
  border: 5px solid #000000;
  margin: 5px;
  box-shadow: 7px 5px 14px 3px #4E4545;
}

#topheader h1 {
  font-size: 65px;
}

#topheader p {
  font-size: 20px;
  padding: 6px;
}

#blogpart {
  margin: 5px;
  margin-top: 10px;
  padding: 9px;
}

#blogpart a {
  color: #000000;
}

#blogpart a:hover {
  color: #383838;
}

#blogpart .blog {
  background-color: #FDEB0F;
  border: 5px solid #000000;
  padding: 4px;
  margin: 5px;
  box-shadow: 7px 5px 14px 3px #4E4545;
  font-size: 35px;
  width: 675px;
  float: left;
}

#blogpart h1 {
  display: inline;
  font-size: 125px;
  margin-bottom: 9px;
}

#blogpart .subscr {
  background-color: #FDEB0F;
  border: 5px solid #000000;
  padding: 4px;
  margin: 5px;
  box-shadow: 7px 5px 14px 3px #4E4545;
  font-size: 35px;
}

footer {
  height: 150px;
  margin-top: 80px;
}

#footerContainer ul {
  list-style-image: url(whitespace.png);
  list-style-position: inside;
}

#footerContainer a {
  color: #000000;
}

#footerContainer a:hover {
  color: #0C7FDA;
}

#thisContainer {
  margin: 50px;
  padding: 15px;
}

#title {
  text-decoration: underline;
  font-size: 20px;
}

#footerContainer {
  padding: 25px;
  height: 30px;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>Modulus</title>` `
  <link rel="shortcut icon" href="">`

</head>

<link rel="stylesheet" href="style.css">

<body>
  <header id="header" align="center">
    <nav align="center">
      <a href="index.html">Home</a>
      <a href="blog.html">Blog</a>
      <a href="download.html">IDE</a>
      <a href="about.html">Us</a>
    </nav>
    <h2>hidden</h2>
    <h1 class="top">MODULUS </h1>
    <a href="#hidden">Scroll Me Down</a>
  </header>

  <h1 id="hidden">hidden</h1>

  <div id="topheader" align="center">
    <h1>Programming With Style.</h1>
    <!--<img></img> will be done someday later-->
    <a href="dw1.html">
      <?xml version="1.0"?>
      <svg width="245" height="109.99999999999999" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
             <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
             <defs>
              <linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_9">
               <stop offset="0" stop-color="#2196f3"/>
               <stop offset="1" stop-color="#3f51b5"/>
              </linearGradient>
              <linearGradient id="svg_4">
               <stop stop-color="#03a9f4" offset="0"/>
               <stop stop-color="#4b49d0" offset="1"/>
              </linearGradient>
             </defs>
             <g class="layer">
             <title>Layer 2</title>
              <rect id="svg_3" height="71" width="211" y="24.5" x="21.5" stroke-width="5" stroke="#232426" fill="#232426"/>
             </g>
             <g class="layer">
              <title>Layer 1</title>
              <rect stroke="url(#svg_4)" id="svg_2" height="72.281252" width="211.453124" y="17.499996" x="15.765641" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="url(#svg_9)"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="33.5" y="58" id="svg_6" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="78.5" y="74" id="svg_7" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="46.5" y="58" id="svg_8" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="36.5" y="40" id="svg_10" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="36.5" y="40" id="svg_11" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="53.5" y="47" id="svg_12" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="53.5" y="47" id="svg_13" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="153.5" y="76" id="svg_14" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="25.5" y="59" id="svg_15" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="25.5" y="59" id="svg_16" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="25.5" y="59" id="svg_17" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="49.5" y="51" id="svg_18" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#000000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="49.5" y="51" id="svg_19" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#ff0000" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="32.5" y="43" id="svg_20" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve"/>
              <text fill="#003fff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="172.96419" y="60.518913" id="svg_21" font-size="24" font-family="Raleway ExtraBold" text-anchor="middle" xml:space="preserve" transform="matrix(1.193534190937388,0,0,1.1781938114650772,-90.23664805013107,-19.975664084182355) " stroke="url(#svg_4)">Download for</text>
              <text fill="#003fff" stroke="url(#svg_4)" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="117.5" y="76" id="svg_22" font-size="24" font-family="Raleway ExtraBold" text-anchor="middle" xml:space="preserve">64-bit</text>
              <ellipse fill="#003fff" stroke="url(#svg_4)" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="138.5" cy="-51" rx="0" ry="0" id="svg_23"/>
             </g>
            </svg>
    </a>
    <p>Programming has never been this easier. You can now program <br/> with add-ons to help you build projects with running packages, and you <br /> can choose your own languages that you wanted to run. Never been this easier, <br /> it's the perfect editor
      for people who are mixed--Front-End and Back-End Web <br /> development, for Software-Building and System Development, we all got you here.</p>
  </div>

  <h1 id="hidden">hidden</h1>
  <div id="blogpart">
    <article class="blog" style="width: 675px;">
      <section class="top1">
        <?xml version="1.0"?>
        <svg width="90" height="137" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
               <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
               <defs>
                <linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_5">
                 <stop offset="0" stop-color="#f44336"/>
                 <stop offset="0.51044" stop-color="#9c27b0"/>
                 <stop offset="1" stop-color="#ffeb3b"/>
                 <stop offset="2" stop-color="#ffeb3b"/>
                </linearGradient>
                <linearGradient y2="1" x2="0.5" y1="0" x1="0.5" id="svg_8">
                 <stop offset="0" stop-color="#f44336"/>
                 <stop offset="0.51044" stop-color="#9c27b0"/>
                 <stop offset="1" stop-color="#ffeb3b"/>
                 <stop offset="2" stop-color="#ffeb3b"/>
                </linearGradient>
               </defs>
               <g display="inline" class="layer">
                <title>Read Our Blog!</title>
                <text id="svg_4" font-weight="bold" stroke="#000000" transform="matrix(3.1195437761256533,0,0,3.1195437761256533,29.045285399217367,-24.321406977693613) " xml:space="preserve" text-anchor="middle" font-family="Bebas Neue" font-size="27" y="30.688799" x="3.416073" stroke-width="0" fill="#383838">BL</text>
                <text id="svg_6" font-weight="bold" stroke="#000000" transform="matrix(3.1195437761256533,0,0,3.1195437761256533,29.045285399217367,-24.321406977693613) " xml:space="preserve" text-anchor="middle" font-family="Bebas Neue" font-size="27" y="51.205177" x="3.325263" stroke-width="0" fill="#383838">OG</text>
                <rect id="svg_7" stroke="#000000" height="121.000004" width="11" y="13.670578" x="76.662292" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#383838"/>
               </g>
               <g class="layer">
                <title>Blog</title>
                <text font-weight="bold" stroke="#000000" transform="matrix(3.1195437761256533,0,0,3.1195437761256533,29.045285399217367,-24.321406977693613) " xml:space="preserve" text-anchor="middle" font-family="Bebas Neue" font-size="27" id="svg_1" y="28.87104" x="2.24209" stroke-width="0" fill="url(#svg_5)">BL</text>
                <text id="svg_2" font-weight="bold" stroke="#000000" transform="matrix(3.1195437761256533,0,0,3.1195437761256533,29.045285399217367,-24.321406977693613) " xml:space="preserve" text-anchor="middle" font-family="Bebas Neue" font-size="27" y="49.387418" x="2.15128" stroke-width="0" fill="url(#svg_5)">OG</text>
                <rect stroke="#000000" id="svg_3" height="121.000004" width="11" y="8" x="73" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="url(#svg_8)"/>
               </g>
              </svg>
        <h1>Version 3.5</h1>
      </section>
      <blockquote>
        <p>The release of Version 3.5. is a very <br /> big milestone for us...<a href="blog.html">Read More</a>.</p>
      </blockquote>
      <section class="suprtrs">
        <h2>95.2k Subscribers <br /> 1.01m Likes <br /> 12.7m Downloads <br /> 43.4k Commits</h2>
      </section>
    </article>
    <aside class="subscr" align="center">
      <h1>Subscribe</h1>
      <form method="POST" action="mailto:thisshouldbemeblog@gmail.com">
        <input id="email" class="input" name="email" type="text" placeholder="type your email here..." size="35" style="height: 60px; font-size: 25px; font-family: Oswald;"> <br />
        <a href="mailto:thisshouldbemeblog@gmail.com" type="submit">
          <?xml version="1.0"?>
          <svg width="185" height="95" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
               <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
               <defs>
                <linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_5">
                 <stop stop-color="#8bc34a" offset="0"/>
                 <stop stop-color="#ff9800" offset="0.47137"/>
                 <stop stop-color="#ffeb3b" offset="1"/>
                </linearGradient>
                <linearGradient id="svg_3">
                 <stop stop-color="#97e537" offset="0"/>
                 <stop stop-color="#ffb343" offset="0.47137"/>
                 <stop stop-color="#ffed4f" offset="1"/>
               </linearGradient>
               </defs>
               <g class="layer">
                <title>Subscribe to Our Newsletter</title>
                <rect id="svg_2" fill="#383838" stroke="#383838" stroke-width="5" x="16" y="17" width="162" height="70" rx="11" ry="11"/>
               </g>
               <g class="layer">
               <title>Click Here To Subscribe</title>
                <rect fill="url(#svg_5)" stroke="url(#svg_3)" stroke-width="5" x="11.5" y="12.5" width="162" height="70" id="svg_1" rx="11" ry="11"/>
                <text fill="#fffa84" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="73.73987" y="51.5" id="svg_4" font-size="24" font-family="Raleway ExtraBold" text-anchor="middle" xml:space="preserve" transform="matrix(1.3155649900436401,0,0,1.3155649900436401,-5.083554761484265,-8.993602216243744) " stroke="url(#svg_3)">Subscribe</text>
               </g>
              </svg>
        </a>
      </form>
      <p>A Developer? <a href="sign-in.html">Sign In</a>.</p>
    </aside>
  </div>

  <br />

  <footer>
    <script>
      for (i = 1; i <= 29; i++) {
        document.write("<br />")
      }
    </script>
    <div class="thisContainer">
      <div id="footerContainer">
        <ul class="first-part">
          <li id="title">MODULUS</li>
          <li><a href="download.html">Downloads</a></li>
          <li><a>GitHub</a></li>
          <!--Adding Link if Existing-->
          <li><a href="blog.html">Blog</a></li>
          <li><a href="faq.html">FAQ</a></li>
          <li><a href="faq-blog-for.html">Forums</a></li>
        </ul>
        <ul class="secnd-part">
          <li id="title">SOCIAL</li>
          <!--Links Coming if Existing-->
          <li><a>Facebook</a></li>
          <li><a>Twitter</a></li>
          <li><a>Instagram</a></li>
          <li><a>Medium</a></li>
          <li><a>Tumblr</a></li>
        </ul>
        <ul class="third-part">
          <li id="title">SERVICES</li>
          <li><a href="download.html">IDE</a></li>
          <li><a href="mod-enable-prem.html">Premium</a></li>
          <li><a href="mod-parent-domname.html">Domians</a></li>
          <li><a href="mod-m-donate.html">Donate</a></li>
          <br>
          <li><a href="about.html">ABOUT US</a></li>
          <li>
            <p> 2017, MODULUS</p>
          </li>
        </ul>
      </div>
    </div>
  </footer>
</body>

</html>

我实际上对这段代码有疑问。我需要有关格式化页脚的帮助，实际上我不知道该怎么做。

所以问题是它是逐行显示的。我实际上希望列表彼此相邻。我能帮忙解决这个问题吗？

最佳答案

你在正确的轨道上，你所要做的就是将 float:left; 添加到 #footerContainer ul:

#footerContainer ul {
  list-style-image: url(whitespace.png);
  list-style-position: inside;
  float:left; 
}

制作this JSFiddle for you boo .单击顶部的“运行”并在右下角的输出框中向下滚动

来源:Aligning <li> next to each other, not working

关于html - 如何在纯 CSS 中格式化页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44137597/

26 4 0
文章推荐： c++ - 如何解析结构化格式？
文章推荐： javascript - tooltipFormat 不适用于anychart.line()
文章推荐： c++ - 将现有类添加到 mfc 应用程序
文章推荐： double 类型的 C++ 变量总是将它们的值更改为 -9,25596e+061
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com