ads Blog content marketing Digitalnomad.vn Hợp tác marketing

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>&lt;div style=&quot;clear: left&quot;&gt;&lt;/div&gt;<br>
&lt;div style=&quot;clear: right&quot;&gt;&lt;/div&gt;<br>
&lt;div style=&quot;clear: both&quot;&gt;&lt;/div&gt;<br>
&lt;div style=&quot;clear: none&quot;&gt;&lt;/div&gt;.</p>
</div>

<div class = "columnB">
<h2>Column B</h2>
<p>&lt;style&gt;<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>
&lt;/style&gt;</p>
</div>

<div class = "columnC">
<h2>Column C</h2>
<p>&lt;style&gt;<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>
&lt;/style&gt;</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>
Bài Viết Ngẫu Nhiên

Bạn có thể thích những bài đăng này

  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Xưởng sản xuất gỗ ghép cao su / gỗ ghép thông / thớt gỗ / xưởng may rèm cửa
Quảng cáo Ads2
Quảng cáo Ads3

1 Phút dành cho quảng cáo 2

NCC thớt gỗ, ván ghép, mdf
Tắt Ads

Xem Page Nhà Tài Trợ Click here

Tắt Ads

Máy Ép Chậm
Nồi chiên không dầu
Điện Thoại
LapTop Giá Rẻ
Máy xay sinh tố
1368.com.vn