[Hướng dẫn] tạo giao diện 2 cột, 3 cột

Admin · Jun 21, 2012

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

[Hướng dẫn] tạo giao diện 2 cột, 3 cột

Admin

Well-Known Member

Facebook Comments

Similar threads

New posts New threads New resources

New posts

New threads

new_resources