Monday, June 5, 2017

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


THỦ THUẬT SEO

Bài liên quan

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.


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!



Biểu tượng cảm xúc ( Copy và dán xuống phần Comment )
Hãy Comment Những Gì Bạn Chưa Hiểu Hay Đơn Giản Là Để góp phần Tạo Động Lực Cho Tác Giả
• Không SPAM bạn nhé!
EmoticonEmoticon