如何在纯CSS中格式化页脚？
[英]How do I format a Footer in pure CSS?
问题描述
我不知道如何使用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>
我实际上对此代码有问题。 我需要格式化页脚的帮助，但实际上我不知道该怎么做。
因此出现了一行一行显示的问题。 实际上，我希望列表彼此相邻。 我可以帮忙解决这个问题吗？
1 个解决方案
解决方案1
0 已采纳 2017-05-23 14:36:19
您处在正确的轨道上，所有要做的就是添加float:left; 到#footerContainer ul ：
#footerContainer ul {
list-style-image: url(whitespace.png);
list-style-position: inside;
float:left;
}
为您创建了这个JSFiddle boo 。 点击顶部的“运行”，然后在右下方的输出框中向下滚动
来源： <li>彼此对齐，无法正常工作
如何以纯HTML5 / CSS / Jquery显示epub格式的书
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.