当前位置: 首页> 健康> 科研 > 聊城网站推广公司_什么是境外电商?_最近10个新闻_小程序平台

聊城网站推广公司_什么是境外电商?_最近10个新闻_小程序平台

时间:2025/7/11 10:58:38来源:https://blog.csdn.net/wxdzuishaui/article/details/142519684 浏览次数:1次
聊城网站推广公司_什么是境外电商?_最近10个新闻_小程序平台

大家好,欢迎来到无限大的频道。

今天继续带领大家开始0基础学前端。

一、什么是CSS3?

CSS3是CSS(层叠样式表)的最新版本。相较于之前的版本,CSS3带来了许多新特性,使前端开发人员能够更轻松地创建动画、响应式设计和复杂的视觉效果。CSS3的更新不仅改善了开发体验,还大大扩展了其对现代Web应用程序动态需求的支持。

二、CSS3的更新与新特性

CSS3引入了许多新特性,这些特性极大地丰富了网页的表现力和开发效率。以下是一些重要的更新和新特性:

1.选择器增强

        CSS3引入了一些新的选择器,例如伪类选择器(:nth-child():last-child)、属性选择器([attribute^="value"])。

伪类选择器
  1. :nth-child(n): 这个伪类选择器用于选择父元素中的第 n 个子元素。n 可以是具体的数字、关键字(如 odd、even)、或者公式(如 2n+1 表示选择所有奇数位置的元素)等。它可以用于实现复杂的选择逻辑,比如为表格的奇数或偶数行不同的背景颜色。

    li:nth-child(2) {color: red; /* 选择父元素下的第2个li子元素 */
    }
    
  2. :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-gradientradial-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); 
}

关键字:聊城网站推广公司_什么是境外电商?_最近10个新闻_小程序平台

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: