Bạn nên dùng XML Sitemap cho trang web Bạn nên sử dụng IE Tester Không nên lạm dụng quảng cáo HTML Cơ bản – Phần 1 Căn bản PHP – Bài 4 – Phần 2 Đừng làm nửa chừng rồi ngưng Chương 2 – jQ
Trang 1Bạn nên dùng XML Sitemap cho trang web Bạn nên sử dụng IE Tester
Không nên lạm dụng quảng cáo HTML Cơ bản – Phần 1 Căn bản PHP – Bài 4 – Phần 2 Đừng làm nửa chừng rồi ngưng Chương 2 – jQuery Selectors Tạo WordPress Theme – Custom Page Giới thiệu về CSS
Pseudo Class
PHP CO BẢN – NÂNG CAO
tìm hiểu cú pháp và phương thức PHP Phép toán và phát biểu có điều kiện trong php
$_POST và $_GET Làm quen đối tượng Session Khai báo hàm, chèn tập tin và tập tin dùng chun Cách xử lý chuỗi, mảng, kiểu DataTime Thao tác trên cơ sở dữ liệu MySQL PHP và Database
Phân trang với PHP
Xóa, Cập nhật dữ liệu dạng mảng Tạo Mailing List: PHP & Mysql
RECENT COMMENTS
Clear và Float
Clear và Float là kỹ thuật dùng rất nhiều trong thiết kế giao diện bằng
CSS với hai tính năng cùng tên là Clear và Float Float dùng để tách
một thành phần bất kỳ khỏi cách hiển thị thông thường của nó để tạo chỗ cho những thành
phần ở sau di chuyển lên và phủ đầy chỗ trống nếu có Clear dùng để ngăn không cho thành
phần ở dưới di chuyển lên trên đề lấp vào chỗ trống
Ví dụ bạn có 2 đoạn văn bản, bạn chỉ muốn đoạn văn thứ nhất bao quanh hình ảnh và đoạn
văn thứ hai thì vẫn nằm ở dưới Theo luật trên thì cữ có chỗ là đoạn văn thứ 2 cũng sẽ tràn
lên để lấp chỗ trống Nếu bạn không muốn điều này xảy ra bạn có thể sử dụng Clear để nó
không tràn lên được
1 Float
Float chủ yếu dùng để căn chỉnh hình ảnh sao cho chữ sẽ bao quanh hình ảnh Nhưng nó
cũng được áp dụng nhiều trong việc thiết kế giao diện sử dụng CSS Ở ví dụ dưới đây sẽ
bao gồm một hình logo của izwebz và một đoạn văn bản Tôi sẽ cho hình được float:
left và đoạn văn bản được giữ nguyên
Để tạo được hiệu ứng này bạn cần có một thẻ <img> và <p>
1 img {float: left ;}
1 <div id = 'bao_quanh' >
2 <img src = "images/ball.png" alt = "ball" />
3 <h3>Box Model</h3>
4 <p>Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực
5 sự của box cho dù khi tôi thêm giá trị padding bằng 5px vào
6 mỗi bên trái phải, nó cũng không làm tăng độ lớn Mà ngược lại,
7 nó sẽ bị đầy lùi vào biên là 5px </p
8 </div> <! - - End #bao_quanh - - >
CSS
CSS Cơ bản
jQuery jQuery Cơ bản
Phát triển Web Bài viết, kinh nghiệm
Videos Các thể loại
WordPress Tutorials, Hacks
Trang 2QUẢNG CÁO
Your Ad Here for Free
$20 in Free Clicks to place your ad here Join Free now!
www.your-site.com
Tạo WordPress Theme – Dựng xHTML ( 16 )
chicken_roll : hahaha hay quá hết chổ trê (thanks you very much much…) nghe anh nói đây ko
Tạo WordPress Theme – Slice hình ( 22 )
chicken_roll : ui ui hay quá cảm ỏn nhiều học rất nhiều
từ anh và Anh CS thanks phát cho có
Tạo WordPress Theme – Search form và Random Posts ( 15 )
DiVIVu : @ajimoto & tuyen: Làm thế này là được bạn ạ:
<script type="text/javascript&
PHP Căn Bản – Bài 9 ( 40 )
pham duy : Vang ban angelthao_0984884679 da noi dung do chung t con chan chu gi nua ma khong giup
doan : ai muốn xem bằng file swf thì down KMP về mà dùng cái này còn hay hơn media của win nhiều
Lập trình web và sự Lười nhác ( 23 )
kien : Không còn gì để nói :-s
Tạo trang web đầu tiên ( 41 )
ho nga : ?
ho nga : huhu sao làm web mệt dzữ vậy a hai ui…?
Tóm lại khi bạn cho tấm hình float: left bạn khiến nó bị dịch chuyển sang phía tận
cùng bên trái (hoặc phải nếu float: right) so với thẻ mẹ của nó là div
id=”bao_quanh” Đoạn văn bản cũng sẽ di chuyển tương tự so với thẻ mẹ của nó, do đó
tạo ra hiệu ứng bao quanh lấy hình ảnh Cho nên nếu bây giờ bạn không muốn chữ bao
quanh hình nữa mà muốn nó tạo ra 2 cột song song với nhau, bạn chỉ cần tăng giá trị
margin-left cho đoặn văn thành 150px
Khi bạn cho tấm hình float sang bên trái và đoạn văn bản có lề trái bằng với độ lớn của tấm
hình, thì hiệu ứng bao xung quanh hình sẽ mất đi mà thay vào đó bạn được 2 cột song song
với nhau Đây là nguyên lý cơ bản nhất để tạo ra giao diện có nhiều cột sử dụng float Miễn
là mỗi thành phần khi được float đều có một giá trị độ rộng nhất định thì nó sẽ xếp song
song với nhau và tạo ra cột (nếu diện tích đủ rộng) Nếu bạn làm như vậy với 3 thẻ <div>
float: left và có độ rộng nhất định, bạn sẽ được 3 cột song song Sau đó bạn có thể
thêm các thành phần vào từng cột để tạo nên giao diện
2 Clear
Luôn đi chung với Float là Clear Clear thực chất chỉ là một tính năng chống không cho đoạn
văn ở dưới tràn lên trên để lấp vào chỗ trống Như đã nói ở trên, khi bạn dùng float bạn có
1 p {margin - left: 150px ;background: #faf3c7 ;}
2 img {float: left ;}
Trang 3Your Ad Here for Free
$20 in Free Clicks to place your ad here Join Free now!
www.your-site.com
Your Ad Here! BIDVERTISER ADS
Lý do là vì tất cả các thành phần đều được float: left do vậy hình và đoạn văn ở dưới
nó sẽ cố phủ đầy chỗ trống mà tấm hình và đoạn văn thứ nhất để lại khi bị float: left
Và cũng chính vì lẽ đó mà tạo ra hiệu ứng ta không mong đợi Có nhiều cách xử lý vấn đề
này, tôi sẽ hướng dẫn bạn cụ thể hơn trong video tutorial về Clear và Float Còn bây giờ đây
là cách phổ biến nhất và cũng gây ra nhiều tranh cãi nhất
Để đạt được mục đích sao cho tấm hình và đoạn văn thứ 2 “ngoan ngoãn” chịu chui xuống
dưới, chúng ta sẽ thêm một thẻ div trống vào dưới đoạn văn thứ nhất
Sau đó ở trong CSS, bạn chỉ việc thêm đoạn code sau:
Với một thẻ <div> và một class dùng để clear, bây giờ thì nó sẽ xuất hiện như ý rồi
01 <div id = 'bao_quanh' >
02 <img src = "images/ball.png" alt = "ball" />
03 <h3>Clear và Float</h3>
04 <p <! Nội dung bị cắt ngắn > </p
05
06 <div class = "clear" ></div> <! Thẻ div trống với class="clear" >
07
08 <img src = "images/ball.png" alt = "ball" />
09 <p <! Nội dung bị cắt ngắn > </p
10 </div> <! - - End #bao_quanh - - >
1 clear {clear: both ;}
Trang 4Sở dĩ biện pháp này gây tranh cãi là vì chúng ta thêm một thành phần không phải là nội dung vào phần nội dung cốt để đạt được mục đích Điều này đi ngược lại với nguyên lý của CSS là tách rời nội dung khỏi cách trình bày Cho nên nếu bạn không muốn có một thẻ div trống trong code HTML của mình bạn cũng có thể làm theo cách dưới đây
Bạn copy đoạn code sau và cho vào stylesheet
Bây giờ nếu bạn muốn clear nó thì bạn không phải tạo một thẻ div trống nữa mà chỉ việc khai báo class=”clearfix” vào thẻ mẹ chưa các thành phần float Trong ví dụ ở trên bạn thêm vào phần sau
Với cách này bạn không cần phải thêm một thẻ div nữa mà vẫn hiện ngon lành Cho đến bây giờ cách này cũng rất phổ biến vì nó hiển thị tốt trên mọi trình duyệt
Tôi cũng có làm một Video tutorial về chủ đề này, bạn có thể tham khảo thêm
Cá nhân tôi vẫn luôn sử dụng phương pháp này bởi vì nó đơn giản, gọn nhẹ và không cầu
kỳ Chỉ có một thẻ div trống thêm vào phần nội dung cũng chẳng chết ai >”< Chắc có lẽ phải chờ đến khi CSS3 ra đời và có cách khắc phục tốt hơn và dễ dàng hơn
01 clearfix:after {
02 visibility: hidden ;
03 display: block ;
04 font - size: 0
05 content: " " ;
06 clear: both ;
07 height: 0
08 }
09 * html clearfix { zoom: 1 ; } /* IE6 */
10 *:first - child+html clearfix { zoom: 1 ; } /* IE7 */
1 <div id = "bao_quanh" class = "clearfix" >
Compatible Implant
Trilobe Compatible Implant The $145.00 Alternative
www.BlueSkyBio.com
Trang 57 Comments ( Comment bài này )
« Position Property Độ lớn thực sự của Box »
Absolute Position trong thiết kế giao diện
Thứ bậc trong XHTML
Box Model
Độ lớn thực sự của Box
Phùng Anh Tú says:
March 14, 2010 at 10:29 pm
Mọi người cho em hỏi là khi em làm cái post thumnail, mặc dù đã để ảnh là foat:left, nhưng vì sao phần chữ vẫn không chui lên chếm chỗ :-/
Xem hình:
http://img682.imageshack.us/img682/7655/visaoc.jpg Code của em như sau:
<div class="entry">
< ? php
if ( has_post_thumbnail() ) the_post_thumbnail(array( 70,70 ), array( 'class' => 'alignleft' ));
else echo '';
? >
< ? php the_excerpt('Read the rest of this entry »'); ? >
</div>
Đoạn code trên nằm trong file index.php
và cái đoạn code css như sau:
.alignleft { float: left;
padding:0 0 0 80px;
} Nhưng sao nó không được ( Mọi người giúp em nhé Em đã đọc bài post thumbnail của anh DW rồi.
Reply
Trang 6Leave a comment ( Chọn hình đại diện )
Quang Chương says:
April 5, 2010 at 6:56 pm
Hic! cũng biết CSS rồi nhưng đọc vẫn thấy hay, mà hình như em đọc một bài giống y như bài anh ở một Forum VN, nhìn mấy cái hình thấy quen, chắc tụi nó cóp trộm bài
a rồi post lên lòe thiên hạ.
Reply
vui tính says:
April 7, 2010 at 6:16 am
Nói thật hay nói kháy tác giả bài viết này thế =))
Reply
Demon Warlock says:
April 7, 2010 at 6:30 am
Em yên tâm là nếu anh có đăng lại bài viết của ai đó, anh đều trích dẫn nguồn Cho nên bài viết em đọc lần trước mà giống hình thì có thể là họ copy của anh.
Reply
Quang Chương says:
April 7, 2010 at 10:25 pm
Bạn vui tính đừng có nghĩ xấu như vậy, đó cũng là tình trạng các trang web ở VN bây
jo, có đến 99% là cop bài nhau rồi làm của mình Như những trang khá nổi như: dantri.com.vn, vnexpress.net, ngoíao.net… mà còn có tình trạng đó cơ mà.
Reply
Trần quốc vĩnh says:
April 26, 2010 at 2:58 am
Bài viết hay, ngắn gọn xúc tích, cảm ơn tác giả nhiều
Reply
cuong says:
May 28, 2010 at 5:50 am
Anh ơi em muốn hỏi cái này mà ko biết post ở đâu, em có 1 bài tập tạo 1 trang web layout bằng table, khi em gõ 1 đoạn văn bản vào 1 ô trong table dài hơn chiều rộng
đã định trước thì cái table đó lại dãn ra làm hỏng hết layout Anh có thể chỉ cho em biết làm sao để cố định kích thước của nó ko ạ, cố định nhưng có thể dãn ra khi Ctrl+ nha anh Thanks
Reply
Tên bạn
Trang 7Chọn kiểu gõ: Tự động TELEX VNI Tắt
Luu ý khi post comment:
Không "bóc tem" topic
Dùng lời lẽ có văn hoá và lịch sự
Xem trang FAQs trước khi hỏi
Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
Wrap code trong dấu `backtick` (dấu trên phím Tab)
Izwebz is solemnly hand coded and designed
from scratch by Demon Warlock It is also very
proud of being powered by WordPress, which
is an exceptionally well written and beautiful
CMS
Rules are not made to be broken at Izwebz Bạn không được tự ý copy và phát hành lại nội dung của izwebz nếu chưa được sự đồng ý của tôi.
Biết tôn trọng và cư xử hòa nhã với mọi người
Không "bóc tem" bài viết.
Izwebz được quyền xóa những comment nào không phù hợp với nội dung của trang web
Câu hỏi thường gặp Liên hệ
Tác giả Bản quyền
Trang web vẫn đang trong quá trình phát triển
về nội dung Do vậy nếu bạn có khả năng hãy đóng góp bài viết hoặc bạn có thể quảng cáo trang web đến những người mà bạn biết Được vậy tôi sẽ rất biết ơn bạn.
Submit