Chuyển tới nội dung
Trang chủ » Hướng dẫn tạo khung website bằng html css đơn giản

Hướng dẫn tạo khung website bằng html css đơn giản

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. …

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.

 

READ  Hướng dẫn cài theme anime cho pc chi tiết có video

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>

READ  3 cách chia sẻ video youtube lên facebook đơn giản

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
}

READ  Cách sửa lỗi IDM báo Fake Serial Number chỉ trong vài giây

Vậy là xong chúc các bạn học tốt!

Rate this post

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 *