Thỉnh thoảng trong một vài trường hợp thiết kế web bạn cần tạo một vài thẻ div theo hàng dọc và nằm ở vị trí chính giữa phía trên màn hình cửa sổ trình duyệt web.
Dưới đây đoạn mã CSS đơn giản để thực hiện việc trên.
Còn đây là mã HTML, lớp CSS sẽ được gọi thông qua Class Name.
Bạn có thể xem demo online tại http://jsfiddle.net/bnson/eeg275eb/
Dưới đây là Full Source Code.
Nếu bạn cần bất kỳ hỗ trợ nào hãy phản hồi tại đây.
Dưới đây đoạn mã CSS đơn giản để thực hiện việc trên.
.div1 {
width: 50%;
height:auto;
background-color:#A52A2A ;
margin: 0 auto;
}
.div2 {
width: 50%;
height:auto;
background-color:#FFA500 ;
margin: 0 auto;
}
.div3 {
width: 50%;
height:auto;
background-color:#008000 ;
margin: 0 auto;
}
width: 50%;
height:auto;
background-color:#A52A2A ;
margin: 0 auto;
}
.div2 {
width: 50%;
height:auto;
background-color:#FFA500 ;
margin: 0 auto;
}
.div3 {
width: 50%;
height:auto;
background-color:#008000 ;
margin: 0 auto;
}
Còn đây là mã HTML, lớp CSS sẽ được gọi thông qua Class Name.
<div class="div1">
bnson.blogspot.com
</div>
<div class="div2">
bnson.blogspot.com
</div>
<div class="div3">
bnson.blogspot.com
</div>
bnson.blogspot.com
</div>
<div class="div2">
bnson.blogspot.com
</div>
<div class="div3">
bnson.blogspot.com
</div>
Bạn có thể xem demo online tại http://jsfiddle.net/bnson/eeg275eb/
Dưới đây là Full Source Code.
<!DOCTYPE html>
<html >
<head>
<title>http://bnson.blogspot.com/</title>
<style type="text/css">
.div1 {
width: 50%;
height:auto;
background-color:#A52A2A ;
margin: 0 auto;
}
.div2 {
width: 50%;
height:auto;
background-color:#FFA500 ;
margin: 0 auto;
}
.div3 {
width: 50%;
height:auto;
background-color:#008000 ;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="div1">
bnson.blogspot.com
</div>
<div class="div2">
bnson.blogspot.com
</div>
<div class="div3">
bnson.blogspot.com
</div>
</body>
</html>
<html >
<head>
<title>http://bnson.blogspot.com/</title>
<style type="text/css">
.div1 {
width: 50%;
height:auto;
background-color:#A52A2A ;
margin: 0 auto;
}
.div2 {
width: 50%;
height:auto;
background-color:#FFA500 ;
margin: 0 auto;
}
.div3 {
width: 50%;
height:auto;
background-color:#008000 ;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="div1">
bnson.blogspot.com
</div>
<div class="div2">
bnson.blogspot.com
</div>
<div class="div3">
bnson.blogspot.com
</div>
</body>
</html>
Nếu bạn cần bất kỳ hỗ trợ nào hãy phản hồi tại đây.
No comments:
Post a Comment