Thiết kế web giá rẻ

Bởi Chuyên cung cấp web giá rẻ chất lượng đứng đầu công nghệ với đội ngũ kỹ sư đam mê tin học 04.6293.3306 - 0933.339826 - 097.355.1833 5 sao trên 12916người dùng
phóng to thu nhỏ tab Hỗ trợ trực tuyến
Khu vực Hà Nội
Khu vực Hồ Chí Minh
    
phóng to thu nhỏ tab Thống Kê Truy Cập
Hôm nay :  84 
Tuần :  543 
Tháng :  2.119 
Năm :  27.891 
Tất cả :  67.738 
12 Người đang online

Float trong thiết kế web (bài 3)

Bản chất Float trong css

Đây là 1 thuộc tính rất quan trọng trong CSS vì nó được dùng chủ yếu trong thiết kế web hiện nay.

1. Thuộc tính Float

Thuộc tính float này cho phép các thành phần hiển thị bên trái (float: left) hay bên phải (float: right) của thành phần mẹ, di chuyển lên lấp đầy khoảng trống bên trái hoặc bên phải nếu có. Đây là thành phần được sử dụng rất nhiều khi thiết kế giao diện web hiện nay.

Ví dụ: Giả sử một tấm hình và một đoạn văn bản, bài viết sẽ sử dụng float:left và css như sau:

1 img{float: left}

Code HTML

1 <div id="wapper">
2     <img src="logo.jpg" />
3     <p>Ở đây tôi sử dụng một tấm hình có chiều rộng 200px. Thành phần mẹ (div) có chiều rộng 350px, như vậy còn trống 150px bên phải tấm hình. Khi cho hình <em>float: left</em>, nội dung văn bản sẽ được di chuyển lên để lấp đầy khoảng trống 150px trong thành phần mẹ wapper. Do đó tạo nên hiệu ứng bao quanh hình ảnh</p>
4 </div>

Ta có kết quả như sau:



Ta nhìn vào hình ảnh trên có thể hiểu được float:left, nghĩa là thành phần đó sẽ di chuyển về bên trái hoặc bên phải nếu bạn dùng float:right so với thành phần mẹ của chúng, các thành phần đó sẽ di chuyển lên trên để lấp đầy khoảng trống.

HMS trân trọng. ^^
 

Công Ty Thiết Kế Web SEO HMS

Điện thoại : 0973.551.833 or 0933.339.826 or 01698.007.885

Email : thietkewebsite@thietkewebseovn.com

Website: http://thietkewebseovn.com/

 

 

Bài viết liên quan

Lời nói đầu
 
Học HTML cơ bản(bài 1)
 
Các thẻ hay dùng nhất của HTML trong thiết kế web (bài 2)
 
Clear trong thiết kế web (bài 4)
 
Margin trong css
 
Padding trong thiết kế web (Bài 6)
 
viết tắt của margin, padding (bài 8)
 
Hướng dẫn chèn popup vào website
 
opencart là gì
 

Viết đánh giá

Họ và tên:


Đánh giá của bạn: Lưu ý: Không hỗ trợ HTML!

Bình chọn: Dở            Hay

Nhập mã bảo vệ:



 Há»� trợ trá»±c tuyến HMS
Mai Ng�c Bách