1、简单实例
简单的CSS样式实例，使用CSS来美化HTML元素。基本的文字、背景、布局和边框样式。
1）HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<h1>Welcome to My Page</h1>
</header>
<section class="content">
<p>This is a simple example of using CSS to style a webpage.</p>
<button class="button">Click Me!</button>
</section>
<footer class="footer">
<p>Thank you for visiting!</p>
</footer>
</body>
</html>
2）CSS文件
/* 全局样式 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background: #f4f4f4;
}
/* 头部样式 */
.header {
background: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
/* 主要内容区域 */
.content {
padding: 20px;
margin: 0 10px;
background: white;
border: 1px solid #ccc;
}
.content p {
color: #555;
}
/* 按钮样式 */
.button {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background: #5cb85c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background: #4cae4c;
}
/* 页脚样式 */
.footer {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
}
.footer p {
margin: 0;
}
2、样式化链接
样式化链接是一个常见的CSS应用，可以用来提升链接的视觉效果和用户交互体验。
1）HTML文件
<a href="https://example.com" class="custom-link">Visit Example.com</a>
2）CSS文件
.custom-link {
color: #007bff; /* 设置链接文字颜色为亮蓝色 */
background-color: #f8f9fa; /* 设置链接背景色为浅灰色 */
padding: 8px 15px; /* 添加内边距，使链接更易点击 */
border-radius: 5px; /* 设置边角为圆角 */
text-decoration: none; /* 移除下划线 */
border: 1px solid #007bff; /* 添加蓝色边框 */
transition: all 0.3s ease; /* 添加过渡动画效果 */
}
.custom-link:hover, .custom-link:focus {
color: #fff; /* 悬停和聚焦时更改文字颜色为白色 */
background-color: #0056b3; /* 悬停和聚焦时更改背景色为深蓝色 */
border-color: #004085; /* 悬停和聚焦时更改边框颜色 */
text-decoration: none; /* 保持无下划线 */
}3、创建圆形按钮
创建一个圆形按钮是一个常见的设计需求，可以增加界面的趣味性和互动性。在CSS中，可以通过设置足够的边距和圆角来轻松实现圆形按钮。
1）HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Button Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="circular-button">Click Me!</button>
</body>
</html>
2）CSS 文件
.circular-button {
background-color: #4CAF50; /* 设置按钮的背景颜色为绿色 */
color: white; /* 设置文字颜色为白色 */
padding: 20px; /* 上下左右填充20像素 */
border: none; /* 无边框 */
text-align: center; /* 文字居中 */
font-size: 16px; /* 字体大小 */
cursor: pointer; /* 鼠标悬停时显示指针 */
border-radius: 50%; /* 设置圆角为50%，产生圆形效果 */
width: 60px; /* 宽度 */
height: 60px; /* 高度 */
}
.circular-button:hover {
background-color: #45a049; /* 悬停时的背景颜色变为深绿色 */
}4、卡片布局
创建一个具有现代美学的卡片布局是CSS在网页设计中的常见应用。卡片通常包含图像、标题、文本内容和可能的交互元素（如按钮）。它们是展示产品、文章摘要、用户信息等的理想选择。
1）HTML 文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Layout Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="card"> <img src="https://via.placeholder.com/300x200" alt="Sample Image" class="card-img"> <div class="card-body"> <h3 class="card-title">Card Title</h3> <p class="card-text">This is a sample text to demonstrate a simple card layout. It shows how CSS can be used to create attractive and functional designs.</p> <button class="card-button">Read More</button> </div> </div> </body> </html>
2）CSS 文件
/* 基本全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* 卡片样式 */
.card {
width: 300px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
background-color: white;
border-radius: 8px;
overflow: hidden; /* 确保图片或内容不溢出边界 */
}
.card-img {
width: 100%;
height: auto; /* 保持图片原始宽高比 */
}
.card-body {
padding: 15px;
text-align: center;
}
.card-title {
margin: 0;
color: #333;
}
.card-text {
color: #666;
font-size: 14px;
margin: 10px 0;
}
.card-button {
background-color: #007BFF;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
display: inline-block;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.card-button:hover {
background-color: #0056b3;
}