使用 HTML CSS JS 构建企业级官方网站 - 可直接获取源代码
最编程
2024-10-03 07:44:01
...
/*CSS重置, 消除不同浏览器默认样式之间的差异*/
body, html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0; /* 移除所有元素的外边距 */
padding: 0; /* 移除所有元素的内边距 */
border: 0; /* 移除所有元素的边框 */
font-size: 100%; /* 设置所有元素的字体大小为继承大小的100%，确保字体大小的一致性 */
font: inherit; /* 使所有元素的字体属性继承自其父元素 */
vertical-align: baseline; /* 将所有元素的垂直对齐方式设置为基线对齐 */
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; /* 将这些元素设置为块级元素 */
}
body {
padding: 0; /* 设置body元素的内边距（padding）为0，意味着body与其内容之间没有额外的空间 */
margin: 0; /* 设置body元素的外边距（margin）为0，确保body元素紧贴浏览器窗口的边缘 */
background: #FFF; /* 设置body的背景颜色为白色（#FFF是白色的十六进制表示） */
font-family: 'Open Sans', sans-serif; /* 设置body中文本的字体系列为'Open Sans'。如果用户的计算机上没有安装'Open Sans'，则回退到使用通用的无衬线字体（sans-serif） */
}
body a {
transition: 0.5s all; /* 为body内的所有<a>（链接）元素设置过渡效果，过渡时间为0.5秒，影响所有可动画属性 */
-webkit-transition: 0.5s all; /* 为body内的所有<a>元素设置WebKit特有的过渡效果（用于旧版Safari和Chrome浏览器），过渡时间为0.5秒，影响所有可动画属性 */
-moz-transition: 0.5s all; /* 为body内的所有<a>元素设置Mozilla特有的过渡效果（用于旧版Firefox浏览器），过渡时间为0.5秒，影响所有可动画属性 */
-o-transition: 0.5s all; /* 为body内的所有<a>元素设置Opera特有的过渡效果（用于旧版Opera浏览器），过渡时间为0.5秒，影响所有可动画属性 */
text-decoration: none; /* 移除<a>元素默认的下划线装饰 */
}
/* 对p标签进行样式设置 */
p {
/* 设置p标签的外边距为0 */
margin: 0;
/* 设置p标签的字体大小为15像素 */
font-size: 15px;
/* 设置p标签的行高为1.9，这意味着行间距是字体大小的1.9倍 */
line-height: 1.9;
/* 设置p标签的文字颜色为#999（灰色调） */
color: #999;
/* 设置p标签的文字字母之间的间距为1像素 */
letter-spacing: 1px;
}
/* 对具有navbar和navbar-default类的nav标签进行样式设置 */
nav.navbar.navbar-default {
/* 设置背景颜色为继承父元素的背景颜色 */
background-color: inherit;
/* 去掉默认的边框 */
border: none;
/* 设置外边距为0 */
margin: 0;
}
/* 对同时具有nav, navbar类的ul标签进行样式设置 */
ul.nav.navbar {
/* 设置文本居中对齐 */
text-align: center;
/* 设置外边距，上为17px，右和左为0，下也为0 */
margin: 17px 0 0;
/* 设置最小高度为继承父元素的高度 */
min-height: inherit;
}
/* 对.top-nav下的ul中的li进行样式设置 */
.top-nav ul li {
/* 设置左右外边距为1em（相对单位，相对于当前字体大小） */
margin: 0 1em;
/* 设置元素为行内块，使其能在一行显示同时可以设置宽高 */
display: inline-block;
}
/* 对.top-nav下的ul中的li内的a标签进行样式设置 */
.top-nav ul li a {
/* 去掉下划线装饰 */
text-decoration: none;
/* 设置字母间距为1像素 */
letter-spacing: 1px;
/* 设置字体大小为17像素 */
font-size: 17px;
/* 设置文字颜色为#fff（白色） */
color: #fff;
/* 设置定位为相对定位，可以相对于其正常位置进行偏移 */
position: relative;
/* 设置内边距为0 */
padding: 0;
/* 设置元素为行内块 */
display: inline-block;
}
/* 设置.nav下直接子元素li中的a标签在鼠标悬停或聚焦时的样式 */
.nav > li > a:hover, .nav > li > a:focus {
background: none; /* 移除背景色，如果有的话 */
}
/* 设置菜单跳转按键在鼠标悬停或处于活动状态时的样式 */
.top-nav ul li a:hover, .top-nav ul li a.active {
color: #305dff; /* 改变文字颜色为#ff304f（一种粉红色） */
-webkit-transform: scale(1.1); /* 为兼容WebKit浏览器，设置元素放大1.1倍 */
-moz-transform: scale(1.1); /* 为兼容Mozilla浏览器，设置元素放大1.1倍 */
-o-transform: scale(1.1); /* 为兼容Opera浏览器，设置元素放大1.1倍 */
-ms-transform: scale(1.1); /* 为兼容Microsoft浏览器，设置元素放大1.1倍 */
transform: scale(1.1); /* 设置元素放大1.1倍，为现代浏览器标准属性 */
}
/* 设置.top-nav下的.dropdown-menu中的li中的a标签在鼠标悬停或聚焦时的样式 */
.top-nav .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: #FF5722; /* 改变文字颜色为#FF5722（一种橙色） */
text-decoration: none; /* 去掉下划线装饰 */
background-color: transparent; /* 设置背景色为透明 */
}
/* 设置.navbar-right类的样式，通常用于导航栏右侧元素 */
.navbar-right {
margin-right: 0; /* 设置右侧外边距为0 */
}
/* 设置.banner-sec-agile类的样式，可能用于横幅或广告栏区域 */
.banner-sec-agile {
background: #0ecff7; /* 设置背景颜色为#0ecff7（一种青色） */
}
/* 设置.banner-left-agile下的img标签的样式 */
.banner-left-agile img {
height: 450px; /* 设置图片高度为450像素 */
width: 100%; /* 设置图片宽度为其父元素宽度的100% */
}
/* 设置.banner-left-agile类的样式，可能用于横幅左侧部分 */
.banner-left-agile {
float: left; /* 设置元素向左浮动，用于布局 */
width: 45%; /* 设置元素宽度为其父元素宽度的45% */
}
/* 设置.banner-left-wthree类的样式，可能用于横幅右侧部分 */
.banner-left-wthree {
float: right; /* 设置元素向右浮动，用于布局 */
width: 50%; /* 设置元素宽度为其父元素宽度的50% */
}
.banner-left-wthree {
margin:5px auto 0; /* 设置上边距为5px，左右自动居中，下边距为0 */
text-align: right; /* 文本对齐到右侧 */
}
.banner-left-wthree h6 {
font-size: 28px; /* 字体大小设置为28px */
color: #fff; /* 字体颜色设置为白色 */
letter-spacing: 1px; /* 字符间距设置为1px */
font-style: italic; /* 字体样式设置为斜体 */
margin-bottom: 5px; /* 下边距设置为5px */
}
/*温轻舟样式*/
.banner-left-wthree h2 {
color: #5d30ff;
font-size: 80px; /* 字体大小设置为80px */
font-family: 'Scada', sans-serif; /* 字体族设置为'Scada'，如果不可用则使用无衬线字体 */
text-shadow: 2px 2px 11px rgba(12, 70, 92, 0.46); /* 文本阴影设置为2px 2px 11px #5d5d5d（一种灰色） */
font-style: italic; /* 字体样式设置为斜体 */
}
.banner-left-wthree p.zi {
/* 设置背景渐变 */
background: linear-gradient(to bottom, #89dc4d, #32a9cd, #885cd0, #cb0db1,dimgray);
/* 裁剪背景，使其只显示在文本上 */
-webkit-background-clip: text;
/* 隐藏文本的默认填充颜色 */
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: 1px; /* 字母间距设置为1像素 */
font-size: 15px; /* 字体大小设置为15像素 */
margin-top: 4em; /* 上边距设置为4倍的字体大小（通常用于创建视觉上的间距） */
top: 50%; /* 初始时，元素顶部距离其父容器顶部50% */
left: 50%; /* 初始时，元素左侧距离其父容器左侧50% */
transform: translate(-50%, -50%) scale(0.8); /* 使用变换将元素移动到其父容器的正中心，并稍微缩小 */
opacity: 0; /* 初始时，元素完全透明（隐藏） */
animation: coolFadeInZoomMove 3.5s forwards 1.5s;
}
/* 定义动画 */
@keyframes coolFadeInZoomMove {
0% {
opacity: 0; /* 动画开始时，元素完全透明 */
transform: translate(-50%, -50%) scale(0.8); /* 元素位于其父容器的正中心，并稍微缩小 */
}
20% {
opacity: 1; /* 元素逐渐变得完全不透明 */
transform: translate(-50%, -50%) scale(2); /* 元素放大到2倍，但中心位置不变 */
}
50% {
opacity: 1; /* 元素保持完全不透明 */
transform: translate(-50%, -50%) scale(2); /* 元素保持在2倍大小，中心位置不变 */
}
70% {
opacity: 1; /* 元素保持完全不透明 */
transform: translate(-50%, -50%) scale(1); /* 元素缩小到原始大小，中心位置不变 */
}
100% {
opacity: 1; /* 元素保持完全不透明 */
transform: translate(0, 0) scale(1); /* 元素移动到其最终位置（这里假设是父容器的左上角），并保持原始大小 */
top: auto; /* 重置顶部位置为自动，以便元素跟随正常的文档流 */
left: auto; /* 重置左侧位置为自动，以便元素跟随正常的文档流 */
position: static; /* 重置定位方式为静态，以便元素跟随正常的文档流 */
}
}
.popEffect span {
animation: pop 10s linear infinite 0s; /* 应用名为'pop'的动画，持续7.5秒，线性变化，无限循环，从0秒开始 */
-ms-animation: pop 10s linear infinite 0s; /* 针对旧版IE浏览器的动画设置 */
-webkit-animation: pop 10s linear infinite 0s; /* 针对WebKit内核浏览器的动画设置（如Chrome, Safari） */
opacity: 0; /* 透明度设置为0 */
overflow: hidden; /* 超出内容区域的部分隐藏 */
position: absolute; /* 位置设置为绝对定位 */
width: 70%; /* 宽度设置为父元素的70% */
left:9.5%; /* 距离父元素左边9.5% */
color: #fff; /* 字体颜色设置为白色 */
font-family: 'Open Sans', sans-serif; /* 字体族设置为'Open Sans'，如果不可用则使用无衬线字体 */
letter-spacing: 1px; /* 字符间距设置为1px */
font-size: 40px; /* 字体大小设置为35px */
}
.popEffect span:nth-child(2){
animation-delay: 2.5s; /* 动画延迟2.5秒开始 */
-ms-animation-delay: 2.5s; /* 针对旧版IE浏览器的动画延迟设置 */
-webkit-animation-delay: 2.5s; /* 针对WebKit内核浏览器的动画延迟设置 */
}
.popEffect span:nth-child(3) {
animation-delay: 5s; /* 为第三个span子元素设置动画延迟为5秒 */
-ms-animation-delay: 5s; /* 为IE浏览器（特别是IE10）设置动画延迟为5秒 */
-webkit-animation-delay: 5s; /* 为基于WebKit的浏览器（如Chrome, Safari）设置动画延迟为5秒 */
}
.popEffect span:nth-child(4) {
animation-delay: 7.5s; /* 为第四个span子元素设置动画延迟为7.5秒 */
-ms-animation-delay: 7.5s; /* 为IE浏览器设置动画延迟为7.5秒 */
-webkit-animation-delay: 7.5s; /* 为基于WebKit的浏览器设置动画延迟为7.5秒 */
}
.popEffect span:nth-child(5) {
animation-delay: 10s; /* 为第四个span子元素设置动画延迟为7.5秒 */
-ms-animation-delay: 10s; /* 为IE浏览器设置动画延迟为7.5秒 */
-webkit-animation-delay: 10s; /* 为基于WebKit的浏览器设置动画延迟为7.5秒 */
}
@-moz-keyframes pop {
/* 定义Mozilla Firefox浏览器中的关键帧动画“pop” */
0% { opacity: 0; } /* 动画开始时，元素完全透明 */
5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); } /* 元素保持透明，同时进行旋转、缩放、倾斜和平移的变换 */
10% { opacity: 1; -moz-transform: translateY(0px); } /* 元素变为不透明，并仅在Y轴上进行平移 */
25% { opacity: 1; -moz-transform: translateY(0px); } /* 元素保持不透明和位置不变 */
30% { opacity: 0; -moz-transform: translateY(0px); } /* 元素再次变为透明 */
80% { opacity: 0; } /* 元素保持透明 */
100% { opacity: 0; } /* 动画结束时，元素仍然透明 */
}
@-webkit-keyframes pop {
/* 定义基于WebKit的浏览器（如Chrome, Safari）中的关键帧动画“pop” */
/* 动画内容与@-moz-keyframes pop相同，但使用-webkit-前缀 */
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes pop {
/* 定义IE浏览器中的关键帧动画“pop” */
/* 动画内容与@-moz-keyframes pop相同，但使用-ms-前缀 */
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes pop {
/* 定义IE浏览器中的关键帧动画“pop” */
/* 动画内容与@-moz-keyframes pop相同，但使用-ms-前缀 */
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
.wthree-btn {
position: relative; /* 设置元素为相对定位，以便子元素可以使用绝对定位相对于它进行定位 */
display: inline-block; /* 将元素设置为行内块级元素 */
overflow: hidden; /* 隐藏超出元素边界的内容 */
padding: 11px 20px; /* 设置内边距，上下为11px，左右为20px */
color: #fff; /* 设置字体颜色为白色 */
z-index: 9; /* 设置元素的层叠顺序为9，确保它位于其他z-index较低的元素之上 */
font-size: 1em; /* 设置字体大小为1em */
outline: none; /* 移除元素被聚焦时的轮廓线 */
letter-spacing: 4px; /* 设置字符间距为4px */
font-weight: 300; /* 设置字体权重为300（轻） */
background-color: #ff304f; /* 设置背景颜色为#ff304f（一种红色） */
-webkit-transition: .5s all; /* 为基于WebKit的浏览器设置所有可动画属性的过渡效果为0.5秒 */
-moz-transition: .5s all; /* 为Mozilla Firefox浏览器设置过渡效果 */
-o-transition: .5s all; /* 为Opera浏览器设置过渡效果 */
-ms-transition: .5s all; /* 为IE浏览器设置过渡效果 */
transition: .5s all; /* 为所有支持transition属性的浏览器设置过渡效果 */
border-radius: 20px 0 0; /* 设置元素的圆角边框，仅左上角为20px */
margin-top: 2em; /* 设置上边距为2em */
}
.wthree-btn.btn-6 span {
position: absolute; /* 设置span为绝对定位 */
display: block; /* 将span设置为块级元素 */
width: 0; /* 初始宽度为0 */
height: 0; /* 初始高度为0 */
-webkit-border-radius: 50%; /* 为基于WebKit的浏览器设置span的圆角边框为50%（圆形） */
-moz-border-radius: 50%; /* 为Mozilla Firefox浏览器设置圆角边框 */
-o-border-radius: 50%; /* 为Opera浏览器设置圆角边框 */
-ms-border-radius: 50%; /* 为IE浏览器设置圆角边框 */
border-radius: 50%; /* 为所有支持border-radius属性的浏览器设置圆角边框 */
background-color: #1796f8; /* 设置背景颜色为黑色 */
-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 为基于WebKit的浏览器设置宽度和高度的过渡效果 */
-moz-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 为Mozilla Firefox浏览器设置过渡效果 */
-o-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 为Opera浏览器设置过渡效果 */
-ms-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 为IE浏览器设置过渡效果 */
transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 为所有支持transition属性的浏览器设置过渡效果 */
-webkit-transform: translate(-50%, -50%); /* 为基于WebKit的浏览器设置span的位移，使其中心对齐父元素的中心 */
-moz-transform: translate(-50%, -50%); /* 为Mozilla Firefox浏览器设置位移 */
-o-transform: translate(-50%, -50%); /* 为Opera浏览器设置位移 */
-ms-transform: translate(-50%, -50%); /* 为IE浏览器设置位移 */
transform: translate(-50%, -50%); /* 为所有支持transform属性的浏览器设置位移 */
z-index: -1; /* 设置span的层叠顺序为-1，确保它位于父元素之下 */
}
/* 当用户将鼠标悬停在类名为 .wthree-btn 且同时具有 .btn-6 的按钮上时，或者该按钮获得焦点时，设置文字颜色为白色 */
.wthree-btn.btn-6:hover,
.wthree-btn.btn-6:focus {
color: #fff;
}
/* 当用户将鼠标悬停在类名为 .wthree-btn 且同时具有 .btn-6 的按钮上时，其内部的 span 元素的宽度设置为 225%，高度设置为 562.5px */
.wthree-btn.btn-6:hover span {
width: 225%;
height: 562.5px;
}
/* 当用户激活(通常是点击)类名为 .wthree-btn 且同时具有 .btn-6 的按钮时，设置背景颜色为 #FFC107 (一种黄色) */
.wthree-btn.btn-6:active {
background-color: #FFC107;
}
/* 设置 h3 元素带有类名 .tittle-w3ls 的文字颜色为黑色，字体大小为 3.7em，字母间距为 1px，文本居中对齐，底部外边距为 50px */
h3.tittle-w3ls {
/* 设置背景渐变 */
background: linear-gradient(to bottom, #3ad3ee, #2fb6ff, #00acfc, #1655c1,deepskyblue,cadetblue);
/* 裁剪背景，使其只显示在文本上 */
-webkit-background-clip: text;
/* 隐藏文本的默认填充颜色 */
-webkit-text-fill-color: transparent;
color: transparent;
font-size: 3.7em;
letter-spacing: 1px;
text-align: center;
margin-bottom: 20px; /* 设置下边距 */
}
.we {