#html #css #footer
Вопрос:
Я пытаюсь создать нижний колонтитул из 3 столбцов, но все, что я пытаюсь, текст просто находится слева. последняя из приведенных ниже, имеет столбцы друг над другом слева. Цвет фона и шрифт не работают, и на странице индекса шрифт по какой-то причине кажется жирным.
* { padding: 0; margin: 0; box-sizing: border-box; } footer-container { background-color: #99cc99; font-family: "Open Sans"; padding-bottom: 4rem; } footer { width: 80%; height: 40vh; background-color: #99cc99; color: white; display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto; } footer-heading { display: flex; flex-direction: column; margin-right: 4rem; } footer-heading h2 { margin-bottom: 2rem; } footer-heading a { color: white; text-decoration: none; margin-bottom: 0.5rem; } footer-heading a:hover { color: #336633; transition: 0.3s ease-out; } lt;div class="footer-container"gt; lt;div class="footer"gt; lt;div class="footer-heading footer-1"gt; lt;h3gt;ADDRESSlt;/h3gt; lt;pgt;1234 Sandy Beach Road, lt;brgt; Queenscliffe, New Zealandlt;/pgt; lt;/divgt; lt;div class="footer-heading footer-2"gt; lt;h3gt;CONTACTlt;/h3gt; lt;pgt;Sally Sharp lt;brgt; Tel: (00) 1234 1122lt;/divgt; lt;/divgt; lt;div class="footer-heading footer-3"gt; lt;h3gt;QUICK LINKSlt;/h3gt; lt;a href="About/About.html#Ammenities"gt;Ammenitieslt;/agt;lt;brgt; lt;a href="About/About.html#Availability"gt;Availabilitylt;/agt;lt;brgt; lt;a href="About/About.html#Cancellation Policy"gt;Cancellation Policylt;/agt;lt;brgt; lt;a href="About/About.html#Location"gt;Locationlt;/agt;lt;brgt; lt;a href="About/About.html#What's nearby"gt;What's nearbylt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; Ответ №1:
В конце у вас был дополнительный lt;/divgt; код в вашем HTML .footer-heading.footer-2 . Кроме того, синтаксис класса в селекторах CSS таков .className . Ни одно из ваших правил CSS, предназначенных для классов, не включало . символ перед именем класса.
* { padding: 0; margin: 0; box-sizing: border-box; } .footer-container { background-color: #99cc99; font-family: "Open Sans"; padding-bottom: 4rem; } .footer { width: 80%; height: 40vh; background-color: #99cc99; color: white; display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto; } .footer-heading { display: flex; flex-direction: column; margin-right: 4rem; } .footer-heading h2 { margin-bottom: 2rem; } .footer-heading a { color: white; text-decoration: none; margin-bottom: 0.5rem; } .footer-heading a:hover { color: #336633; transition: 0.3s ease-out; } lt;div class="footer-container"gt; lt;div class="footer"gt; lt;div class="footer-heading footer-1"gt; lt;h3gt;ADDRESSlt;/h3gt; lt;pgt;1234 Sandy Beach Road, lt;brgt; Queenscliffe, New Zealandlt;/pgt; lt;/divgt; lt;div class="footer-heading footer-2"gt; lt;h3gt;CONTACTlt;/h3gt; lt;pgt;Sally Sharp lt;brgt; Tel: (00) 1234 1122 lt;/divgt; lt;div class="footer-heading footer-3"gt; lt;h3gt;QUICK LINKSlt;/h3gt; lt;a href="About/About.html#Ammenities"gt;Ammenitieslt;/agt;lt;brgt; lt;a href="About/About.html#Availability"gt;Availabilitylt;/agt;lt;brgt; lt;a href="About/About.html#Cancellation Policy"gt;Cancellation Policylt;/agt;lt;brgt; lt;a href="About/About.html#Location"gt;Locationlt;/agt;lt;brgt; lt;a href="About/About.html#What's nearby"gt;What's nearbylt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. И это отличный пример того, почему стоит поддерживать порядок в коде, а не допускать разрывов и пробелов повсюду.
2. @ Дэвид. Я думал, что так и будет. но нет, ничего не изменилось. Я новичок в этом, значит ли это, что у меня что-то не так в другом месте?
3. Вам придется быть более конкретным. Опубликуйте правку своего вопроса с обновленным кодом, демонстрирующим, с какими проблемами вы сталкиваетесь. Только из вашего фрагмента мои правки решают проблему, о которой вы заявили в своем вопросе-есть 3 столбца, которые больше не выровнены по левому краю. Если вам нужны разъяснения по поводу того, что я изменил, я буду рад ответить на ваши вопросы.