我不知道如何使用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>
我实际上遇到了这段代码的问题。我需要帮助格式化页脚,我实际上不知道如何。
所以它是逐行显示的问题。我实际上希望列表彼此相邻。我可以帮忙解决这个问题吗?
答案 0 :(得分:0)
您走在正确的轨道上,您所要做的就是将float:left;
添加到#footerContainer ul
:
#footerContainer ul {
list-style-image: url(whitespace.png);
list-style-position: inside;
float:left;
}
制作this JSFiddle for you boo。单击顶部的“运行”,然后在右下方的输出框中向下滚动