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

[sourcecode language=”html”]
<!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>
[/sourcecode]

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

 

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 *