Tạo Slide Chuyên Mục Tuyệt Đẹp (Style 2)

Tạo Slide Chuyên Mục Tuyệt Đẹp (Style 2) 2018-03-03 14:21:00

Chào nhiều nhiều bạn đọc, vào bài chưng vứt trước bản thân được bố trí theo phía dẩn nhiều nhiều bạn đọc tạo nên Slide Label khá là sang trọng lấy kể từ mặt BSW, vào bữa ni bản thân thực hiện tiếp style 2, cảm giác trượt cực kỳ ngầu thẳng thẳng :))
DEMO
Các Cách Thực Hiện
Cách một: Chèn Đoạn Code bên dưới vào trước ]]>
/* Chuyên mục home page */.chuyenmuc   background: #fff;    padding: 25px 0;.chuyenmuc-home page width: 100%; max-width: 1200px; height: 250px; overflow: hidden; margin:như máy;.chuyenmuc-home page ul width: 100%; display: table; table-layout: fixed; margin: 0; padding: 0;.chuyenmuc-home page ul li display: table-cell; vertical-align: bottom; position: relative; width: 16.666%; height: 250px; background-repeat: no-repeat; background-position: center center; transition: all 500ms ease;.chuyenmuc-home page ul li div display: block; overflow: hidden; width: 100%;.chuyenmuc-home page ul li div a display: block; height: 250px; width: 100%; position: relative; z-index: 3; vertical-align: bottom: padding: 15px 20px; box-sizing: border-box; color: #fff; text-decoration: none; transition: all 200ms ease;.chuyenmuc-home page ul li div a * opacity: 0; margin: 0; width: 100%; text-overflow: ellipsis; position: relative; z-index: 5; white-space: nowrap; overflow: hidden; -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 400ms ease; transition: all 400ms ease;.chuyenmuc-home page ul li div a h2 text-overflow: clip; phông-size: 24px; text-transform: uppercase; margin-bottom: 2px; top: 160px; margin-left: 20px;.chuyenmuc-home page ul li div a p. top: 160px; phông-size: 16px; margin-left: 20px;.chuyenmuc-home page ul li:nth-child(một) background-image: url(“https://lh6.googleusercontent.com/proxy/_WH_hWmq4bYcEB2u0ZVvcCmQEJLTtGQB1kprV1zIzZpBXnJehMnAaVbnWtERwHT6l2M=s0-d”);.chuyenmuc-home page ul li:nth-child(2) background-image: url(“https://lh4.googleusercontent.com/proxy/VPvhCU98_Vaalh4y4UCUQmML3Kmrz8JCksWufKZcrXP0d4EtEXHKmlbTWThewBmqAIk=s0-d”).chuyenmuc-home page ul li:nth-child(3) background-image: url(“https://lh5.googleusercontent.com/proxy/mTsWemJPhBCzFnvW4yUjLZLgN745UIX0oH5P-T0HolyaZ69GhaBXtCPUrBg4zK6nK7Y=s0-d”);.chuyenmuc-home page ul li:nth-child(4) background-image: url(“https://lh5.googleusercontent.com/proxy/GKTN2zaOAHQ58_zTSFme9ErNWNuYjqpfdQSC8KyJw4n6kHx6Onv7AMLQSHwJOh0tQfo=s0-d”);.chuyenmuc-home page ul li:nth-child(5) background-image: url(“https://lh4.googleusercontent.com/proxy/VI2-lN1cnor99rWUT1fwbbm_EKY1i01aA2OQINZxbaU7xNKkBI7OiFuP_gnsYul4DN0=s0-d”);.chuyenmuc-home page ul:hover li width: 8%;.chuyenmuc-home page ul:hover li:hover width: 40%;.chuyenmuc-home page ul:hover li:hover a background: rgba(0, 0, 0, 0.4);.chuyenmuc-home page ul:hover li:hover a * opacity: một; -webkit-transform: translateX(0); transform: translateX(0);
Cách 2: Chèn Đoạn Code sau vào khu vực nhiều bạn đọc lấy nhu yếu ớt mong muốn hiển thị, nên nhằm bên trên Post bài chưng vứt luận hoặc bên dưới menu

Cách 3: Lưu Template Và Tận Hưởng
Lời Kết
Như vậy là tôi vừa Hướng dẩn tới những nhiều bạn đọc xong kĩ năng và tay nghề nghỉ ngơi dưỡng tạo nên slide phân mục rất sang trọng (style 2), nhiều nhiều nhiều bạn đọc hãy chỉnh những kể từ bản thân in đậm vào code lại thành đúng đàng links trỏ về nhiều phân mục của blog nhiều nhiều bạn đọc nhé, nếu như lấy gì vướng mắc hãy nhằm lại comment bên dưới, bản thân nối tiếp giải đáp sớm chóng nhất có thể trọn vẹn tuy rằng thế cho dù tới những nhiều bạn đọc!
Chúc nhiều nhiều bạn đọc thành tựu giỏi!
view-source: khophimplus.net

Data Tạo Slide Chuyên Mục Tuyệt Đẹp (Style 2)

2018-03-03 14:21:00 #Tạo #Slide #Chuyên #Mục #Tuyệt #Đẹp #Style