全屏 CSS 代码生成器
您可以通过下方表单选择您需要的全屏效果,生成对应的 CSS 代码，并实时查看预览。
（图片来源网络，侵删）
CSS 代码生成器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">全屏 CSS 代码生成器</title>
<style>
/* --- 生成器自身样式 --- */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f4f7f6;
color: #333;
line-height: 1.6;
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: 20px auto;
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #555;
}
select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box; /* Important for padding and width */
}
select {
cursor: pointer;
}
textarea {
min-height: 200px;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
resize: vertical;
}
.button-group {
display: flex;
gap: 10px;
margin-top: 20px;
}
button {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-copy {
background-color: #3498db;
color: white;
}
.btn-copy:hover {
background-color: #2980b9;
}
.btn-clear {
background-color: #e74c3c;
color: white;
}
.btn-clear:hover {
background-color: #c0392b;
}
.preview-area {
margin-top: 30px;
border: 2px dashed #bdc3c7;
border-radius: 5px;
padding: 20px;
text-align: center;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.preview-content {
background-color: #3498db;
color: white;
padding: 20px 40px;
border-radius: 5px;
font-size: 18px;
}
/* --- 用于演示的占位元素样式 --- */
.demo-body, .demo-html, .demo-div {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.demo-html {
background-color: #2ecc71; /* 绿色背景 */
color: white;
}
.demo-div {
background-color: #e74c3c; /* 红色背景 */
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>全屏 CSS 代码生成器</h1>
<div class="form-group">
<label for="fullscreen-type">选择全屏场景：</label>
<select id="fullscreen-type">
<option value="viewport">1. 整个页面占满视口 (常见于 landing page)</option>
<option value="element">2. 单个元素占满父容器</option>
<option value="fixed">3. 固定定位元素覆盖全屏</option>
<option value="absolute">4. 绝对定位元素覆盖全屏</option>
<option value="flex-center">5. 使用 Flexbox 居中并占满全屏</option>
</select>
</div>
<div class="form-group">
<label for="css-output">生成的 CSS 代码：</label>
<textarea id="css-output" readonly>请从上方选择一个场景...</textarea>
</div>
<div class="button-group">
<button class="btn-copy" id="copy-btn">复制代码</button>
<button class="btn-clear" id="clear-btn">清空</button>
</div>
<h2 style="margin-top: 40px; color: #2c3e50;">实时预览</h2>
<div class="preview-area" id="preview-area">
<p>选择一个场景以查看预览效果</p>
</div>
</div>
<script>
const fullscreenType = document.getElementById('fullscreen-type');
const cssOutput = document.getElementById('css-output');
const copyBtn = document.getElementById('copy-btn');
const clearBtn = document.getElementById('clear-btn');
const previewArea = document.getElementById('preview-area');
const cssTemplates = {
viewport: `/* 整个页面占满视口 */
/* 通常应用于 <body> 或根元素 <html> */
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* 可选：防止出现滚动条 */
}`,
element: `/* 单个元素占满父容器 */
/* 假设你的元素是 <div class="fullscreen-element"> */
.fullscreen-element {
width: 100%;
height: 100%;
}`,
fixed: `/* 固定定位元素覆盖全屏 */
/* 元素相对于视口定位，即使页面滚动也保持在原地 */
.fullscreen-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000; /* 确保它显示在其他内容之上 */
}`,
absolute: `/* 绝对定位元素覆盖全屏 */
/* 元素相对于最近的已定位父元素进行定位 */
.fullscreen-absolute {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}`,
'flex-center': `/* 使用 Flexbox 居中并占满全屏 */
/* 需要将父容器设置为 display: flex */
.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 100%;
height: 100%;
}
.flex-item {
/* 你的内容样式 */
}`
};
const previewTemplates = {
viewport: `<div class="demo-body">
<div class="demo-html">
<h2>这是占满整个视口的页面</h2>
<p>html, body { height: 100%; width: 100%; }</p>
</div>
</div>`,
element: `<div style="height: 300px; border: 1px solid #ccc;">
<div class="demo-div">
<h2>这是占满父容器的元素</h2>
<p>.fullscreen-element { width: 100%; height: 100%; }</p>
</div>
</div>`,
fixed: `<div style="height: 200px; overflow: auto; border: 1px solid #ccc;">
<p>滚动查看下方...</p><p>滚动查看下方...</p><p>滚动查看下方...</p>
<p>滚动查看下方...</p><p>滚动查看下方...</p><p>滚动查看下方...</p>
<p>滚动查看下方...</p><p>滚动查看下方...</p><p>滚动查看下方...</p>
<p>滚动查看下方...</p><p>滚动查看下方...</p><p>滚动查看下方...</p>
<p>滚动查看下方...</p><p>滚动查看下方...</p><p>滚动查看下方...</p>
<p>滚动查看下方...</p><p>滚动查看下方...</p><p>滚动查看下方...</p>
<p>滚动查看下方...</p><p>滚动查看下方...</p><p>滚动查看下方...</p>
<p>滚动查看下方...</p><p>滚动查看下方...</p><p>滚动查看下方...</p>
</div>
<div class="demo-div">
<h2>这是固定定位的全屏覆盖层</h2>
<p>position: fixed; top: 0; left: 0; width: 100%; height: 100%;</p>
</div>`,
absolute: `<div style="position: relative; height: 300px; border: 1px solid #ccc;">
<p>这是父容器的内容</p>
<div class="demo-div">
<h2>这是绝对定位的全屏子元素</h2>
<p>position: absolute; top: 0; left: 0; width: 100%; height: 100%;</p>
</div>
</div>`,
'flex-center': `<div class="demo-div">
<h2>这是 Flexbox 容器</h2>
<p>display: flex; justify-content: center; align-items: center;</p>
<div style="background-color: white; color: black; padding: 20px; border-radius: 5px;">
<p>内容被完美居中</p>
</div>
</div>`
};
function updateCode() {
const selectedType = fullscreenType.value;
cssOutput.value = cssTemplates[selectedType];
previewArea.innerHTML = previewTemplates[selectedType];
}
function copyToClipboard() {
cssOutput.select();
cssOutput.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(cssOutput.value).then(() => {
const originalText = copyBtn.textContent;
copyBtn.textContent = '已复制!';
copyBtn.style.backgroundColor = '#27ae60';
setTimeout(() => {
copyBtn.textContent = originalText;
copyBtn.style.backgroundColor = '#3498db';
}, 2000);
}).catch(err => {
console.error('复制失败:', err);
alert('复制失败，请手动选择并复制。');
});
}
function clearOutput() {
cssOutput.value = '';
previewArea.innerHTML = '<p>选择一个场景以查看预览效果</p>';
}
fullscreenType.addEventListener('change', updateCode);
copyBtn.addEventListener('click', copyToClipboard);
clearBtn.addEventListener('click', clearOutput);
// 初始化
updateCode();
</script>
</body>
</html>
如何使用这个生成器
- 选择场景：从下拉菜单中选择您最需要的全屏效果。
- 查看代码：下方的文本框会自动生成对应的 CSS 代码。
- 复制使用：点击“复制代码”按钮，代码会复制到您的剪贴板，然后您可以直接粘贴到您的
.css文件或<style>标签中。 - 实时预览：在“实时预览”区域，您可以直观地看到该 CSS 效果的演示。
全屏 CSS 的核心知识点解析
虽然生成器已经帮您完成了工作,但了解其背后的原理对于深入学习 CSS 至关重要。
整个页面占满视口 (Landing Page / 首页)
这是最常见的需求,比如一个产品介绍首页，希望内容从上到下铺满整个浏览器窗口。
核心原理：
浏览器的默认 <body> 和 <html> 标签高度是由其内容决定的，要让它们占满整个视口，必须显式地设置它们的 height 为 100%。
CSS 代码：
（图片来源网络，侵删）
/* 通常放在 reset.css 或全局样式中 */
html, body {
height: 100%;
width: 100%;
margin: 0; /* 移除默认的外边距 */
padding: 0; /* 移除默认的内边距 */
}
/* 如果不想让页面出现滚动条，可以加上 */
/* body {
overflow: hidden;
} */
应用场景：网站首页、登录页、活动宣传页等。
单个元素占满父容器
当一个容器（div）的尺寸确定后，我们希望其内部的某个子元素也完全填充这个容器。
核心原理：
直接设置子元素的 width 和 height 为 100% 即可，这表示子元素的宽度和高度是其父元素对应尺寸的 100%。
CSS 代码：
（图片来源网络，侵删）
/* 假设父容器是 <div class="card">，子元素是 <div class="card-content"> */
.card-content {
width: 100%;
height: 100%;
}
应用场景：卡片组件的图片区域、模态框（Modal）的内容区域、表格的表头等。
固定定位 元素覆盖全屏
创建一个覆盖整个视口的遮罩层、弹窗或导航菜单，它不随页面滚动而移动。
核心原理：
position: fixed; 会将元素相对于浏览器视口进行定位，然后通过 top, left, right, bottom 属性将其“钉”在视口的四个边上，再设置 width 和 height 为 100% 即可。
CSS 代码：
.fullscreen-overlay {
position: fixed; /* 关键：相对于视口定位 */
/* 将元素定位到视口的左上角 */
top: 0;
left: 0;
/* 宽高占满整个视口 */
width: 100%;
height: 100%;
/* 背景色和透明度，用于遮罩效果 */
background-color: rgba(0, 0, 0, 0.5);
/* 确保遮罩层显示在页面内容之上 */
z-index: 1000;
}
应用场景：网站遮罩层、全屏视频背景、全屏广告、固定导航栏。
绝对定位 元素覆盖全屏
与固定定位类似,但它是相对于最近的已定位父元素进行定位，如果父元素没有设置 position (如 relative, absolute, fixed)，则会相对于 <body> 定位。
核心原理：
position: absolute; 让元素脱离正常的文档流，当父容器设置了 position: relative; 时，子元素的 top: 0; left: 0; 就会相对于父容器的左上角，从而实现“在父容器内全屏”。
CSS 代码：
/* 父容器需要是已定位的 */
.parent-container {
position: relative; /* 关键：为子元素提供定位参考 */
width: 500px;
height: 300px;
border: 2px solid #333;
}
.fullscreen-child {
position: absolute; /* 关键：相对于最近的已定位父元素 */
/* 相对于父容器的左上角 */
top: 0;
left: 0;
/* 宽高占满父容器 */
width: 100%;
height: 100%;
background-color: #f0f0f0;
}
应用场景：下拉菜单、工具提示、在特定区域内创建全屏效果（如图集浏览）。
使用 Flexbox 居中并占满全屏
现代布局的利器,不仅能实现全屏，还能轻松实现内容的完美居中。
核心原理：
将父容器设置为 display: flex，它会成为一个 Flex 容器。justify-content: center 控制子元素在主轴（水平方向）上的对齐方式，align-items: center 控制在交叉轴（垂直方向）上的对齐方式，当父容器本身也占满空间时，子元素自然就会被完美居中。
CSS 代码：
/* 父容器需要占满空间，比如一个已设置 height: 100% 的 div */
.flex-wrapper {
display: flex; /* 关键：激活 Flexbox 布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 100%;
height: 100%; /* 确保父容器有高度 */
background-color: #eee;
}
.flex-item {
/* 你的内容样式，比如一个登录框 */
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
应用场景：登录/注册表单、模态框内容、图片画廊、任何需要将内容置于屏幕中央的场景。
希望这个详细的生成器和解释能对您有所帮助！
