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

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

转载作者：行者123 更新时间：2023-11-28 03:42:38

我不知道如何使用 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/

文章推荐： c++ - 如何解析结构化格式？

文章推荐： javascript - tooltipFormat 不适用于anychart.line()

文章推荐： c++ - 将现有类添加到 mfc 应用程序

文章推荐： double 类型的 C++ 变量总是将它们的值更改为 -9,25596e+061

Java - toString 格式化(格式化 double )
我正在从事的项目需要使用 toString 方法打印银行帐户余额。我不允许向当前程序添加任何方法，但我需要将 myBalance 变量格式化为 double 型，该变量保留两位小数而不是一位。在这个特
c# - C++ 格式化，如 Visual Studio C# 格式化
我喜欢 Visual Studio (2008) 格式化 C# 代码的方式；不幸的是，在编写 C++ 代码时，它的行为方式似乎有所不同。比如我这样写代码的时候: class Test { publi
Java 格式化
Scanner scan = new Scanner(System.in); System.out.println("Enter three positive integers seperated b
c# - 格式化
在 aspose(使用 C#)中用于格式化数字的正确样式属性是什么。我想做两件事: 1) 将五位数字格式化为邮政编码。(我不太确定使用哪个 Style 属性来获取自定义 excel 邮政编码格式) 2
Java int 格式化？
我希望用户输入从 00 到 23 和从 00 到 59 的 Local.Time 的小时和分钟，我将其扫描为一个 int。它有效，但对于从 00 到 09 的值，int 忽略 0，然后将其放置为 0,
vba - 格式化(动态)
大家好，请查看上面的图片，我有两张 table 。在下面代码的第一个表中，我得到了这种格式。但我想像 Table2 那样格式化，每个合并单元格中的行数是动态的，而且不一样。有没有办法像table
Laravel created_at 格式化
我在一个 laravel 网站工作，我只是想知道是否有办法为用户格式化 created_at 值，因为现在它类似于以下内容: 2017-09-20 13:41 但我更愿意将其格式化为易于阅读的格式，例
java - 格式化 HTMLEditorKit
我正在尝试在 JTextPane 中进行一些基本的格式化。为此，我决定使用 html(HTMLDocument 和 HTMLEditorKit)。这里是按钮的操作监听器代码，应使所选文本变为粗体 b
ESlint 格式化 - 排队声明？
是否有规则或插件会导致 es-lint 错误或警告，如果范围内的声明没有像下面那样间隔，赋值运算符的对齐方式相同？ var a = 'a'; var bb = 'b'; var ccc = 'd
java - 格式化 LinkedHashMap
我正在尝试重新格式化 LinkedHashMap 的输出以排除逗号和大括号。这是我的看跌期权: token.put("[Server.Protocol]", url.getProtocol() +
python - 马尔可夫分析、格式化
我有一个程序，可以从文本文件中读取大量文本，然后根据文本内容随机化内容以显示为短篇故事。该程序可以运行，但最后一部分(我显示的 Material )非常笨重且效率不高，我想知道是否有人对如何更有效地获
VIM 格式化/对齐
我正在尝试将 VIM 作为我的 ruby/rails 编辑器。太胖了，我对它的功能印象深刻并且我能够安装以下插件以提供更好的 IDE 体验自动配对 Better-snipmate-snippe
java - JTextPane 格式化
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
Jquery 格式化 - 在另一个函数完成后运行函数
我有两个 jQuery 函数。我想先运行下面的第一个，然后在该函数完成后运行另一个。通常我会在代码的第一部分添加一个函数，但不确定如何使用这个 block 来做到这一点，或者它是否是正确的方法。简而
Python 在打印时对列表进行换行/格式化
在 Python 2.7 中，我有一个包含数字 1-25 字符串的列表(例如)。打印它们时，我希望列表打印 5 行，每行 5 个数字。理想情况下: >>> print(myList) ['1', '
C printf 格式化
我有以下功能来打印借阅者已取出的书籍列表。 void searchBorrowerLoans(int a) { int i; for (i = 1
java - 格式化 JTextPane
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 5 年前。 Improv
Android TextView 格式化
我正在尝试实现一个用作 ListView header 的 TextView。我想对其进行格式化，以便我基本上有一个以第一行为中心的标题，然后是以下几行的附加信息。如何格式化文本/字符串以创建这种格式
PostgreSQL，格式化 float
我尝试格式化数字字段 select to_char(12315.83453, 'FM999999999999D9999') 在这种情况下一切正常。结果是 12315.8345 但是如果值在0到1之间
Java BigDecimal 格式化
我有一个带有 BigDecimal 字段的类。我把这个对象放到 JSP(Spring MVC)中。而且我需要显示十进制不带零的 BigDecimal 字段(20.00 就像 20)，这就是为什么我的

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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