Tóm Tắt
Dẫn nhập
Khóa học Lập trình Lập trình Front-End Lập trình CSS và SASS nâng cao với dự án Bất Động Sản website Landing Page Code Footer SectionTrong bài học kinh nghiệm trước tất cả chúng ta đã cùng nhau code HOÀN THIỆN CSS CHO FORM COMPONENT .
Bạn đang xem: Code Footer Đẹp Cho Website
Trong bài hôm này chúng ta sẽ Code Section Footer.
Nội dung
Để tiếp thu tốt bài học kinh nghiệm này những bạn cần :Có kiến thức cơ bản về CSS và SASSCó kỹ năng và kiến thức cơ bản về CSS và SASSTrong bài này tất cả chúng ta sẽ cùng nhau :Code HTML FooterCode CSS cho Footer
Code HTML Footer
Code HTML FooterCode CSS cho FooterTương tự những bài trước tất cả chúng ta sẽ cùng nhìn qua loại sản phẩm ở đầu cuối mà tất cả chúng ta sẽ làm được
Ở đây ta thấy bố cục tổng quan footer gồm 3 phần chính : Phần 1 là logo, 2 phần còn lại gồm bên phải là copy right, bên trái là là những đường link
SelfTaught
Phần 1 gồm footer__logo và footer__title được đặt trong thẻ div chung là footer__logo-box
Bên trong footer__navigation là footer__list chứa các footer__item chứa các footer__link
Vậy là tất cả chúng ta đã code xong phần HTML của footer .
Giờ thì bắt tay vào code CSS thui nào .Xem thêm : Hướng Dẫn Sử Dụng Phần Mềm Giả Lập Android Không Cần Cài Đặt Phần Mềm
Code CSS cho Footer
Chúng ta sẽ code CSS của Footer trong file _footer.scss để trong folder layout và import nó vào trong file main.scss
Ta thêm 1 variable vào _variables.scss để làm màu nền cho footer, tạm thời sẽ đặt tên màu là $color-grey-dark-1: #333
/ / abstracts / _variables. scss USD color-grey-dark-1 : # 333 ; Giờ thì tất cả chúng ta sẽ code chung cho phần footer trước :
Trước hết sẽ là màu của background sử dụng variable $color-grey-dark-1 và màu của chữ sẽ để là $color-grey-light-1
Xem thêm: HTML Là Gì, Giới Thiệu Về HTML
Ta cũng set luôn fontsize trong phần footer này là 1.4 rem và 1 chút margin cho top và bottom của footer .. footer { background-color : USD color-grey-dark-1 ; padding : 10 rem 0 ; font-size : 1.4 rem ; color : USD color-grey-light-1 ; }
Tiếp chúng ta set property cho logo. Chúng ta sẽ để footer__logo-box ở giữa sử dụng text-align:center, và cho nó có khoảng cách với các phần còn lại bằng cách để margin-bottom
&__logo-box{ text-align: center; margin-bottom: 8rem; }Và ta sẽ set tiếp luôn thuộc tính cho &__logo và &__title
&__logo thì ta chỉ set width cho nó sao cho phù hợp, và height để auto
&__logo{ width: 20rem; height: auto; }&__title thì ta sẽ để display: block thì nó sẽ khồng còn nằm trên cùng 1 hàng với logo nữa và để color nó là $color-primary
và __title { display : block ; color : USD color-primary ; }
Giờ thì chúng ta chuyển sang phần footer__navigation
và display để là inline-block sẽ giúp border-top chỉ ôm vừa đủ phần chứa link ( những bạn hoàn toàn có thể thử bỏ display đi để thấy sự khác biết nhé : P )
Tiếp đến footer__list sẽ để list-style: none;
&__navigation{ border-top: 1px solid $color-grey-light-1; padding-top: 2rem; display: inline-block; } &__list{ list-style: none; }footer__item sẽ để display: inline block để các link hiển thị trên cùng 1 hàng và ta sẽ set khoảng cách cho chúng bằng cách sử dụng margin-right
và __list { list-style : none ; } và __item { display : inline-block ; và : not ( : last-child ) { margin-right : 1.5 rem ; } }
Cuối cùng thì chúng ta sẽ code phần footer__link
Quan sát chúng ta sẽ có, text-transform là uppercase, text-decoration là none, và ta phải để display: inline-block thì mới có thể set border-radius và các thông số khác cho footer__link được
&__link{ &:link, &:visited{ color: $color-grey-light-1; background-color: $color-grey-dark-1; text-transform: uppercase; text-decoration: none; display: inline-block; border-radius: 5rem; } }Khi hover thì button chuyển màu thành màu $color-primary và xuất hiện shadow cũng như nghiêng 1 chút. Toàn bộ thuộc tích làm thế nào để làm element nghiêng, set shadow đã được giới thiệu ở các bài trước, giờ ta chỉ cần áp dụng vào là được.
&__link{ &:hover, &:active{ color: $color-primary; box-shadow: 0 1rem 2rem rgba($color-black, .4); transform: rotate(5deg) scale(1.05); } }Giờ thì set thêm transition cho footer__link nữa là chúng ta đã hoàn thiện phần footer rồi.
Xem thêm: Hướng Dẫn Cách Kiểm Tra Thẻ Nhớ Bằng Máy Tính Thế Giới Thẻ Nhớ
Code SASS
Kết luận
Ở bài này chúng ta đã cùng nhau kết thúc phần Code FooterỞ bài này tất cả chúng ta đã cùng nhau kết thúc phần Code FooterTrong bài học kinh nghiệm sau tất cả chúng ta sẽ cùng nhau CODE PHẦN POPUP khi click vào button “ enroll now ” trong course section .
Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triền bài viết tốt hơn. Đừng quên: “Luyện tập – Thử thách – Không ngại khó”
Source: https://final-blade.com
Category: Kiến thức Internet
