@bloggiabao
%
%
%
%

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>
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 ]

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>
456





💰

Top Sản Phẩm Công Nghệ / Thiết Bị Điện Gia Dụng /,...
Về Trang Chủ
Chiến mã đường rừng
Chợ Thủy Hải Sản
Điện Thoại Samsung Galaxy S20 FE (8GB/256GB)

Xem Giá Bán

Lenovo Legion Y90 5G Chơi Game SmartPhone Snapdragon 8 Gen1 6.92 ''144Hz AMOLED E4 5600MAh 68W Siêu NFC 64MP

Xem Giá Bán

ASUS ROG Điện Thoại 6 Phiên Bản Giới Hạn Dimensity 9000 + Tặng 5G 6000MAh Pin 6.78 "165Hz AMOLED chơi Game Điện Thoại

Xem Giá Bán

Điện thoại Gaming Tecno POVA 3 (6+5GB)/128GB - Helio G88 | 7000 mAh | Sạc nhanh 33W

Xem Giá Bán

Thotgo.asia - Tel 0968 970 650 : Xưởng Sản Xuất Thớt Gỗ Các Loại
Biến Content Thành Tiền Bạc