bởi admin lúc Fri, Apr 20 '18 12:38 PM | Lần xem 186 | Lần tải 2

Ebook
CSS 360plus
ver 1.0
Welcome to Changtraiiudoi’s Blog & HaTim’s Blog
Hỏi đáp – Đóng góp
Check for updatas
Code css cho Yahoo! 360plus
Về Ebook CSS 360plus ver 1.0
Giới thiệu về CSS và cách chèn code css
Ý nghĩa của các code trong việc viết code css
Ảnh nền tất cả các trang
Theme 2 mảnh Top - Bottom
Modun tên blog
Modun blast
Chỉnh sửa chữ và phông trong tiêu đề
Đặt ảnh nền cho tiều đề
Thay và thêm icon cho tiều đề modun
Ảnh nền cho modun
Tạo nút Home
Thay icon tâm trạng
Hình nền tiêu đề bài viết
Hình nền Modun bài viết
Code toolbar phần coment
Ảnh nền tổng số trang, cuối modun bài viết
Làm hình nền trang comment
Làm ảnh nền phần tiêu đề bài viết và nick comment
Thay đổi tag bài viết
Ngăn dòng bài viết
Xóa đường viền
Tạo đường viên trong suốt
Thiết kế Modun Profile
Trang trí nóc nhà Yahoo! 360plus
Thêm hoặc thay đổi icon trong các modun có sẵn và tạo đường viền ngăn cách
Hiệu ứng thu nhỏ, tự động kéo dài modun tự tạo khi để chuôt vào
Hiệu ứng tạo nút ấn trong modun
Làm trái tim,mưa,tuyết rơi,bướm bay...khi di chuột vào các link Blog
hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook
CSS 360plus
ver 1.0
Code sửa lỗi phông chữ, blog bị đen khi làm trong suốt.
01. Về Ebook CSS 360plus ver.1.0
Yahoo! 360plus là một sản phẩm Blog với nhiều tính năng hấp dẫn người dung như sử dụng CSS, hỗ trợ kéo
thả khi thiết kế, upload ảnh trực tiếp lên Blog, không giới hạn dung lượng lưu trữ, quản lý và trình bài bài viết
theo thư mục, giao diện trực quan, ngôn ngữ tiếng Việt…Vì thế, ngay sau khi ra đời nó đã tạo nên cơn sốt cho
làng Blogger Việt Nam. Nhưng lại có nhiều bạn vẫn không tránh khỏi lúng túng khi muốn tạo cho mình một trang
log đẹp, mang phong cách, cá tính của chính mình. Và để giúp các bạn điều này, cũng như đỡ mất thời gian
tìm kiếm hướng dẫn thiết kế trên mạng, changtraiiudoi@ymail.com và hatim87uyennhi@yahoo.com đã biên tập
ebook này - bao gồm tất cả những code css cho 360plus, từ code tạo ảnh nền đơn giản đến những code tạo
hiệu ứng phức tạp. Trong đây có nhiều bài viết chúng mình sưu tầm từ nhiều nguồn trên mạng, thấy những code
đó có trên nhiều địa chỉ và không phân biệt được đâu là nguồn thật !... Mong nhận được các ý kiến đóng góp
cũng như các phát hiện thiếu xót trong ebook về css đầu tiên này.
Welcome to Changtraiiudoi’s Blog & HaTim’s Blog
Hỏi đáp – Đóng góp
Check for updatas
02. Giới thiệu về CSS và cách chèn code css
CSS là một loại ngôn ngữ dàn trang, định kiểu cho các thành phần của trangWeb hay Blog. Nói vậy chung
chung quá, nôm na CSS như là người đi mua kiểu bàn ghế, kiểu đồ đạc trong nhà theo ý của chủ nhà và sắp
xếp chúng cũng theo ý ông chủ luôn. Cụ thể là nó làm nhiệm vụ biểu diễn fonts (phông chữ), colours (màu sắc),
margins (canh lề), lines (các loại đường, nét), height (chiều cao), width (độ rộng), background images (ảnh nền
các loại), xác định vị trí cho các khối…
CSS từ viết tắt của Cascading Style Sheet tạm dịch là bảng kiểu xếp chồng.
Đầu tiên bạn vô phần Thiết Kế ~~> Theme ~~> Chế độ tự chỉnh sửa ~~> Click nút Tiếp ~~> Hiện ra cái khung
có bảng màu, kéo xuống dưới thấy chữ CSS, bên cạnh đó có cái khung cho điền text. Đó là phần điền CSS.
hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
Ebook
CSS 360plus
ver 1.0
03. Ý nghĩa của các code trong việc viết code css
Trang trí các Khung kiểu liệt kê : Khung Thống kê (#statistic), Bài viết mới (#article_new), Lời bình mới
(#comment_new), Thư mục (#folder)...
Ở các khung này ngoài lớp để đặt ảnh của nền ra (.bd), chúng ta còn 2 lớp để đặt ảnh nữa là (ul -lớp bao gồm 1
khối liệt kê) và (li - lớp bao gồm từng dòng liệt kê). Lớp (li) thường đã được dùng để tạo 1 icon đầu dòng cho
mỗi liệt kê. (Ví dụ lệnh: #article_new .bd ul li {background:transparent
url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/images03/orange_book_open.gif) no-repeat
center left;} dùng để tạo 1 hình quyển sách nhỏ trước mỗi tiêu đề bài viết mới)
Ở các khung Bài viết mới, Thư mục, Bạn bè chỉ có 1 lớp (ul), riêng ở khung Lời bình mới có thể có nhiều hơn 1
lớp (bằng số bài có lời bình mới được hiện ra).
Ảnh đặt tại lớp (ul) sẽ ở trên ảnh đặt tại lớp (.bd) do vậy nếu muốn nhìn thấy ảnh của lớp (.bd) thì không được tô
màu lớp (ul). Ở đây, lệnh HEIGHT được sử dụng để tăng chiều cao của khung cho thích hợp với ảnh đặt thêm
vào. Ví dụ code CSS trang trí khung Thống Kê của tôi:
#statistic .rc_bd .rc_bc .bd
{background:#ffffee url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/Background/05bgc.gif);}
Lệnh trên là chọn màu nền và ảnh nền của lớp .bd (trong ví dụ này ảnh nền đã che hết màu nền, đưa vào chi để
minh họa)
#statistic .rc_bd .rc_bc .bd ul
{height:400px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/5.gif) no-repeat bottom
left;}
Lệnh tiếp theo này là để thay đổi chiều cao của phần liệt kê (cũng là của khung) và chọn 1 ảnh để ở phần phía
dưới của khung.
Trang trí cho khung Giới thiệu bản thân (#profile_highlight)
Các bạn đã từng trang trí 360 plus bằng CSS hẳn biết rằng 360 plus bổ ra hẳn 6 lớp ảnh để trang trí đường viền
cho mỗi khung lần lượt là:
.rc, .rc div : dùng để tạo đường viền trên đỉnh;
.rc_bd, .rc_bd .rc_bc: dùng để tạo đường viền 2 bên trái phải;
.rc_ft, .rc_ft div: dùng để tạo đường viền dưới đáy;
Nếu bạn không dùng viền cho các khung, hoặc có thể trang trí đường viền bằng lệnh BORDER thì bạn sẽ có 6
lớp thêm để đặt ảnh cho khung của mình. (quá nhiều, ai mà dùng hết được cơ chứ!)
Nếu bạn dùng viền cho khung Giới thiệu bản thân rồi, bạn vẫn có thể đặt thêm một hình vào để trang trí Khung
này đẹp thêm bằng cách sử dụng #profile_highlight_module đặt trùng và ở dưới #profile_highlight. Lúc này, bạn
phải nhiều lần sử dụng lệnh HEIGHT. Tham khảo ví dụ dưới đây:
#profile_highlight .hd, #profile_highlight .ft
{height:0px;}
Lệnh trên để đảm bảo rằng tiêu đề và phần đáy của khung Tự giới thiệu có chiều cao bằng 0
#profile_highlight .bd {font-family:PAPYRUS;font-size:21px;font-
weight:bold;color:#000000;height:400px;background:url(http://i266.photobucket.com/albums/ii277/babybao_ilove
u/flower/695072k2m8tfrqy2.gif) no-repeat bottom center;}
Lệnh trên chọn hình đặt ở phía dưới của khung và chỉnh chiều cao khung cho hợp lý với ảnh đặt vào;
#profile_highlight_module {height:400px;background:#FFFFFF
url(http://i266.photobucket.com/albums/ii277/babybao_iloveu/background%201/070307hnc204_m_cola71a.gif);}
Lệnh trên là để chọn màu nền, hình nền và chỉnh chiều cao nền của khung để nó không vượt quá đường viền.
hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com
bởi admin lúc Fri, Apr 20 '18 12:38 PM

Yahoo! 360plus là một sản phẩm Blog với nhiều tính năng hấp dẫn người dung như sử dụng CSS, hỗ trợ kéo
thả khi thiết kế, upload ảnh trực tiếp lên Blog, không giới hạn dung lượng lưu trữ, quản lý và trình bài bài viết
theo thư mục, giao diện trực quan, ngôn ngữ tiếng Việt…Vì thế, ngay sau khi ra đời nó đã tạo nên cơn sốt cho
làng Blogger Việt Nam. Nhưng lại có nhiều bạn vẫn không tránh khỏi lúng túng khi muốn tạo cho mình một trang
blog đẹp, mang phong cách, cá tính của chính mình. Và để giúp các bạn điều này, cũng như đỡ mất thời gian
tìm kiếm hướng dẫn thiết kế trên mạng, changtraiiudoi@ymail.com và hatim87uyennhi@yahoo.com đã biên tập
ebook này - bao gồm tất cả những code css cho 360plus, từ code tạo ảnh nền đơn giản đến những code tạo
hiệu ứng phức tạp. Trong đây có nhiều bài viết chúng mình sưu tầm từ nhiều nguồn trên mạng, thấy những code
đó có trên nhiều địa chỉ và không phân biệt được đâu là nguồn thật !... Mong nhận được các ý kiến đóng góp
cũng như các phát hiện thiếu xót trong ebook về css đầu tiên này.
.pdf 787088.pdf
Kích thước: bytes
Lần tải: 0 lần
Download