Tìm hiểu CSS 360 Plus của yahoo phần 4

Chia sẻ: Sdfasfs Sdfsdfad | Ngày: | Loại File: PDF | Số trang:8

Thêm vào BST

Báo xấu

82
lượt xem 5
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Ebook CSS 360plus ver 1.0#comment_new rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} /* Modun bạn bè*/ #friendlist_module rc_bd .rc_bc .bd ul li {background:url(Link ảnh)

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Tìm hiểu CSS 360 Plus của yahoo phần 4

Ebook CSS 360plus ver 1.0 #comment_new rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} /* Modun bạn bè*/ #friendlist_module rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} /*Bài viết mới nhất*/ #article_new rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} /* Thống kê */ #statistic rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;} /*Blog về tôi*/ #mod-tagged-frd-article .rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} ảnh trên biểu diễn minh họa cho .mod-relatives, code là : .mod-relatives .bd ul li {background:transparent url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} người viết Changtraiiudoi@ymail.com 27. Hiệu ứng thu nhỏ, tự động kéo dài modun tự tạo khi để chuôt vào Code này sẽ giúp bạn thu ngắn modun tự tạo chỉ để nó hiện ra 1 chiều dài nhất định, khi di chuột vào modun đó, nó sẽ tự động kéo dài modun đó ra. Chúng ta có thể thấy ngay một ứng dụng rất hay, đó là tạo 1 list nhạc rất dài ở modun tự tạo, nhưng chúng ta chỉ để nó hiện ra 1 chiều dài nhất định, khi người nghe để chuột vào modun đó, nó sẽ tự động kép dài và hiện thị đầy đủ nội modun đó. Code css: hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 #user_mod_1000X .rc_bd .rc_bc .bd .user-mod-holder {height:200px;} #user_mod_1000X .rc_bd .rc_bc .bd .user-mod-holder:hover {height:auto;} X là giá trị của modun tự tạo từ 1 đến 10. 200px là giá trị bạn muốn nó hiện thị, chúng ta có thể tùy ý thay đổi. người viết Changtraiiudoi@ymail.com Code giúp thu nhỏ chữ và ảnh. Khi di chuột đến, chữ và ảnh sẽ tự động chở về đúng kích cỡ. Để làm được như vậy, bước đầu tiên, ta copy code này, dán vào css Code này dán vào css: #blog_quote{font-size:5px;font-style:italic;color:#FF99FF;background:#000066;}#blog_quote:hover {font- size:12px;font-weight:bold;font-style:normal;color:#CC99AA;background:transparent;}#blog_img img {height:100px;}#blog_img img:hover {height:100%;} Sau đấy nếu muốn sử dụng thì trong phần bài viết thêm vào thẻ div để sử dụng lại Style ID này (code bên chế độ HTML): Code: Nội dung đoạn text muốn sử dụng hiệu ứng Để sử dụng hiệu ứng này cho bức ảnh ta dùng code: hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 người viết NoA 28. Hiệu ứng tạo nút ấn trong modun Hiệu ứng khi tạo nút khi ấn vào đường link trong modun /*Modun bình luận mới nhất*/ #comment_new .rc_bd .rc_bc .hd{height:auto;} #comment_new .rc_bd .rc_bc .bd ul li:hover{background:url(Link ảnh - Ảnh sẽ tự động hiện khi để chuột vào link trong modun);} /*Modun bạn bè*/ #friendlist_module .rc_bd .rc_bc .hd{height:auto;} #friendlist_module .rc_bd .rc_bc .bd ul li:hover{background:transparent url(Link ảnh - Ảnh sẽ tự động hiện khi để chuột vào link trong modun);} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 /*Thư mục*/ #folder .rc_bd .rc_bc .hd{height:auto;} #folder .rc_bd .rc_bc .bd ul li:hover{background:url(Link ảnh - Ảnh sẽ tự động hiện khi để chuột vào link trong modun );} /*Bài viết mới nhất*/ #article_new .rc_bd .rc_bc .hd{height:auto;} #article_new .rc_bd .rc_bc .bd ul li:hover{background:url(Link ảnh - Ảnh sẽ tự động hiện khi để chuột vào link trong modun);} /*Ảnh biểu diễn cho .mod-relatives, và đây là code*/ .mod-relatives .rc_bd .rc_bc .hd{height:auto;} .mod-relatives .rc_bd .rc_bc .bd ul li:hover{background:url(Link ảnh - Ảnh sẽ tự động hiện khi để chuột vào link trong modun);} người viết changtraiiudoi@ymail.com 29. Làm trái tim,mưa,tuyết rơi,bướm bay...khi di chuột vào các link Blog a:hover {text-decoration:none;color:#EE4949;text-decoration:none;background-image:url(link ảnh);} người viết co0l.l0ve'sblog 30. Code sửa lỗi phông chữ, blog bị đen khi làm trong suốt. Hôm nay rất là iu đời nên sẽ post code "sửa lỗi phông chữ" ( - tức là nét chữ ko được đẹp và mịn nhưng blog 360 yahoo cũ, nét chữ có viền đen bao quan khi viết hoa, trông lem nhem...) và l ỗi khi làm trong suốt blog nhưng phần lớn blog đều bị đen ở viền, ở nền bài viết. ^^! 2 lỗi trên chỉ gặp ở trên máy tính sửa dụng trình duyệt hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 Internet Explorer ( IE ), ko gặp ở trình duyệt khác, tuy nhiên trình duyệt IE có đến 75% máy tính sử dụng, và ở VN con số này còn lớn hơn nhiều nữa, vì vậy hôm nay mình chia sẻ với các bạn code sửa các lỗi trên. Mình khuyên các bạn nên sử dụng trình duyệt IE để xem và thiết kế blog, gần như 90% các website được thiết kế để hiện thị hiện thị và chạy ổn định tốt trên IE. Đây là ảnh minh họa lỗi phông chữ: Blog khi chưa dùng code sửa lỗi có nét chứ ko được đẹp và mịn. Chữ in đậm có viền đen bao quanh: Blog sau khi đã dùng code sủa lỗi, nét chữ mịn, ko có viền đen bao quanh chữ: Ảnh minh họa, blog của mình khi ko dùng code sửa lỗi, blog trong suốt bị biến thành màu đen: hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 Ảnh minh họa, blog của mình sau khi dùng code sửa lỗi, blog hiện thị hoàn toàn bình thường: Các bạn có biết vì sao blog của bạn và rất nhiều người khác bị lỗi như trên ko ? hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 Câu trả lời rất đơn giản, với blog 360 plus khi sửa dụng thanh trượt 100% để làm trong suốt nền bài viết bạn sẽ bị suốt hiện lỗi trên và theo mình đó là nguyên nhân duy nhất làm suốt hiện những lỗi trên, nếu các bạn để mức trong suốt của thanh trược như ban đầu thì blog của các bạn vẫn mắc lỗi trên. Nói tóm lại, lỗi trên sẽ suốt hiện và ko biết mất, lỗi suốt hiện ngay lần đầu tiên các bạn dùng thanh trượt. Và cách duy nhất để sửa là dùng code của mình Hình minh họa, khi dùng thanh trượt này sẽ suốt hiện những lỗi trên ngay: Và đây là code sửa lỗi: mod-alist-full .pagination{background:transparent; Các bạn lưu ý là mod-alist-full .pagination{background:transparent; chứ ko phải là mod-alist-full .pagination{background:transparent;} Không có ký tự "}" và dấu chấm "." như những code thông thường. Khuyến cáo: Nên để code trên ở cuối bảng mã css. Ảnh minh họa: người viết Changtraiiudoi@ymail.com hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com