大家好,欢迎来到无限大的频道。
今天继续带领大家开始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);
}