Code footer đẹp

Khóa học Lập trình Lập trình Front-End Lập trình CSS và SASS nâng cấp cùng với dự án trang web Landing Page Code Footer Section

Dẫn nhập

Trong bài học kinh nghiệm trước bọn họ đang với mọi người trong nhà code HOÀN THIỆN CSS CHO FORM COMPONENT.

Bạn đang xem: Code footer đẹp

Trong bài bác hôm này bọn họ đã Code Section Footer.

Nội dung

Để tiếp thu xuất sắc bài học kinh nghiệm này chúng ta cần:

Có kiến thức cơ bạn dạng về CSS và SASS

Trong bài xích này họ đang cùng nhau:

Code HTML FooterCode CSS mang đến Footer

Code HTML Footer

Tương từ bỏ những bài trước chúng ta đang thuộc xem qua sản phẩm ở đầu cuối nhưng mà bọn họ vẫn có tác dụng được

*

Tại phía trên ta thấy bố cục tổng quan footer bao gồm 3 phần chính: Phần một là hình ảnh, 2 phần còn lại gồm mặt bắt buộc là copy right, phía trái tà tà những đường link


*

SelfTaught



Phần 1 có footer__logo footer__title được đặt vào thẻ div phổ biến là footer__logo-box

Bên trong footer__navigation footer__list chứa các footer__vật phẩm cất các footer__link

Vậy là bọn họ sẽ code kết thúc phần HTML của footer.

*

Giờ thì bắt tay vào code CSS thui làm sao.

Xem thêm: Cách Làm Gấu Bông Bằng Vải Vụn, Vải Lông, Cách Để Làm Chú Gấu Teddy (Kèm Ảnh)

Code CSS cho Footer

Chúng ta vẫn code CSS của Footer vào file _footer.scss để vào thư mục layout và import nó vào vào file main.scss

Ta thêm một variable vào _variables.scss để triển khai màu nền đến footer, tạm thời vẫn khắc tên màu là $color-grey-dark-1: #333

//abstracts/_variables.scss$color-grey-dark-1: #333;Giờ thì bọn họ vẫn code tầm thường cho chỗ footer trước:

Trước hết vẫn là màu của background thực hiện variable $color-grey-dark-1 và màu của chữ đã để là $color-grey-light-1

Ta cũng phối luôn luôn fontsize vào phần footer này là một trong.4rem với 1 chút margin mang đến top với bottom của footer.

.footer background-color: $color-grey-dark-1; padding: 10rem 0; font-size: 1.4rem; color: $color-grey-light-1;

*

Tiếp chúng ta phối property cho hình ảnh. Chúng ta sẽ để footer__logo-box chính giữa áp dụng text-align:center, và đến nó có khoảng cách với những phần sót lại bằng phương pháp để margin-bottom

&__logo-box text-align: center; margin-bottom: 8rem; Và ta vẫn phối tiếp luôn luôn nằm trong tính cho &__logo&__title

&__biểu tượng logo thì ta chỉ mix width mang lại nó làm thế nào để cho tương xứng, cùng height nhằm auto

&__logo width: 20rem; height: auto; &__title thì ta đang để display: block thì nó đã khồng còn ở trên thuộc 1 sản phẩm với logo nữa và để color nó là $color-primary

&__title display: block; color: $color-primary;

*

*

Giờ thì bọn họ đưa thanh lịch phần footer__navigation

cùng display để là inline-bloông chồng sẽ giúp đỡ border-top chỉ ôm vừa đủ phần đựng liên kết (những chúng ta cũng có thể demo bỏ display đi để xem sự không giống biết nhé :P)

Tiếp đến footer__list đã để 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 nhằm các liên kết hiện trên cùng 1 hàng và ta vẫn mix khoảng cách cho cái đó bằng phương pháp thực hiện margin-right

&__list list-style: none; &__item display: inline-block; &:not(:last-child) margin-right: 1.5rem;

*

Cuối cùng thì họ đã code phần footer__link

*

Quan gần cạnh chúng ta sẽ sở hữu được, text-transkhung là uppercase, text-decoration là none, cùng ta phải đặt display: inline-bloông xã thì mới hoàn toàn có thể phối border-radius cùng những thông số kỹ thuật khác cho footer__link được

&__link &:liên kết, &: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 thay đổi màu sắc thành màu $color-primary với lộ diện shadow cũng giống như nghiêng 1 chút. Toàn bộ nằm trong tích làm thay nào để làm element nghiêng, set shadow đã được trình làng sống những bài trước, giờ ta chỉ cần vận 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ì phối thêm transition mang lại footer__link nữa là bọn họ đang hoàn thành xong phần footer rồi.

Xem thêm: Cách Mở Bàn Phím Ảo Cho Laptop, Cách Mở Bàn Phím Ảo (On

Code SASS

Kết luận

Tại bài bác này họ đang cùng nhau kết thúc phần Code Footer

Trong bài học sau họ vẫn cùng cả nhà CODE PHẦN POPUPhường lúc clichồng vào button “enroll now” vào course section.

Cảm ơn chúng ta đang quan sát và theo dõi bài viết. Hãy để lại phản hồi cùng góp ý của mình sẽ giúp đỡ vạc triền nội dung bài viết xuất sắc rộng. Đừng quên: "Luyện tập – Thử thách – Không xấu hổ khó"


Chuyên mục: SEO