Layout html đơn giản P1
<!DOCTYPE html>
<html>
<head>
<title>
Website Layout so61 1
</title>
<style>
* {
box-sizing: border-box;
}
/* CSS property for header section */
.header {
background-color: green;
padding: 15px;
text-align: center;
}
/* CSS property for nevigation menu */
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: green;
}
/* CSS property for content section */
.columnA, .columnB, .columnC {
float: left;
width: 31%;
padding: 15px;
text-align:justify;
}
h2 {
color:green;
text-align:center;
}
/* Media query to set website layout
according to screen size */
@media screen and (max-width:600px) {
.columnA, .columnB, .columnC {
width: 50%;
}
}
@media screen and (max-width:400px) {
.columnA, .columnB, .columnC {
width: 100%;
}
}
</style>
<style>
/* Style for footer section */
.footer {
background-color: green;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<!-- header of website layout -->
<div class = "header">
<h2 style = "color:white;font-size:200%">
Template Ma64u 1
</h2>
</div>
<!-- nevigation menu of website layout -->
<div class = "nav_menu">
<a href = "#">home</a>
<a href = "#">Wood</a>
<a href = "#">Contact</a>
</div>
<!-- Content section of website layout -->
<div class = "row">
<div class = "columnA">
<h2>Column A</h2>
<p><div style="clear: left"></div><br>
<div style="clear: right"></div><br>
<div style="clear: both"></div><br>
<div style="clear: none"></div>.</p>
</div>
<div class = "columnB">
<h2>Column B</h2>
<p><style><br>
.firstcharacter {<br>
color: #903;<br>
float: left;<br>
font-family: Georgia;<br>
font-size: 75px;<br>
line-height: 60px;<br>
padding-top: 4px;<br>
padding-right: 8px;<br>
padding-left: 3px;<br>
}<br>
</style></p>
</div>
<div class = "columnC">
<h2>Column C</h2>
<p><style><br>
a:link {<br>
color: green;<br>
background-color: transparent;<br>
text-decoration: none;<br>
}</p>
<p>a:visited {<br>
color: pink;<br>
background-color: transparent;<br>
text-decoration: none;<br>
}</p>
<p>a:hover {<br>
color: red;<br>
background-color: transparent;<br>
text-decoration: underline;<br>
}</p>
<p>a:active {<br>
color: yellow;<br>
background-color: transparent;<br>
text-decoration: underline;<br>
}<br>
</style></p>
</div>
</div>
<div style="clear: both"></div>
<!-- footer Section -->
<div class = "footer">
<a href = "#">Link A</a>|
<a href = "#">Link B</a>|
<a href = "#">Link C</a>
</div>
</body>
</html>
<html>
<head>
<title>
Website Layout so61 1
</title>
<style>
* {
box-sizing: border-box;
}
/* CSS property for header section */
.header {
background-color: green;
padding: 15px;
text-align: center;
}
/* CSS property for nevigation menu */
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: green;
}
/* CSS property for content section */
.columnA, .columnB, .columnC {
float: left;
width: 31%;
padding: 15px;
text-align:justify;
}
h2 {
color:green;
text-align:center;
}
/* Media query to set website layout
according to screen size */
@media screen and (max-width:600px) {
.columnA, .columnB, .columnC {
width: 50%;
}
}
@media screen and (max-width:400px) {
.columnA, .columnB, .columnC {
width: 100%;
}
}
</style>
<style>
/* Style for footer section */
.footer {
background-color: green;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<!-- header of website layout -->
<div class = "header">
<h2 style = "color:white;font-size:200%">
Template Ma64u 1
</h2>
</div>
<!-- nevigation menu of website layout -->
<div class = "nav_menu">
<a href = "#">home</a>
<a href = "#">Wood</a>
<a href = "#">Contact</a>
</div>
<!-- Content section of website layout -->
<div class = "row">
<div class = "columnA">
<h2>Column A</h2>
<p><div style="clear: left"></div><br>
<div style="clear: right"></div><br>
<div style="clear: both"></div><br>
<div style="clear: none"></div>.</p>
</div>
<div class = "columnB">
<h2>Column B</h2>
<p><style><br>
.firstcharacter {<br>
color: #903;<br>
float: left;<br>
font-family: Georgia;<br>
font-size: 75px;<br>
line-height: 60px;<br>
padding-top: 4px;<br>
padding-right: 8px;<br>
padding-left: 3px;<br>
}<br>
</style></p>
</div>
<div class = "columnC">
<h2>Column C</h2>
<p><style><br>
a:link {<br>
color: green;<br>
background-color: transparent;<br>
text-decoration: none;<br>
}</p>
<p>a:visited {<br>
color: pink;<br>
background-color: transparent;<br>
text-decoration: none;<br>
}</p>
<p>a:hover {<br>
color: red;<br>
background-color: transparent;<br>
text-decoration: underline;<br>
}</p>
<p>a:active {<br>
color: yellow;<br>
background-color: transparent;<br>
text-decoration: underline;<br>
}<br>
</style></p>
</div>
</div>
<div style="clear: both"></div>
<!-- footer Section -->
<div class = "footer">
<a href = "#">Link A</a>|
<a href = "#">Link B</a>|
<a href = "#">Link C</a>
</div>
</body>
</html>
Ivietpr.com Blog Cá Nhân, Nền Tảng Blogger, Giao Diện Fletro : Xây dựng và phát triển nội dung, theo số liệu phân tích trên cấu trúc content của nhật ký trực tuyến digitalnomad.vn [ Blog Chạy Thử Nghiệm Đa Cấu Trúc ]
