CSS Layout 2 cột với kích thước cố định (Fixed): Right, 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 phải được cố định một cách rõ ràng, trong khi cột nội dung ngầm cố định.

2column-fixed2

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-right: 250px; /*Thiết lập margin cho RightColumnWidth*/
 border-right: 3px solid #999;
}
#rightcolumn{
 float: left;
 width: 250px; /*Width of right column*/
 margin-left: -250px; /*Set left margin to -(RightColumnWidth) */
}

#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, #rightcolumn .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 (Fixed) - Content, Right</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="rightcolumn">
 <div class="innertube"><b>1.Cột phải (right) <em>250px</em></b> <br/>
 <script type="text/javascript">fill_menu(17)</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-02.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 *