大家好，欢迎来到无限大的频道。
今天继续带领大家开始0基础学前端。
一、什么是CSS3？
CSS3是CSS（层叠样式表）的最新版本。相较于之前的版本，CSS3带来了许多新特性，使前端开发人员能够更轻松地创建动画、响应式设计和复杂的视觉效果。CSS3的更新不仅改善了开发体验，还大大扩展了其对现代Web应用程序动态需求的支持。
二、CSS3的更新与新特性
CSS3引入了许多新特性，这些特性极大地丰富了网页的表现力和开发效率。以下是一些重要的更新和新特性：
1.选择器增强：
CSS3引入了一些新的选择器，例如伪类选择器（
:nth-child(),:last-child）、属性选择器（[attribute^="value"]）。
伪类选择器
-
:nth-child(n): 这个伪类选择器用于选择父元素中的第 n 个子元素。n 可以是具体的数字、关键字（如 odd、even）、或者公式（如 2n+1 表示选择所有奇数位置的元素）等。它可以用于实现复杂的选择逻辑，比如为表格的奇数或偶数行不同的背景颜色。li:nth-child(2) {color: red; /* 选择父元素下的第2个li子元素 */ } -
:last-child: 这个伪类选择器用于选择父元素中的最后一个子元素。它常用于为列表或其他容器的最后一个元素添加特殊样式。p:last-child {margin-bottom: 0; /* 为最后一个p元素取消底部边距 */ }
属性选择器
-
[attribute^="value"]: 属性选择器用于选择具有指定属性值的元素。在这个例子中，它选择所有属性名为attribute，且属性值以value开头的元素。a[href^="https"] {color: blue; /* 选择所有以 https 开头的链接 */ }
2.媒体查询：
用于实现响应式设计，根据不同设备特性（如屏幕宽度）应用不同的样式。
@media (max-width: 600px) {body {background-color: lightblue;}
}
3.边框和背景：
圆角边框：
border-radius属性，可用于创建圆角效果。背景渐变：
linear-gradient和radial-gradient，用于背景渐变色。
.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);
}
_web前端开发设计_荆州百度推广_百度一下首页手机版)
