Nút trong tiêu đề html

Tiêu đề tab thực chất cũng là một dạng tab mà thôi, điểm đặc biệt của nó là các thanh điều khiển nằm phía dưới cùng và nội dung sẽ nằm phía trên

Đây là ví dụ cho Tiêu đề tab

Bây giờ mình sẽ hướng dẫn các bạn cách làm chi tiết nhé

Bài viết này đã được đăng tại [free tuts. bọc lưới]

HTML

Đầu tiên các bạn viết mã HTML nhé, các bạn có thể tham khảo đoạn mã dưới đây hoặc thay đổi nội dung theo ý mình nhé

HTML

Click vào buttons để thấy tiêu đề tab tương ứng 


    
HTML
    
HTML là chữ viết tắt của HyperText Markup Language, có nghĩa là ngôn ngữ đánh dấu siêu văn bản



    
CSS
    
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần
        tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML).



    
Javascript
    
Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript
        được sử dụng rộng rãi trong các ứng dụng Website.



    
PHP
    
PHP là viết tắt của chữ "Hypertext Preprocessor", đây là một ngôn ngữ lập trình được sử dụng để viết ở phía máy chủ
        (lập trình web).


HTML
CSS
Javascript
PHP

Ở đây, mình lấy ví dụ tab 4, tương ứng với 4 div có 4 id khác nhau (id không được đặt trùng lặp nhé các bạn). Bạn cũng có thể tạo nhiều hoặc ít tùy chọn hơn theo bài viết của các bạn nhé

Mình sử dụng id vì id là duy nhất, không được đặt trùng nhau. Id này được sử dụng để kết nối giữa các tab với nội dung trên phần header của tab. Tức là khi bạn nhấp vào nút tab bất kỳ, id của tab đó sẽ được liên kết đến thẻ chứa nội dung của tab và hiển thị nội dung tương ứng với nút tab đó

CSS

Tiếp theo, các bạn thiết lập CSS cho các nút và các tacontent nhé. Tùy vào sở thích hay bài tập của bạn, bạn có thể đổi màu theo ý mình nhé

CSS

body {
    font-family: "Lato", sans-serif;
}

.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;
}

.tablink:hover {
    background-color: #777;
}

/* CSS cho các tab */
.tabcontent {
    color: white;
    display: none;
    padding: 50px;
    text-align: center;
}

#HTML {
    background-color: #efc9ab;
}

#CSS {
    background-color: #f1b5e2;
}

#Javascript {
    background-color: #4ebcef;
}

#PHP {
    background-color: #d1f681;
}

Javascript

Add javascript to control tabs

Javascript CHẠY

function openLanguage(languageName, elmnt, color) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
    document.getElementById(languageName).style.display = "block";
    elmnt.style.backgroundColor = color;

}
// Đặt button có id = "defaultOpen" để hiển thị tự động
document.getElementById("defaultOpen").click();

Các bạn chú ý nhé, trong hàm

body {
    font-family: "Lato", sans-serif;
}

.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;
}

.tablink:hover {
    background-color: #777;
}

/* CSS cho các tab */
.tabcontent {
    color: white;
    display: none;
    padding: 50px;
    text-align: center;
}

#HTML {
    background-color: #efc9ab;
}

#CSS {
    background-color: #f1b5e2;
}

#Javascript {
    background-color: #4ebcef;
}

#PHP {
    background-color: #d1f681;
}

0 có 3 đối số là

body {
    font-family: "Lato", sans-serif;
}

.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;
}

.tablink:hover {
    background-color: #777;
}

/* CSS cho các tab */
.tabcontent {
    color: white;
    display: none;
    padding: 50px;
    text-align: center;
}

#HTML {
    background-color: #efc9ab;
}

#CSS {
    background-color: #f1b5e2;
}

#Javascript {
    background-color: #4ebcef;
}

#PHP {
    background-color: #d1f681;
}

1,

body {
    font-family: "Lato", sans-serif;
}

.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;
}

.tablink:hover {
    background-color: #777;
}

/* CSS cho các tab */
.tabcontent {
    color: white;
    display: none;
    padding: 50px;
    text-align: center;
}

#HTML {
    background-color: #efc9ab;
}

#CSS {
    background-color: #f1b5e2;
}

#Javascript {
    background-color: #4ebcef;
}

#PHP {
    background-color: #d1f681;
}

2,

body {
    font-family: "Lato", sans-serif;
}

.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;
}

.tablink:hover {
    background-color: #777;
}

/* CSS cho các tab */
.tabcontent {
    color: white;
    display: none;
    padding: 50px;
    text-align: center;
}

#HTML {
    background-color: #efc9ab;
}

#CSS {
    background-color: #f1b5e2;
}

#Javascript {
    background-color: #4ebcef;
}

#PHP {
    background-color: #d1f681;
}

3. Khi bạn điền languageName vào hàm onclick trong các nút, languageName đó phải trùng với id của các thẻ div trong phần HTML mình đã tạo trước đó

Đầu vào

Ở bài học trước chúng ta đã hoàn thành công việc TẠO VIỀN CÔNG CHO NỀN - HÌNH ẢNH SỬ DỤNG CLIP PATH

Trong bài học này chúng ta sẽ cùng nhau Tạo nút và hiệu ứng của nó

---

Nội dung

Để tiếp tục kiến ​​thức tốt về bài viết này, bạn cần

Trong bài này chúng ta cùng tìm hiểu

• Code CSS Giao diện cho button
• Mã hiệu ứng dụng kích hoạt cho nút

---

Code CSS Giao diện cho button

Tua quay lai bai 1 TAO HEADER CƠ BẢN CHỌN TRANG LANDING DỰ ÁN, chúng ta đã code HTML cho button header

See our courses

   

       
        selftaught
       
       
         is how you survive
       
   
   See our courses 

Trước tiên ta sẽ tạo các thuộc tính chung cho nút bằng cách mã CSS cho. btn

.btn,
.btn:link,
.btn:visited{
   
}

in which

• liên kết là thẻ bình thường, chưa được người dùng nhấp vào
• đã truy cập là thẻ a (liên kết) đã được người dùng nhấp vào )

Nút Quan sát lại sản phẩm hoàn thiện

                                      

Ta could see

• Là thẻ a should have text-decoration default of the tag a should ta to. trang trí văn bản. không ai;
• nút chữ hoa. chuyển đổi văn bản. chữ hoa;
• Bán kính đường viền ở hai đầu. bán kính đường viền. 100px; . (1000px với 100px không có gì khác biệt)
• Tiếp theo là đặt phần đệm cho nút nhưng để làm điều đó trước hết chúng ta phải đặt. trưng bày. chặn Nội tuyến;
• At here to to. đệm. 15px 30px ;
• Font-size to 16px. cỡ chữ. 16px;

Mã CSS

.btn,
.btn:link,
.btn:visited{
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    font-size: 16px;
}

Ta continue chỉnh sửa màu nền và văn bản của nút màu bằng cách chỉnh sửa CSS của. btn-trắng

• Chỉnh màu nền trắng (#ffffff)
• Màu văn bản là màu xám (#777777)

.btn-white{
    color: #777777;
    background-color: #fff;
}

Ở đây ta thấy vị trí của nút không nằm giữa. Ta sử dụng căn chỉnh văn bản. trung tâm; . hộp văn bản

Ta was the image button mong muốn

---

Mã hiệu ứng dụng của nút

KHI HOVER( Lướt vào, trỏ vào)

Ta muốn khi di chuột nút có nhích lên 1 chút và có bóng khi di chuột, ta điều chỉnh CSS của. btn. bay lượn

• To Move Up Use Transformation. dịchY(-3px);
• Để có bóng ta sử dụng box-shadow. 0 5px 20px rgba(0,0,0,. 2);

bóng hộp. offset ngang/ offset dọc/ độ mờ / đổ bóng màu

                   

Chú thích. Đây hoàn toàn là các thông số sử dụng cá nhân, bạn có thể thay đổi sao cho thích hợp VD. dịchY(-10px);

KHI ACTIVE(khi click)

Khi kích hoạt, hãy nhấn nút nhấn xuống để tiếp tục sử dụng các thuộc tính CSS trong. btn. tích cực

• biến đổi. dịchY(-1px);
• bóng hộp. 0 5px 10px rgba(0,0,0,. 2);

Nếu trường hợp bạn nhấp vào xuất hiện viền xanh bên ngoài thì đó chính là phác thảo (cũng tùy chọn trình duyệt nữa) nên để đảm bảo mình thiết lập thêm

Vì vậy, chúng ta đã hoàn thành hiệu ứng kích hoạt của nút

Mã CSS

________số 8

---

Kết luận

Ở bài viết này, chúng ta đã xây dựng xong giao diện và hiệu ứng kích hoạt nút cho trang đích của trang web

Trong bài viết sau chúng ta sẽ cùng nhau TẠO bọc ỨNG DỤNG ZOOM OUT, ZOOM IN CỦA BUTTON KHI HOVER

Cảm ơn các bạn đã theo dõi bài viết. Vui lòng rút lại bình luận và đóng góp ý kiến ​​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 sợ khó"

---

Load down

Dự định

Nếu công việc thực hiện theo hướng dẫn không thể hiện ra các phần như mong muốn. Bạn cũng có thể tải xuống DỰ ÁN THAM KHẢO ở liên kết bên dưới

---

Thảo luận

Nếu bạn gặp bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam. com to get the support from the community