html css网页制作案例
HTML CSS网页制作案例
响应式个人主页
使用HTML5和CSS3创建一个响应式个人主页，包含导航栏、简介、作品集和联系信息。通过媒体查询实现不同屏幕尺寸的适配。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人主页</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #35424a;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
padding: 0;
list-style: none;
}
nav li {
display: inline;
margin: 0 15px;
}
@media (max-width: 768px) {
nav li {
display: block;
margin: 10px 0;
}
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的主页</h1>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
</body>
</html>电商产品卡片
创建具有悬停效果的电商产品展示卡片，使用CSS过渡和变换增强用户体验。
<div class="product-card">
<img src="product.jpg" alt="产品图片">
<h3>产品名称</h3>
<p class="price">$19.99</p>
<button>加入购物车</button>
</div>
<style>
.product-card {
width: 300px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin: 20px;
transition: transform 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.product-card button {
background: #4CAF50;
color: white;
border: none;
padding: 10px;
width: 100%;
cursor: pointer;
}
</style>CSS网格布局案例
使用CSS Grid创建复杂的网页布局，适合内容丰富的网站。
<div class="grid-container">
<div class="header">头部</div>
<div class="sidebar">侧边栏</div>
<div class="main">主要内容</div>
<div class="footer">页脚</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-gap: 10px;
padding: 10px;
}
.header { grid-area: header; background: #f1f1f1; }
.sidebar { grid-area: sidebar; background: #ddd; }
.main { grid-area: main; background: #f9f9f9; }
.footer { grid-area: footer; background: #f1f1f1; }
</style>动画按钮效果
创建带有CSS动画的交互式按钮，提升用户点击体验。
<button class="animated-button">点击我</button>
<style>
.animated-button {
padding: 12px 24px;
background: linear-gradient(to right, #ff8a00, #da1b60);
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.animated-button:before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
transition: all 0.5s;
}
.animated-button:hover:before {
left: 100%;
}
</style>响应式导航菜单
创建在移动设备上折叠的响应式导航菜单，使用纯CSS实现。
<nav class="responsive-nav">
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-btn">☰</label>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
<style>
.responsive-nav {
background: #333;
}
.menu-btn {
color: white;
font-size: 24px;
padding: 10px;
display: none;
cursor: pointer;
}
.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.menu li a {
color: white;
text-decoration: none;
padding: 15px;
display: block;
}
#menu-toggle {
display: none;
}
@media (max-width: 768px) {
.menu-btn {
display: block;
}
.menu {
flex-direction: column;
display: none;
}
#menu-toggle:checked ~ .menu {
display: flex;
}
}
</style>
