Website ngày càng trở nên phổ biến, nó là một cửa hàng trực tuyến hay một cuốn sách điện tử, giúp người dùng trải nhiệm một cách tuyệt vời. Hôm nay mình sẽ hướng dẫn các bạn xây dựng một bộ khung website chuẩn bằng html css.
Tao khung website bằng html css
Đầu tiên các bạn khai báo mã html như sau:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="header">Đây là phần đầu</div>
<div class="clear"></div>
<div class="nav">Menu</div>
<div class="clear"></div>
<div class="content">Nội dung</div>
<div class="sidebar">Sidebar-right</div>
<div class="clear"></div>
<div class="footer">Chân trang</div>
</div>
</body>
</html>
Khai báo mã css
*{
padding: 0px;
margin: 0px
}
body{
font-family: arial sans-serif;
font-size: 13px;
box-sizing: border-box;
}
.clear{clear: both;}
.wrapper{
width: 960px;
height: auto;
overflow: hidden;
margin: 0 auto;
padding: 0;
background: #ccc
}
.header{
width: 100%;
height: 150px;
background: #000;
overflow: hidden;
padding: 10px
}
.nav{
width: 100%;
height: 40px;
background: #222;
color: #fff;
line-height: 40px;
padding: 10px;
overflow: hidden;
}
.content{
width: 70%;
float: left;;
background: #FF6633;
height: 400px;
padding: 10px;
overflow: hidden;
}
.sidebar{
overflow: hidden;
width: 25%;
height: 400px;
background: #669900;
float: right;
padding: 10px
}
.footer{
width: 100%;
height: 140px;
background: #336600 ;
padding: 10px;
margin-top: 5px
}
Vậy là xong chúc các bạn học tốt!
Điểm 4.6/5 dựa vào 87 đánh giá