CSS Layout 2 cột với kích thước cố định (Fixed): Left, Content

Kiểu bố cục: Fixed (cố định kích thước)
Số cột của trang : 2 cột
Quy định các cột : fixed – fixed

Layout này bao gồm 2 cột được cố định kích thước, với chiều rộng mặc đinh của trang là 900px. Với các: cột bên trái được cố định một cách rõ ràng, trong khi cột nội dung ngầm cố định.

2column-fixed

CODE LAYOUT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Layout 2 cột cố định kích thước: Left, Content - CSS Fixed Layout</title>
<style type="text/css">

body{
	margin:0;
	padding:0;
	line-height: 1.5em;
	font-family: arial;
	font-size: 14px;
	background: #ada189;
}

b{font-size: 120%;}
em{color: red;}

#maincontainer{
	width: 900px; /*Khai báo kích thước của main container*/
	margin: 0 auto; /*Đưa bố cục website ra năm giữa*/
	background: #fff;
}
#topsection{
	background: #dccbaf;
	height: 90px; /*Chiều cao của top section*/
}
#topsection h1{
	margin: 0;
	padding-top: 20px;
}
#contentwrapper{
	float: left;
	width: 100%;
}
#contentcolumn{
	margin-left: 250px; /*Thiết lập margin cho LeftColumnWidth*/
	border-left: 3px solid #999;
}
#leftcolumn{
	float: left;
	width: 250px; /*Kích thước cột bên trái*/
	margin-left: -900px; /*Thiết lập margin cho -(MainContainerWidth)*/
}
#footer{
	clear: left;
	width: 100%;
	border-top: 3px solid #999;
	text-align: center;
	padding: 15px 0;
}
#footer a{
	color: #575551;
}
.innertube{
	margin: 0 10px; /*Margin nội dung nằm trong thẻ innertube */
	text-align: justify;
}
#contentwrapper .innertube, #leftcolumn .innertube { margin: 10px;}
</style>

<script type="text/javascript">
/*** Hàm javascript phụ: Hàm này sử dụng vòng lặp để in ra nội dung demo, giúp chúng ta đỡ tốn công gõ lại. ***/
var text=["Đây là nội dung demo", "Chào mừng đến với WebtopViet.com", "Học Thiết kế website chuyên nghiệp, Đào tạo SEO Google"]
function filltext(words){
	for (var i=0; i<words; i++)
	document.write(text[Math.floor(Math.random()*3)]+" ")
}

var text2 = ["Học Thiết kế website"]
function fill_menu(words){
	document.write("<ul>");
	for (var i=0; i<words; i++)
	document.write("<li>" + text2 + "</li>")
	document.write("</ul>");
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Layout: 2 cột cố định kích thước - CSS Fixed Layout</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>2. Nội dụng (content column): <em>Fixed</em></b> <br/> <script type="text/javascript">filltext(48)</script></div>
</div>
</div>

<div id="leftcolumn">
	<div class="innertube"><b>1.Cột trái (left column) <em>250px</em></b> <br/>
		<script type="text/javascript">fill_menu(10)</script>
	</div>
</div>

<div id="footer"><a href="#">Coppy right &copy; 2014 by Webtopviet.com - Học thiết kế website chuyên nghiệp</a></div>

</div>
</body>
</html>

Coppy code vào file .html sử dụng Editor Notapad ++ để xem được chuẩn nhất !

Xem Demo : http://www.webtopviet.com/example/css/layout/2collumn-fixed-01.html

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *