Chạy Thử CSS Nhóm các phần tử giống nhau trong thẻ DIV

Trình soạn thảo - Chạy Thử CSS Nhóm các phần tử giống nhau trong thẻ DIV

Kết quả - Chạy Thử CSS Nhóm các phần tử giống nhau trong thẻ DIV

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Chạy Thử CSS Nhóm các phần tử giống nhau trong thẻ DIV</title>
<style>
#header{width:100%;float:left;height:auto;min-height:30px;bacground:red;color:#fff;margin-bottom:10px}
#khungchinh1{width:100%;float:left;height:auto;margin-bottom:10px}
#ktrai{width:80%;float:left;height:auto;min-height:200px;background:green;color:#fff}
.spham{width:24%;float:left;margin-right:1.3%;height:auto;background:#fff}
.spham1{float:right;margin-right:0px}
.hspham{width:100%;float:left;height:auto;margin-bottom:5px}
.hspham img{width:100%;float:left;height:auto}
.tenspham{width:100%;float:left;height:auto;}
.tenspham h3{color:#000;font-size:15px;font-weight:bold}
#kphai{width:20%;float:right;height:200px;background:red;color:#fff}
#footer{width:100%;height:auto;min-height:30px;background:black;color:#fff}
</style>
</head>
<body>
<h1>Chạy Thử CSS Nhóm các phần tử giống nhau trong thẻ DIV</h1>

<div id="header">Header</div>
<div id="khungchinh1">
 <div id="ktrai">
   <div class="spham">
      <div class="hspham"><img src="https://webmoi.vn/thumb/526x274/1/upload/tinblog/the-div-trong-html.jpg" alt="sản phẩm" title="sản phẩm"></div>
      <div class="tenspham"><h3>Tên sản phẩm</h3></div>
   </div>
   <div class="spham">
      <div class="hspham"><img src="https://webmoi.vn/thumb/526x274/1/upload/tinblog/the-div-trong-html.jpg" alt="sản phẩm" title="sản phẩm"></div>
      <div class="tenspham"><h3>Tên sản phẩm</h3></div>
   </div>
   <div class="spham">
      <div class="hspham"><img src="https://webmoi.vn/thumb/526x274/1/upload/tinblog/the-div-trong-html.jpg" alt="sản phẩm" title="sản phẩm"></div>
      <div class="tenspham"><h3>Tên sản phẩm</h3></div>
   </div>
   <div class="spham spham1">
      <div class="hspham"><img src="https://webmoi.vn/thumb/526x274/1/upload/tinblog/the-div-trong-html.jpg" alt="sản phẩm" title="sản phẩm"></div>
      <div class="tenspham"><h3>Tên sản phẩm</h3></div>
   </div>
 </div>
 <div id="kphai">Khung Phải</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
  • Chạy Thử CSS Nhóm các phần tử giống nhau trong thẻ DIV nằm trong bài viết Thẻ DIV trong HTML
  • ★★★★★ ★★★★★