Bạn chưa có Tài khoản Diễn đàn?  Tạo một tài khoản

Đăng nhập

Duy trì trạng thái đăng nhập
Không thể truy cập vào tài khoản của bạn?

Hoặc


VIETAF - VIET NAM AGRICULTURE AND FISHERIES

Diễn Đàn Chăn Nuôi Việt Nam Online

Cộng đồng Chăn Nuôi

Tham gia thảo luận, chia sẻ kiến thức lĩnh vực Chăn Nuôi và tìm cho mình cơ hội việc làm tốt nhất.

Chia sẻ giao tiếp nhanh chóng

Bạn cần lời khuyên ngay? Hãy nhấn vào biểu tượng chat ngay với hỗ trợ và thành viên khác để có được lời khuyên tốt và tin cậy nhất!

Phản ảnh đa chiều kiến thức chăn nuôi

Cập nhật nhanh các kiến thức chuyên ngành và chia sẻ với mọi người một cách trực quan nhất.

Bạn có biết?

Bạn có thể kết nối với chúng tôi qua Facebook Youtube hoặc Blogger

Kết quả cho từ khoá ""

Đăng ký
Hỗ Trợ Trực Tuyến

VIETAF - Diễn Đàn Chăn Nuôi Việt Nam

VIETAF - Diễn Đàn Chăn Nuôi Việt Nam | Giúp nhà nông chăn nuôi thành công

Lên đầu trang
Chào mừng bạn đến với diễn đàn VIETAF - Diễn đàn Chăn Nuôi Việt Nam Online
Địa chỉ hiện tại của diễn đàn là www.vietaf.com
Vui lòng gửi cho chúng tôi một email về info@dntgiang.com nếu bạn có bất kỳ góp ý nào về diễn đàn và nhận 10 điểm tín nhiệm
Bạn có nguyện vọng đóng góp vào diễn đàn? Gửi yêu cầu về info@dntgiang.com và tham gia với chúng tôi ngay.
LIÊN HỆ QUẢNG CÁO info@dntgiang.com

Thành viên nổi bật



You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down   Thông điệp [Trang 1 trong tổng số 1 trang]

1 #on 02/05/10, 02:19 pm

avatar

Mr.Winni
avatar

Mr.Winni

Ảnh Bìa : gcover_photo

Giới tính : Nam

Tổng số bài gửi : 838

Uy tín : 87

Tuổi : 26

Status : Hãy làm thuê như một ông chủ


Administrator

Administrator
Một thủ thuật đơn giản cho phép bạn tạo một thanh Navbar hiển thị nội dung cố định trên blog của bạn. Thủ thuật cho phép bạn có thể đặt thanh Navbar này ở bất cứ vị trí nào, ví dụ : trên cùng (top), bên dưới(bottom), trái trên(left-top), phải dưới (right-bottom)...
Với thủ thuật này, bạn có thể tạo nhiều ứng dụng, ví dụ như:

+ Tạo một thanh menu truy cập
+ Tạo một dòng thông báo
+ Tạo một danh sách các bài viết hot (kèm theo hiệu ứng chạy chữ)
+ Hoặc bất cứ thứ gì mà bạn muốn hiển thị (một lời khuyên là : chỉ nên cho phép hiển thị nội dung theo 1 hàng, để không chiếm chỗ trên không gian của blog bạn


Bây giờ ta bắt đầu thủ thuật:

Chèn đọan code CSS


Code:
div.fixed-navbar {
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
position: fixed; top: 0; left: 0;
text-align: left;
width: 100%;
border: 2px #00f solid;
}
div.fixed-navbar a:hover {
color: #00f;
}
+ background-color: #ccc; : màu nền của thanh navbar, nếu bạn dùng ảnh nền thì đổi code lại thành background: #ccc url(link ảnh) ;
+ position: fixed; top: 0; left: 0; : code xác định vị trí hiển thị của thanh navbar trên blog. Thuộc tính fixed là để cho thanh cố định khi di ta di chuyển chuột. còn thuộc tính left top dùng để xác định vị trí (cái này mình sẽ nói thêm ở bên dưới)
+ width: 100%; : độ rộng của thanh Navbar
+ border: 2px #00f solid; tạo đường bo cho thanh navbar, nếu bạn không thích thì cứ bỏ nó đi.

Save

Tạo 1 widget HTML/javascript hoặc vô head và dán code HTML bên dưới vào:
Code:
<div class="fixed-navbar">
{nội dung mà bạn muốn hiển thị trên thanh navbar}
</div>

☼ Sau đây là một số ví dụ về các vị trí hiển thị
a. Hiển thị trên cùng với độ rộng là 100% :(hình minh họa như ở phía trên).
Thay thế đọan code bên dưới cho dòng code
Code:
position: fixed; top: 0; left: 0; và width: 100%;
ở đọan code trên.
Code:
position: fixed; top: 0; left: 0;
width: 100%;

b. Hiển thị phía bên dưới bên trái với độ rộng là 200px
Thay thế đọan code bên dưới cho dòng code
Code:
position: fixed; top: 0; left: 0; và width: 100%;
ở đọan code trên.
Code:
position: fixed; bottom: 0; left: 0;
width: 200px;

Còn các vị trí : bên dưới bên phải, phía trên bên phải thì cũng tương tự, bạn chỉ cần thay vào là bottom:0; right: 0; hoặc top: o; right: 0;

Nguồn: Fandung
Chúc các bạn thành công.



Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down   Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

Style of Google. Code by Juskteez