学习样式设计，创建美观的网页界面
CSS（层叠样式表）用于控制网页的外观和布局。它可以设置颜色、字体、间距、布局等样式。
/* 内联样式 */
<p style="color: blue;">蓝色文字</p>
/* 内部样式 */
<style>
p {
color: blue;
font-size: 16px;
}
</style>
/* 外部样式表 */
<link rel="stylesheet" href="styles.css">/* 背景颜色 */
background-color: #f0f0f0;
/* 背景图片 */
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
/* 背景简写 */
background: #f0f0f0 url('image.jpg') no-repeat center/cover;/* 边框样式 */
border: 2px solid #333;
border-radius: 10px;
/* 分别设置 */
border-width: 2px;
border-style: dashed;
border-color: #667eea;
/* 圆角 */
border-top-left-radius: 10px;
border-radius: 50%; /* 圆形 *//* 盒阴影 */
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
/* 文字阴影 */
text-shadow: 1px 1px 2px #000;
/* 多层阴影 */
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 4px 8px rgba(0,0,0,0.1);/* 相对定位 */
position: relative;
top: 10px;
left: 20px;
/* 绝对定位 */
position: absolute;
top: 0;
right: 0;
/* 固定定位 */
position: fixed;
bottom: 0;
left: 0;
/* 粘性定位 */
position: sticky;
top: 0;/* 主轴方向 */
flex-direction: row | column;
/* 主轴对齐 */
justify-content:
flex-start | center | flex-end |
space-between | space-around;
/* 交叉轴对齐 */
align-items:
flex-start | center | flex-end | stretch;/* 项目放大比例 */
flex-grow: 1;
/* 项目缩小比例 */
flex-shrink: 0;
/* 项目基础大小 */
flex-basis: 200px;
/* 简写形式 */
flex: 1 0 200px;/* 定义网格 */
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
/* 网格间距 */
gap: 20px;
/* 简写形式 */
grid-template: 100px 200px / 1fr 2fr 1fr;/* 命名网格线 */
grid-template-columns:
[start] 1fr [middle] 2fr [end];
/* 网格区域命名 */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";/* 基础过渡 */
transition: all 0.3s ease;
/* 详细设置 */
transition:
background-color 0.3s ease,
transform 0.5s ease-in-out;@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.animation {
animation: bounce 2s infinite;
}/* 移动优先 */
.container { width: 100%; }
@media (min-width: 768px) {
.container { width: 750px; }
}
@media (min-width: 992px) {
.container { width: 970px; }
}
@media (min-width: 1200px) {
.container { width: 1170px; }
}/* Flex居中 */
display: flex;
justify-content: center;
align-items: center;
/* Grid居中 */
display: grid;
place-items: center;
/* 绝对定位居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);/* 现代方法 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* overflow方法 */
.container {
overflow: hidden;
}| 分类 | 属性 | 常用值 | 说明 |
|---|---|---|---|
| 布局 | display | block, flex, grid | 元素显示方式 |
| position | relative, absolute, fixed | 元素定位 | |
| float | left, right, none | 元素浮动 | |
| z-index | 1, 10, 100 | 层级控制 | |
| 文本 | font-size | 16px, 1.2em, 1rem | 字体大小 |
| color | #333, red, rgb(0,0,0) | 文字颜色 | |
| text-align | left, center, right | 文本对齐 | |
| line-height | 1.5, 24px, 150% | 行高 | |
| 背景 | background-color | #fff, transparent | 背景颜色 |
| background-image | url('image.jpg') | 背景图片 | |
| background-size | cover, contain, 100% | 背景大小 | |
| background-position | center, top left | 背景位置 |
<div class="card-container">
<div class="card">
<img src="avatar.jpg" alt="头像">
<h3>标题</h3>
<p>描述文字</p>
</div>
</div>.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 20px;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}这是一个响应式卡片示例
/* 基础导航样式 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #333;
color: white;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
/* 移动端适配 */
@media (max-width: 768px) {
.nav-links {
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #333;
display: none;
}
.nav-links.active {
display: flex;
}
}/* 基础按钮 */
.btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary {
background: #3b82f6;
color: white;
}
.btn-primary:hover {
background: #2563eb;
transform: translateY(-1px);
}创建一个美观的登录表单，包含用户名、密码输入框和登录按钮。
.login-form {
display: flex;
flex-direction: column;
max-width: 400px;
margin: 0 auto;
}
.input-group {
margin-bottom: 1rem;
}设计一个产品展示卡片，包含图片、标题、价格和购买按钮。
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}制作一个响应式导航菜单，在大屏幕上水平显示，小屏幕上垂直显示。
@media (max-width: 768px) {
.nav-menu {
flex-direction: column;
display: none;
}
}创建一个CSS加载动画，可以是旋转的圆圈或其他创意效果。
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}设计一个垂直时间轴，展示事件或历史记录。
.timeline-item::before {
content: '';
position: absolute;
left: -10px;
top: 0;
width: 2px;
height: 100%;
background: #333;
}创建一个价格对比表，展示不同的套餐选项。
.pricing-table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}.box {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
box-sizing: border-box; /* 总宽度保持300px */
}.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
}.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}/* 移动优先响应式 */
.container {
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
@media (min-width: 576px) {
.container { max-width: 540px; }
}
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 992px) {
.container { max-width: 960px; }
}
@media (min-width: 1200px) {
.container { max-width: 1140px; }
}小美想创建一个在线服装店，需要现代化的设计，包括：
为个人简介页面添加基础样式，包括颜色、字体和间距。
使用Flexbox创建一个响应式导航栏。
使用CSS Grid创建产品展示网格。
为按钮添加悬停动画效果。
创建完全响应式的卡片组件。