• Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership from 10$ a month today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

Admin

Well-Known Member
Staff member
Administrator
1/ 2 cột
Thêm code css này vào trang:
HTML:
* {margin: 0; padding: 0}
body{font: 14px arial}
#mainWap{ 
    width: 950px; 
    margin: 0 auto;
}
#header{
    background: green;
	margin-bottom: 10px;
}
#left{
    float: left; 
    width:  200px; 
    background: #f98000; 
	min-height: 450px;
}
#right{
    float: right; 
    width: 700px;
    background: #e4e4e4; 
    min-height: 450px;
}
#footer{
    background: green; 
    margin-top: 10px;
}
.clr{clear: both;}
#header, #footer, #left, #right{ padding: 10px }
p{margin-bottom: 10px; line-height: 20px}
Code HTML:
HTML:
<div id="mainWap">
	<div id="header">
	<!-- Nội dung của header -->
	</div>
	 <div id="left">
	<!-- Nội dung của cột trái -->
	</div>
	<div id="right">
	<!-- Nội dung của cột phải -->
	</div>
	<div class="clr"></div> <!-- Cái thẻ div trống này để clear cái float đi -->
	<div id="footer">
	<!-- Nội dung của footer -->
    </div>
</div>
2/ 3 cột
Code CSS:
HTML:
* {margin: 0; padding: 0}
body{font: 14px arial}
#mainWap{ 
    width: 950px; 
    margin: 0 auto;
}
#header{
    background: green;
	margin-bottom: 10px;
}
#left{
    float: left; 
    width:  200px; 
    background: #f98000; 
	margin-right: 10px
}
#center{
	float: left; 
    width:  470px; 
    background: #cfcfcf; 
	padding: 10px;
}
#right{
    float: right; 
    width: 200px;
    background: #e4e4e4; 
}
#footer{
    background: green; 
    margin-top: 10px;
}
.clr{clear: both;}
#header, #footer, #left, #right{ padding: 10px }
p{margin-bottom: 10px; line-height: 20px}
Code HTML:
HTML:
<div id="mainWap">
        <div id="header">
		<!-- Nội dung header -->
        </div>
        <div id="left">
        <!-- Nội dung của cột trái -->
        </div>
        <div id="center">
		<!-- Nội dung của cột giữa -->
        </div>
		<div id="right">
		<!-- Nội dung của cột phải -->
		</div>
        <div class="clr"></div>
        <div id="footer">
		<!-- Nội dung của footer -->
        </div>
</div>
3/ Giao diện 3 cột có chiều cao bằng nhau (bằng chiều cao của cột nhiều nội dung nhất)
Giống như phần 2 và thêm code sau vào phần
HTML:
<head></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript">
	    $(document).ready(function(){
	     var max_height = 0;
	     //Duyệt qua 3 cột để lấy kích thước của cột lớn nhất
	     $("#left,#center,#right").each(function(){
	         if($(this).height() > max_height)
	          max_height = $(this).height();
	     });
	     //Gán độ cao 3 cột theo giá trị max_height
	     $("#left,#center,#right").height(max_height);
	    });
</script>
4/ (Bonus) Banner quảng cáo nằm 2 bên:
HTML:
<div style="position: fixed; bottom: 50px; left: 0px;background-color:transparent;">
    <!-- Chèn banner bên trái vào đây -->
</div>
<div style="position: fixed; bottom: 50px; right: 0px;background-color:transparent;">
	<!-- Chèn banner bên phải vào đây -->
</div>
P/S: tất cả những code trên đều là cơ bản, ai muốn màu mè gì thì tùy :D
 

Facebook Comments

Similar threads
Thread starter Title Forum Replies Date
V Hướng dẫn tạo logo giống Xenforo Xenforo 4
dammechiase Dowload phần mềm UltraISO Mới nhất phần mềm tạo ổ đĩa ảo mới nhất full key bản chuẩn kèm hướng dẫn Phần mềm 0
Admin Hướng dẫn tạo con vật thật sự trên màn hình điện thoại bằng Animal 4D+ Thảo luận chung 0
Admin Hướng dẫn tạo video karaoke đơn giản và chi tiết nhất 2019 Video, clip 4
SuperTroll Share Hướng dẫn tự tạo App Android để truy cập vào wapsite của mình Android, iOS 0
V Hướng Dẫn Tạo Forum Trên Xtgem Wap builder, wapego, xtgem, wen.ru, wapka, wap4 1
B Hỏi Adm hướng dẫn mình tạo filelist đơn giản cho wap xtgem với? HTML & CSS 2
A Xin hướng dẫn tạo forum xenforo chi tiết dễ hiểu Thảo luận wap việt 4
D Share Hướng dẫn tạo cấu trúc php sửdụng hàm GET hoặc POST All Shared Scripts 0
H Hướng dẫn Hướng dẫn tạo chuyên mục cho Xenforo Xenforo 0
Admin Hướng dẫn chi tiết tạo paypal bằng hình ảnh Thảo luận chung 1
roboconz Hướng dẫn Hướng dẫn ae tạo tên miền .tk đây Mã nguồn wap 4
nhokzodanh Share hướng dẫn tạo wap upload wapka Wap builder, wapego, xtgem, wen.ru, wapka, wap4 2
G : [b]Hướng dẫn chi tiết tạo logo[/b] Hình ảnh 0
Yeukodamnoi Hướng dẫn cách chế tạo súng hơi Ý tưởng, góp ý, sáng kiến mới của thành viên 10
X Hướng dẫn Hướng dẫn tạo trang riêngtrong vbb 4 Vbulletin 1
H Hỏi Tạo domen.tk trên điện thoại được ko anh em ơi.nếu được xin a e hướng dẫn nhé! Thanks rất nhiều.tớ v Hosting & Domain Share 5
H Hướng dẫn tạo Sitemap cho các blogger sử dụng Blogspot Thảo luận SEO 0
N Hướng dẫn Hướng dẫn tạo database trên cPanel Hosting / Domain 0
Della007 Hỏi Xin anh thắng hướng dẫn tạo database host directadmin Hỏi đáp về domain & hosting 3
2 Thảo luận Mong A thắng hay congtu24, kidbloob và pro john trên host cp11 tạo top hướng dẫn chi tiết Johncms 10
H Hướng dẫn tạo subdomain Hướng dẫn Tạo Subdomain Hosting & Domain Free 0
yeuthenao [Share] Hướng dẫn sử dụng PSD để tạo Logo Video, clip 0
L Hỏi Ae nào hướng dẫn mình tạo page tren facebook tks Thảo luận SEO 2
Yeukodamnoi Share zip html hướng dẫn tạo wap Mã nguồn wap 6
Admin [Full HD 1080] Hướng dẫn tạo add-on Xenforo 1/9 - Creating your own add-on Xenforo 0
A Help Wapka xin hướng dẫn tạo phần trang nhanh Wap builder, wapego, xtgem, wen.ru, wapka, wap4 1
Admin Hướng dẫn sử dụng PSD để tạo logo + PSD Thiết kế đồ họa 2
Admin Hướng dẫn tạo ổ USB flash cài đặt Windows 8 Sử dụng, chia sẻ, hỏi đáp 0
Admin Hướng dẫn tạo javascript tự động thay đổi hình ảnh, link JavaScript / Ajax 2
K Hướng Dẫn Tạo Ảnh Nền Cho Chatbox Trong Vbb Mã nguồn web 1
K [Hướng Dẫn] Edit Templeate Tạo Tcat Ảnh Cho Riêng Từng Box Mã nguồn web 0
Admin Hướng dẫn tạo Banner Flash chuyển ảnh Kiến thức lập trình 0
Admin Hướng dẫn tạo phân vùng chủ trong Ubuntu Sử dụng, chia sẻ, hỏi đáp 0
T Xin hướng dẫn tạo user database trên mobile Kiến thức lập trình 4
N Help Xin hướng dẫn tạo subdomain ở host khác nhau Hỏi đáp về domain & hosting 0
Admin Video hướng dẫn tạo user/password admin khi người share code ko đưa thông tin này Mã nguồn web 7
Admin Hướng dẫn tạo hình nền chatbox - ngầu hơn Vbulletin 1
Admin Hướng dẫn tạo database trong cpanel PHP 3
congtust24 Hướng dẫn tạo logo ở header style mobile HTML & CSS 32
Admin Hướng dẫn tạo giao diện timeline HTML & CSS 0
N Xin hướng dẫn tạo banner cho profile Thảo luận chung 4
M Hướng dẫn tạo đầu trọc vĩnh viễn cho ai chưa biết Ý tưởng, góp ý, sáng kiến mới của thành viên 0
Kidblood Hướng dẫn tạo phòng chát ngoài trang chủ yourwap.eu Wap builder, wapego, xtgem, wen.ru, wapka, wap4 17
Admin Hướng dẫn tạo block (quảng cáo 1 bên hông forum vbb4) Vbulletin 0
Admin Hướng dẫn tạo quảng cáo chạy dọc 2 bên forum vbb Vbulletin 0
Admin Hướng dẫn tạo prefix (tiền tố) cho vbb4.x.x Add-ons 0
Admin Hướng dẫn tạo trang hiển thị trình duyệt khi truy cập PHP 0
Admin Hướng dẫn tạo logo team chi tiết từ a đến z Thủ thuật ĐTDĐ 17
Admin Hướng dẫn tạo đường dẫn topic style mobile Vbulletin 0

Similar threads

New posts New threads New resources

Back
Top