Chào mừng các bạn đến với web thiết bị mầm non Hà Vũ: Chúc Quý Khách Thành Đạt Trong Cuộc Sống. mọi thông tin vui lòng liên hệ trên.
ebelumnya tôi đã được nói chuyện về làm thế nào để tạo ra một menu xem tab (menu với các tab), nhưng trong việc đưa ra trình đơn xem tab chúng ta phải chỉnh sửa mẫu HTML. Có lẽ rất nhiều blogger đã sợ thất bại để nó có thể làm hỏng mẫu, nhưng không hư hỏng nếu đã sao lưu trước khi chỉnh sửa các mẫu đầu tiên.
Sau khi thử nghiệm, cuối cùng tôi đã cố gắng để đưa các mã kịch bản trực tiếp trong các tiện ích, nó làm việc. Bằng cách tập hợp tất cả các mã hiện có, làm cho tab menu xem không còn cần phải cẩn thận chỉnh sửa mẫu HTML. Nếu bạn bè của tôi đã đọc bài viết đầu tiên của tôi , người bạn của tôi ở lại với nhau tất cả các mã và đặt tiện ích, không biết thứ tự của các mã?
Vâng chỉ, bây giờ bạn có để đăng nhập cho blogger , sau đó các yếu tố trang bấm vào Thêm tiện ích và chọn các HTML / Javascript . Sau đó thêm các mã kịch bản xem tab menu của nó như sau:
<style type="text/css">
div.TabView div.Tabs
{
float: left;
display: block;
width: 80px; / * Chiều rộng Box Tab * /
chiều cao: 22px; / * Chiều cao trên menu chính * /
văn bản -align: center; / * Chức vụ Tiêu Tab Menu * /
margin: 5px 0px 0px 3px; / * Vị trí Box Tab * /
background-color: # 000; / * màu nền Box Tab * /
padding-top: 2px; / * không gian phía trên * /
border: 1px solid # ffffff; / * Tab hộp biên giới màu * /
border-bottom: 1px solid # ccc; / * biên giới phía dưới hộp màu tab * /
font-family: "Arial, Helvetica, sans-serif" , Arial; / * Font Box Tab * /
font-weight: 900; / * Độ dày của tab Text box * /
}
div.TabView div.Tabs a: hover, div.TabView div.Tabs a.Active
{
background-color: # 736F6E / * màu nền của hộp tab chính * / }
div.TabView div.Pages
{
rõ ràng: cả hai;
biên giới: 1px solid # cccccc; / * Màu đường viền nội dung * /
overflow: hidden;
background-color: # ffffff; / * Bên trong hộp màu nền * /
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; / văn bản Khỏang cách * hộp nội dung * /
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</ style> <form action="tabview.html" method="get"> <div id="TabView" class="TabView"> <div style = "width: 300px ; "class =" Tabs "> <a> <span style = "color: # fff "> Tab 1 </ span> </ a> <a> <span style = "color: #fff "> Tab 2 </ span> </ a>
</ Div>
<div style = "width: 300 px, chiều cao: 200 px, "class =" Trang "> <div class="Page"> <div class="Pad"> nội dung 1 </ div> </ div> <div class="Page"> <div class="Pad"> nội dung 2 </ div> </ div>
</ Div> </ div> </ form> <script src="https://masolis-javascript.googlecode.com/svn/trunk/tab-viewmaskolis.js"> </ script><script loại = "text / javascript "> tabview_initialize ('TabView') </ script> </ div>
- Bài viết màu vàng là một mô tả của mỗi mã. Xin vui lòng thiết lập giá trị như mong muốn
- Bài viết màu cam là màu sắc của Tab
- Bài viết màu xanh là Tab tiêu đề
- Số 300 trên 'rộng' biểu thị chiều dài của hộp và 200 'chiều cao' cho thấy thành phố cao. Hãy thay đổi giá trị kích thước của mẫu của bạn.
- Bold văn bản là các nội dung của quan điểm tab. Hãy thay thế bằng văn bản, liên kết, biểu ngữ hoặc widget của bạn.
Nếu bạn muốn thêm một menu tab mới chỉ cần thêm mã đó nhấp nháy bên dưới. Vì vậy, trước đó hướng dẫn tab xem widget mà không có thuế thu nhập doanh nghiệp HTML, một ví dụ về tab này xem bạn có thể thấy trong blog này.
Có thể là hữu ích!
Tag: Thủ thuật Blogspot
Bạn Đã Xem Chưa ?
