DIV Preview Tool
Nội dung ví dụ
Sử dụng ô xổ xuống ở trên để chuyển đổi giữa các ví dụ và xem cách thẻ div có thể được sử dụng trong các tình huống khác nhau.
CODE TẠO CÔNG CỤ DIV PREVIEW TOOL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV Preview Tool</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #282c34;
color: white;
text-align: center;
}
h1 {
padding: 20px;
background-color: #61dafb;
margin: 0;
}
#example-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
#example-selector {
padding: 10px;
background-color: #444;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 250px;
}
#example-selector:hover {
background-color: #61dafb;
color: #282c34;
}
#example-display {
display: flex;
width: 80%;
height: 150px;
background-color: #98d1e9;
border-radius: 10px;
position: relative;
justify-content: center;
align-items: center;
color: black;
}
#css-code {
width: 80%;
background-color: #444;
color: #61dafb;
padding: 10px;
font-family: 'Courier New', Courier, monospace;
margin: 20px auto;
border-radius: 5px;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
min-height: 80px;
}
#css-description {
font-size: 16px;
color: #ffffff;
margin-top: 10px;
}
#instructions {
margin: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>DIV Preview Tool</h1>
<div id="example-container">
<select id="example-selector">
<option value="1">Kích thước cố định</option>
<option value="2">Bố cục lưới</option>
<option value="3">Hình nền</option>
<option value="4">Đổ bóng</option>
<option value="5">Bo góc</option>
<option value="6">Hiệu ứng hover</option>
<option value="7">Dùng Flexbox</option>
<option value="8">Bố cục 2 cột</option>
<option value="9">Vị trí tuyệt đối</option>
<option value="10">Hiệu ứng chuyển động</option>
</select>
<div id="example-display">
<div class="example-content">Nội dung ví dụ</div>
</div>
<div id="css-code"></div>
<div id="css-description"></div>
<div id="instructions">
<p>Sử dụng ô xổ xuống ở trên để chuyển đổi giữa các ví dụ và xem cách thẻ div có thể được sử dụng trong các tình huống khác nhau.</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const exampleSelector = document.getElementById('example-selector');
const exampleDisplay = document.getElementById('example-display');
const cssCode = document.getElementById('css-code');
const cssDescription = document.getElementById('css-description');
const examples = {
'1': {
style: 'width: 300px; height: 100px;',
description: 'Thiết lập kích thước cố định cho thẻ div (300px x 100px).',
},
'2': {
style: 'display: grid; grid-template-columns: repeat(3, 1fr);',
description: 'Tạo bố cục lưới với 3 cột đều nhau bên trong thẻ div.',
content: function(parent) {
const items = ['1', '2', '3'];
items.forEach(item => {
const div = document.createElement('div');
div.className = 'grid-item';
div.textContent = item;
parent.appendChild(div);
});
}
},
'3': {
style: 'background-image: url("https://via.placeholder.com/400x150"); background-size: cover;',
description: 'Áp dụng hình nền cho thẻ div và đảm bảo hình nền bao phủ toàn bộ vùng chứa.',
},
'4': {
style: 'box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);',
description: 'Thêm hiệu ứng đổ bóng vào thẻ div để tạo chiều sâu.',
},
'5': {
style: 'border-radius: 15px;',
description: 'Bo tròn các góc của thẻ div với bán kính 15px.',
},
'6': {
style: 'transition: background-color 0.3s ease; background-color: #98d1e9;',
description: 'Thêm hiệu ứng chuyển đổi màu nền khi di chuột qua thẻ div.',
events: {
mouseover: function () { exampleDisplay.style.backgroundColor = '#61dafb'; },
mouseout: function () { exampleDisplay.style.backgroundColor = '#98d1e9'; }
}
},
'7': {
style: 'display: flex; justify-content: center; align-items: center;',
description: 'Sử dụng Flexbox để căn giữa nội dung của thẻ div theo cả chiều ngang và chiều dọc.',
},
'8': {
style: 'display: flex; flex-direction: row;',
description: 'Tạo bố cục 2 cột bên trong thẻ div bằng Flexbox.',
content: function(parent) {
const columns = [
{ text: 'Cột 1', color: '#444' },
{ text: 'Cột 2', color: '#666' }
];
columns.forEach(col => {
const div = document.createElement('div');
div.className = 'column';
div.style.flex = '1';
div.style.padding = '10px';
div.style.backgroundColor = col.color;
div.textContent = col.text;
parent.appendChild(div);
});
}
},
'9': {
style: 'position: relative;',
description: 'Sử dụng vị trí tuyệt đối để đặt một phần tử con tại vị trí cụ thể trong thẻ div.',
content: function(parent) {
const div = document.createElement('div');
div.style.position = 'absolute';
div.style.top = '10px';
div.style.left = '10px';
div.style.backgroundColor = '#61dafb';
div.style.padding = '5px';
div.textContent = 'Vị trí tuyệt đối';
parent.appendChild(div);
}
},
'10': {
style: 'transition: transform 0.5s ease;',
description: 'Thêm hiệu ứng phóng to khi di chuột qua thẻ div.',
events: {
mouseover: function () { exampleDisplay.style.transform = 'scale(1.2)'; },
mouseout: function () { exampleDisplay.style.transform = 'scale(1)'; }
}
}
};
function updateExample(exampleId) {
const example = examples[exampleId];
exampleDisplay.style = '';
while (exampleDisplay.firstChild) {
exampleDisplay.removeChild(exampleDisplay.firstChild);
}
exampleDisplay.style.cssText = example.style || '';
if (typeof example.content === 'function') {
example.content(exampleDisplay);
} else {
const contentDiv = document.createElement('div');
contentDiv.className = 'example-content';
contentDiv.textContent = 'Nội dung ví dụ';
exampleDisplay.appendChild(contentDiv);
}
cssCode.textContent = example.style || '';
cssDescription.textContent = example.description || '';
if (example.events) {
for (const [event, handler] of Object.entries(example.events)) {
exampleDisplay.addEventListener(event, handler);
}
}
}
exampleSelector.addEventListener('change', function () {
updateExample(exampleSelector.value);
});
updateExample(exampleSelector.value);
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV Preview Tool</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #282c34;
color: white;
text-align: center;
}
h1 {
padding: 20px;
background-color: #61dafb;
margin: 0;
}
#example-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
#example-selector {
padding: 10px;
background-color: #444;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 250px;
}
#example-selector:hover {
background-color: #61dafb;
color: #282c34;
}
#example-display {
display: flex;
width: 80%;
height: 150px;
background-color: #98d1e9;
border-radius: 10px;
position: relative;
justify-content: center;
align-items: center;
color: black;
}
#css-code {
width: 80%;
background-color: #444;
color: #61dafb;
padding: 10px;
font-family: 'Courier New', Courier, monospace;
margin: 20px auto;
border-radius: 5px;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
min-height: 80px;
}
#css-description {
font-size: 16px;
color: #ffffff;
margin-top: 10px;
}
#instructions {
margin: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>DIV Preview Tool</h1>
<div id="example-container">
<select id="example-selector">
<option value="1">Kích thước cố định</option>
<option value="2">Bố cục lưới</option>
<option value="3">Hình nền</option>
<option value="4">Đổ bóng</option>
<option value="5">Bo góc</option>
<option value="6">Hiệu ứng hover</option>
<option value="7">Dùng Flexbox</option>
<option value="8">Bố cục 2 cột</option>
<option value="9">Vị trí tuyệt đối</option>
<option value="10">Hiệu ứng chuyển động</option>
</select>
<div id="example-display">
<div class="example-content">Nội dung ví dụ</div>
</div>
<div id="css-code"></div>
<div id="css-description"></div>
<div id="instructions">
<p>Sử dụng ô xổ xuống ở trên để chuyển đổi giữa các ví dụ và xem cách thẻ div có thể được sử dụng trong các tình huống khác nhau.</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const exampleSelector = document.getElementById('example-selector');
const exampleDisplay = document.getElementById('example-display');
const cssCode = document.getElementById('css-code');
const cssDescription = document.getElementById('css-description');
const examples = {
'1': {
style: 'width: 300px; height: 100px;',
description: 'Thiết lập kích thước cố định cho thẻ div (300px x 100px).',
},
'2': {
style: 'display: grid; grid-template-columns: repeat(3, 1fr);',
description: 'Tạo bố cục lưới với 3 cột đều nhau bên trong thẻ div.',
content: function(parent) {
const items = ['1', '2', '3'];
items.forEach(item => {
const div = document.createElement('div');
div.className = 'grid-item';
div.textContent = item;
parent.appendChild(div);
});
}
},
'3': {
style: 'background-image: url("https://via.placeholder.com/400x150"); background-size: cover;',
description: 'Áp dụng hình nền cho thẻ div và đảm bảo hình nền bao phủ toàn bộ vùng chứa.',
},
'4': {
style: 'box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);',
description: 'Thêm hiệu ứng đổ bóng vào thẻ div để tạo chiều sâu.',
},
'5': {
style: 'border-radius: 15px;',
description: 'Bo tròn các góc của thẻ div với bán kính 15px.',
},
'6': {
style: 'transition: background-color 0.3s ease; background-color: #98d1e9;',
description: 'Thêm hiệu ứng chuyển đổi màu nền khi di chuột qua thẻ div.',
events: {
mouseover: function () { exampleDisplay.style.backgroundColor = '#61dafb'; },
mouseout: function () { exampleDisplay.style.backgroundColor = '#98d1e9'; }
}
},
'7': {
style: 'display: flex; justify-content: center; align-items: center;',
description: 'Sử dụng Flexbox để căn giữa nội dung của thẻ div theo cả chiều ngang và chiều dọc.',
},
'8': {
style: 'display: flex; flex-direction: row;',
description: 'Tạo bố cục 2 cột bên trong thẻ div bằng Flexbox.',
content: function(parent) {
const columns = [
{ text: 'Cột 1', color: '#444' },
{ text: 'Cột 2', color: '#666' }
];
columns.forEach(col => {
const div = document.createElement('div');
div.className = 'column';
div.style.flex = '1';
div.style.padding = '10px';
div.style.backgroundColor = col.color;
div.textContent = col.text;
parent.appendChild(div);
});
}
},
'9': {
style: 'position: relative;',
description: 'Sử dụng vị trí tuyệt đối để đặt một phần tử con tại vị trí cụ thể trong thẻ div.',
content: function(parent) {
const div = document.createElement('div');
div.style.position = 'absolute';
div.style.top = '10px';
div.style.left = '10px';
div.style.backgroundColor = '#61dafb';
div.style.padding = '5px';
div.textContent = 'Vị trí tuyệt đối';
parent.appendChild(div);
}
},
'10': {
style: 'transition: transform 0.5s ease;',
description: 'Thêm hiệu ứng phóng to khi di chuột qua thẻ div.',
events: {
mouseover: function () { exampleDisplay.style.transform = 'scale(1.2)'; },
mouseout: function () { exampleDisplay.style.transform = 'scale(1)'; }
}
}
};
function updateExample(exampleId) {
const example = examples[exampleId];
exampleDisplay.style = '';
while (exampleDisplay.firstChild) {
exampleDisplay.removeChild(exampleDisplay.firstChild);
}
exampleDisplay.style.cssText = example.style || '';
if (typeof example.content === 'function') {
example.content(exampleDisplay);
} else {
const contentDiv = document.createElement('div');
contentDiv.className = 'example-content';
contentDiv.textContent = 'Nội dung ví dụ';
exampleDisplay.appendChild(contentDiv);
}
cssCode.textContent = example.style || '';
cssDescription.textContent = example.description || '';
if (example.events) {
for (const [event, handler] of Object.entries(example.events)) {
exampleDisplay.addEventListener(event, handler);
}
}
}
exampleSelector.addEventListener('change', function () {
updateExample(exampleSelector.value);
});
updateExample(exampleSelector.value);
});
</script>
</body>
</html>
