Ich bin sehr neu im Bereich Web-Coding und brauche etwas Hilfe. Ich erstelle eine Webseite für eine örtliche Sportmannschaft und da deren Webseite nicht sehr gut aussieht und Wordpress nicht sehr benutzerfreundlich ist, dachte ich, dass es vielleicht einfacher wäre, es selbst zu programmieren.
Ich kann die Navigationsleiste, den Hauptinhalt und die Fußzeile auf der Seite nicht aufrufen. Ich möchte, dass die Navigationsleiste, der Hauptinhalt und die Fußzeile eingegeben werden und nur 80 % breit sind, damit Sie Hintergrundinformationen mit Bildern von Athleten aus Sportmannschaften sehen können)
#footerWrapper { max-width: 80%; max-height: 5%; margin-bottom: 20px; line-height: 30px; font-size: 0.9em; border: 0 solid #ddd; border-bottom-color: #3F8444; border-width: 1px 0;} /*Positions and Margins*/ .image { position: absolute; top:100px; left:100px; } .image-1 { position: absolute; top:20px; right: 100px; } header{ text-align: center; margin-top: 100px; margin-bottom: 100px; } main{ width: 80%; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;} footer{ position: static; left: 0; bottom: 0; width: 80%; height: 5%;} p {margin-left: 5px; margin-right: 5px;} /*Navigation*/ ul { display: flex; flex-direction: row; align-items: center; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #04AA6D; width: 80%; } /*li {float: left;}*/ li a, .dropdown li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn {background-color: #111;} li.dropdown { display: inline-block;} .dropdown-content { display:none; position: absolute; background-color: #04AA6D; color: white; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,.2); z-index: 1; } .dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #111;color: white;} .dropdown:hover .dropdown-content { display: block; } </style> </div> </head> <body> <header> <div class="image" id="Sports Team logo"> <img src="Sport Teams logo"> </div> <div class="image-1" id="Club logo"> <img src="Club logo" width="246" height="237"> </div> <h1>Sports Team</h1> </header> <nav> <ul> <li><a href="Sports Team url link">Home</a></li> <li class="dropdown"> <a class="dropbtn">Club Info</a> <div class="dropdown-content"> <a href="Sports Team url link">About Us</a> <a href="Sports Team url link">Committee</a> <a href="Sports Team url link">Contact Us</a> <a href="Sports Team url link">Game Rules</a> <a href="Sports Team url link">Uniforms</a> <a href="Sports Team url link">Fair Play</a> <a href="Sports Team url link">Terms and Conditions</a> </div> <li class="dropdown"> <a class="dropbtn">Winter Season 2023</a> <div class="dropdown-content"> <a href="Sports Team url link">Training Information</a> <a href="Sports Team url link">Game Details</a> <a href="Sports Team url link">Registration</a> <a href="Sports Team url link">Season Info Pack</a> <a href="Sports Team url link">Handbook</a> <a href="Sports Team url link">Privacy Policy</a> </div> <li class="dropdown"> <a class="dropbtn">Summer Season 2023</a> <div class="dropdown-content"> <a href="Sports Team url link">Training Information</a> <a href="Sports Team url link">Game Details</a> <a href="Sports Team url link">Registration</a> <a href="Sports Team url link">Season Info Pack</a> </div> <li><a href="Sports Team url link">Umpire Information</a> </ul> </nav> <Div></Div> <main> <div class="main"> <h2>Contact Us</h2> <p>Sports Team email</p> </main> </body> </html>
Ich habe viele verschiedene CSS-Stile wie Float, Margin, Flex, Grid usw. ausprobiert.
干得好!这真是一个好的开始。看起来你正在闲逛。我强烈建议研究像 tailwindcss 或 引导。
这些框架有助于处理大部分繁琐的微调。您的文件中实际上不会有太多 CSS,您可以添加类名。像
class="m-auto d-flex text-center"
这样的东西会取代你所有的 css。这些框架基于类,这是我的下一个推荐。您应该对所有内容使用类或 ID。这样您就能够编写更干净、更有组织的代码。你应该有:
如果您的网站上需要有多个
ul
,但它们需要不同的颜色或另一个不应居中,该怎么办?以下是如何居中现有代码: 导航栏和主栏上的边距应该是 auto 而不是 0。