大家好，欢迎来到无限大的频道
今天继续带领大家开始0基础学前端。
一、什么是CSS3？
CSS3是CSS（层叠样式表）的最新版本。相较于之前的版本，CSS3带来了许多新特性，使前端开发人员能够更轻松地创建动画、响应式设计和复杂的视觉效果。CSS3的更新不仅改善了开发体验，还大大扩展了其对现代Web应用程序动态需求的支持。
二、CSS3的更新与新特性
CSS3引入了许多新特性，这些特性极大地丰富了网页的表现力和开发效率。以下是一些重要的更新和新特性：
1. 选择器增强
- 伪类选择器
li:nth-child(2) {
color: red; /* 选择父元素下的第2个li子元素 */
}
p:last-child {
margin-bottom: 0; /* 为最后一个p元素取消底部边距 */
}
- 属性选择器
a[href^="https"] {
color: blue; /* 选择所有以 https 开头的链接 */
}
2. 媒体查询
用于实现响应式设计，根据不同设备特性（如屏幕宽度）应用不同的样式。
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
3. 边框和背景
.rounded {
border-radius: 15px;
background: linear-gradient(to right, red, yellow);
}
4. 文本效果
文本阴影：text-shadow属性，可以给文字添加阴影效果。
h1 {
text-shadow: 2px 2px 5px gray;
}
5. 变形、过渡和动画
- 变形：
transform属性，用于旋转、缩放和平移元素。 - 过渡：
transition属性，可平滑地过渡属性的变化。 - 关键帧动画：
@keyframes，用于定义复杂动画效果。
.box {
transition: width 2s;
}
.box:hover {
width: 200px;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.animated {
animation: example 2s infinite;
}
6. Flexbox与Grid布局
- Flexbox：单一轴线上的元素布局，适用于一维布局。
- Grid：二维布局系统，允许开发者创建复杂的网格布局。
.container {
display: flex;
justify-content: space-between;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
三、示例代码完善
让我们把昨天的示例代码进一步完善。
1. 我的个人主页
基于CSS3，我们来完善“我的个人主页”示例，将其设计得更加丰富和现代化。
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人主页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<h1>欢迎来到我的个人主页</h1>
</header>
<main class="content">
<section class="bio">
<h2>关于我</h2>
<p>你好！我是一个前端开发的初学者，正在学习如何创建美观且有用的网页。</p>
</section>
<section class="hobbies">
<h2>爱好与兴趣</h2>
<ul>
<li>编程</li>
<li>阅读</li>
<li>旅行</li>
</ul>
</section>
<section class="projects">
<h2>查看我的作品</h2>
<ul>
<li><a href="#">我的第一个项目</a></li>
<li><a href="#">一个有趣的项目</a></li>
</ul>
</section>
</main>
<footer class="footer">
<p>联系我：<a href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p>
</footer>
</body>
</html>
CSS
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
.header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
text-shadow: 2px 2px 4px #000000;
}
.content {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 20px;
}
.bio, .hobbies, .projects {
background: linear-gradient(135deg, #f2f2f2 25%, #d9d9d9 100%);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
flex-basis: 30%;
margin: 10px;
transition: transform 0.3s;
}
.bio:hover, .hobbies:hover, .projects:hover {
transform: scale(1.05);
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
color: #0066cc;
text-decoration: none;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.2);
}
2. 凯文杜兰特网站
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>凯文·杜兰特</title>
<link rel="stylesheet" href="kd.css">
</head>
<body>
<header class="header">
<h1>凯文·杜兰特</h1>
</header>
<main class="content">
<section class="image">
<img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/6fa6ec013f49061e5c313827b6099f2.png" alt="凯文·杜兰特">
</section>
<section class="bio">
<h2>简介</h2>
<p>凯文·杜兰特（Kevin Durant）是NBA著名篮球运动员，司职小前锋。1999年出生于华盛顿，他以卓越的得分能力和卓越的球场表现闻名。杜兰特曾多次获得NBA总冠军和最有价值球员（MVP）称号，被广泛认为是历史上最优秀的篮球运动员之一。</p>
</section>
<section class="career">
<h2>职业生涯</h2>
<p>杜兰特的职业生涯始于2007年，他在2007年NBA选秀中被西雅图超音速以第一顺位选中。随后，超音速队迁至俄克拉荷马城，成为俄克拉荷马城雷霆队。杜兰特在雷霆队效力期间，曾获得4次得分王，并带领球队进入2012年NBA总决赛。2016年，他加盟金州勇士队，与斯蒂芬·库里等球星并肩作战，夺得两次NBA总冠军。</p>
</section>
<section class="teams">
<h2>球队历程</h2>
<ul>
<li><strong>西雅图超音速 (2007-2008)</strong></li>
<li><strong>俄克拉荷马城雷霆 (2008-2016)</strong></li>
<li><strong>金州勇士 (2016-2019)</strong></li>
<li><strong>布鲁克林篮网 (2019-2022)</strong></li>
<li><strong>菲尼克斯太阳 (2022-至今)</strong></li>
</ul>
</section>
<section class="achievements">
<h2>成就</h2>
<ul>
<li>两届NBA总冠军 (2017, 2018)</li>
<li>四届NBA得分王 (2010, 2011, 2012, 2014)</li>
<li>两届总决赛MVP (2017, 2018)</li>
<li>NBA常规赛MVP (2014)</li>
<li>2021年东京奥运会金牌</li>
<li>十届NBA全明星</li>
</ul>
</section>
<section class="personal-life">
<h2>个人生活</h2>
<p>杜兰特在场外也十分活跃，他积极参与慈善和社区活动，成立了“凯文·杜兰特慈善基金会”，旨在帮助年轻人和改善社区生活。此外，他还是投资者，参与了多个初创公司的投资。</p>
</section>
</main>
<footer class="footer">
<p>© 2024 凯文·杜兰特粉丝页面</p>
</footer>
</body>
</html>
CSS
/* kd.css */
body {
font-family: 'Roboto', sans-serif;
color: #f0f0f0;
margin: 0;
padding: 0;
background-color: #121212;
}
.header {
background: linear-gradient(135deg, #1a1a1a 25%, #000000 100%);
color: #f0f0f0;
text-align: center;
padding: 20px;
text-shadow: 2px 2px 5px #000000;
}
.content {
padding: 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.image img {
max-width: 70%;
height: auto;
border-radius: 50%;
transition: transform 0.5s;
}
.image:hover img {
transform: rotate(360deg);
}
.bio, .achievements {
width: 45%;
background: rgba(34, 34, 34, 0.8);
color: #f0f0f0;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
h1, h2 {
margin-top: 0;
}
ul {
list-style-type: circle;
padding-left: 20px;
}
.footer {
background-color: #1a1a1a;
color: #f0f0f0;
text-align: center;
padding: 10px;
box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.3);
}
通过以上示例，我们展示了如何利用CSS3的各种新特性来创建现代化的网页设计。希望这个教程对你学习前端开发有所帮助！如果有任何问题，欢迎随时提问。
