# 常见css样式
# 初始化样式
input{padding:0;margin:0;font-family:Microsoft YaHei}
img{border:none;background:0 0;vertical-align:middle}
li,ol,ul{list-style-type:none}
img,input,select{vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
table,td,th{vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;overflow:hidden;visibility:hidden}
.clearfix{zoom:1}
.clearboth{height:0;line-height:0;overflow:hidden;clear:both;font-size:0}
h1,h2{font-weight:700}
hr{border:0;border-top:1px solid #ccc;height:0}
p{margin:0}
.fl{float:left}
.fr{float:right}
.fwn{font-weight:400}
.com-img{display:block;overflow:hidden}
.com-img img{transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s}
.com-img:hover img{transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2)}
.flex{display:flex;display:-webkit-flex}
.wrap{flex-wrap:wrap}
.j-space-between{justify-content:space-between}
.j-flex-start{justify-content:flex-start}
.j-flex-end{justify-content:flex-end}
.j-center{justify-content:center}
.a-j-center{align-items:center;justify-content:center}
.a-center{align-items:center}
.a-flex-start{align-items:flex-start}
.a-flex-end{align-items:flex-end}
.clamp1{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.clamp4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.max1600{width:92%;max-width:1600px;margin:0 auto}
.max1520{width:92%;max-width:1520px;margin:0 auto}
.max1400{max-width:1430px;padding-left:15px;padding-right:15px;margin:0 auto}
.max1200{max-width:1230px;padding-left:15px;padding-right:15px;margin:0 auto}
body,html{scroll-behavior:smooth}
a{-webkit-transition:all .3s ease;transition:all .3s ease}
.white-logo{opacity:1;visibility:visible}
.black-logo{opacity:0;visibility:hidden;display:none}
.w-full{width:100%}
.w-1-2{width:50%}
.w-1-3{width:33.3333%}
.w-1-4{width:25%}
@media (max-width:768px){
.w-1-2,.w-1-3,.w-1-4{width:100%}
}
.overflow{overflow:hidden}
html{font-size:5.2083vw}
@media screen and (max-width:1280px){
html{font-size:80px}
}
@media screen and (max-width:1024px){
html{font-size:68px}
}
@media screen and (max-width:600px){
html{font-size:80px}
}
@media screen and (min-width:1921px){
html{font-size:95px}
}
:root{--demo-color:#c80010}
# 公共样式
body,
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{overflow-x:hidden;}
.max1300 { max-width: 1300px; width: 90%; margin: 0 auto; }
.max1400 { max-width: 1400px; width: 90%; margin: 0 auto; }
.max1500 { max-width: 1500px; width: 90%; margin: 0 auto; }
.max1600 { max-width: 1600px; width: 90%; margin: 0 auto; }
.com-img{ display:block; overflow:hidden;}
.com-img img{ transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s;}
.com-img:hover img{transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2);-ms-transform:scale(1.2);}
.com-img2{ display:block; overflow:hidden;}
.com-img2 img{ transition:transform .3s ease-out; -webkit-transition:transform .3s ease-out; -moz-transition:transform .3s ease-out; -o-transition:transform .3s ease-out;}
.com-img2:hover img{transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1);-ms-transform:scale(1.1);}
.w-full { width: 100%; }
.w-1-2 { width: 50%; }
.w-1-3 { width: 33.3333%; }
.w-1-4 { width: 25%; }
@media (max-width: 768px) {
.w-1-2, .w-1-3, .w-1-4 {
width: 100%;
}
}
/* 默认：≥1600px（最大屏幕） */
.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }
.font-22 { font-size: 22px; }
.font-24 { font-size: 24px; }
.font-26 { font-size: 26px; }
.font-28 { font-size: 28px; }
.font-30 { font-size: 30px; }
.font-32 { font-size: 32px; }
.font-34 { font-size: 34px; }
.font-36 { font-size: 36px; }
.font-38 { font-size: 38px; }
.font-40 { font-size: 40px; }
.font-42 { font-size: 42px; }
.font-44 { font-size: 44px; }
.font-46 { font-size: 46px; }
.font-48 { font-size: 48px; }
.font-50 { font-size: 50px; }
.font-52 { font-size: 52px; }
.font-54 { font-size: 54px; }
.font-56 { font-size: 56px; }
.font-58 { font-size: 58px; }
.font-60 { font-size: 60px; }
/* <1600px */
@media screen and (max-width: 1599px) {
.font-60 { font-size: 56px; }
.font-58 { font-size: 54px; }
.font-56 { font-size: 52px; }
.font-54 { font-size: 50px; }
.font-52 { font-size: 48px; }
.font-50 { font-size: 46px; }
.font-48 { font-size: 44px; }
.font-46 { font-size: 42px; }
.font-44 { font-size: 40px; }
.font-42 { font-size: 38px; }
.font-40 { font-size: 36px; }
.font-38 { font-size: 34px; }
.font-36 { font-size: 32px; }
.font-34 { font-size: 30px; }
.font-32 { font-size: 28px; }
.font-30 { font-size: 26px; }
.font-28 { font-size: 24px; }
.font-26 { font-size: 22px; }
.font-24 { font-size: 20px; }
.font-22 { font-size: 18px; }
.font-20 { font-size: 17px; }
.font-18 { font-size: 15px; }
.font-16 { font-size: 14px; }
.font-14 { font-size: 13px; }
.font-12 { font-size: 12px; }
}
/* <1440px */
@media screen and (max-width: 1439px) {
.font-60 { font-size: 52px; }
.font-58 { font-size: 50px; }
.font-56 { font-size: 48px; }
.font-54 { font-size: 46px; }
.font-52 { font-size: 44px; }
.font-50 { font-size: 42px; }
.font-48 { font-size: 40px; }
.font-46 { font-size: 38px; }
.font-44 { font-size: 36px; }
.font-42 { font-size: 34px; }
.font-40 { font-size: 32px; }
.font-38 { font-size: 30px; }
.font-36 { font-size: 28px; }
.font-34 { font-size: 26px; }
.font-32 { font-size: 24px; }
.font-30 { font-size: 22px; }
.font-28 { font-size: 20px; }
.font-26 { font-size: 18px; }
.font-24 { font-size: 17px; }
.font-22 { font-size: 15px; }
.font-20 { font-size: 14px; }
.font-18 { font-size: 13px; }
.font-16 { font-size: 13px; }
.font-14 { font-size: 12px; }
.font-12 { font-size: 12px; }
}
/* <1280px */
@media screen and (max-width: 1279px) {
.font-60 { font-size: 48px; }
.font-58 { font-size: 46px; }
.font-56 { font-size: 44px; }
.font-54 { font-size: 42px; }
.font-52 { font-size: 40px; }
.font-50 { font-size: 38px; }
.font-48 { font-size: 36px; }
.font-46 { font-size: 34px; }
.font-44 { font-size: 32px; }
.font-42 { font-size: 30px; }
.font-40 { font-size: 28px; }
.font-38 { font-size: 26px; }
.font-36 { font-size: 24px; }
.font-34 { font-size: 22px; }
.font-32 { font-size: 20px; }
.font-30 { font-size: 19px; }
.font-28 { font-size: 17px; }
.font-26 { font-size: 15px; }
.font-24 { font-size: 14px; }
.font-22 { font-size: 13px; }
.font-20 { font-size: 12px; }
.font-18 { font-size: 12px; }
.font-16 { font-size: 12px; }
.font-14 { font-size: 12px; }
.font-12 { font-size: 12px; }
}
/* <768px */
@media screen and (max-width: 767px) {
.font-60 { font-size: 40px; }
.font-58 { font-size: 38px; }
.font-56 { font-size: 36px; }
.font-54 { font-size: 34px; }
.font-52 { font-size: 32px; }
.font-50 { font-size: 30px; }
.font-48 { font-size: 28px; }
.font-46 { font-size: 26px; }
.font-44 { font-size: 24px; }
.font-42 { font-size: 22px; }
.font-40 { font-size: 20px; }
.font-38 { font-size: 19px; }
.font-36 { font-size: 18px; }
.font-34 { font-size: 16px; }
.font-32 { font-size: 15px; }
.font-30 { font-size: 14px; }
.font-28 { font-size: 13px; }
.font-26 { font-size: 13px; }
.font-24 { font-size: 12px; }
.font-22 { font-size: 12px; }
.font-20 { font-size: 12px; }
.font-18 { font-size: 12px; }
.font-16 { font-size: 12px; }
.font-14 { font-size: 12px; }
.font-12 { font-size: 12px; }
}
/* <500px */
@media screen and (max-width: 499px) {
.font-60 { font-size: 36px; }
.font-58 { font-size: 34px; }
.font-56 { font-size: 32px; }
.font-54 { font-size: 30px; }
.font-52 { font-size: 28px; }
.font-50 { font-size: 26px; }
.font-48 { font-size: 24px; }
.font-46 { font-size: 22px; }
.font-44 { font-size: 21px; }
.font-42 { font-size: 20px; }
.font-40 { font-size: 19px; }
.font-38 { font-size: 18px; }
.font-36 { font-size: 17px; }
.font-34 { font-size: 16px; }
.font-32 { font-size: 16px; }
.font-30 { font-size: 16px; }
.font-28 { font-size: 15px; }
.font-26 { font-size: 15px; }
.font-24 { font-size: 14px; }
.font-22 { font-size: 14px; }
.font-20 { font-size: 14px; }
.font-18 { font-size: 13px; }
.font-16 { font-size: 13px; }
.font-14 { font-size: 12px; }
.font-12 { font-size: 12px; }
}
/* Margin-Top */
.mt-0 { margin-top: 0px; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }
.mt-40 { margin-top: 40px; }
/* Margin-Bottom */
.mb-0 { margin-bottom: 0px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-35 { margin-bottom: 35px; }
.mb-40 { margin-bottom: 40px; }
/* Padding-Top */
.pt-0 { padding-top: 0px; }
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-25 { padding-top: 25px; }
.pt-30 { padding-top: 30px; }
.pt-35 { padding-top: 35px; }
.pt-40 { padding-top: 40px; }
/* Padding-Bottom */
.pb-0 { padding-bottom: 0px; }
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-25 { padding-bottom: 25px; }
.pb-30 { padding-bottom: 30px; }
.pb-35 { padding-bottom: 35px; }
.pb-40 { padding-bottom: 40px; }
/*文本对齐*/
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-none { display: none; }
@media (max-width: 768px) {
.d-md-none { display: none; }
.d-md-block { display: block; }
}
/*Flex布局类*/
.flex-x { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.j-space-between{justify-content:space-between}
.j-flex-start{justify-content:flex-start}
.j-flex-end{justify-content:flex-end}
.j-center{justify-content:center}
.a-j-center{align-items:center;justify-content:center}
.a-center{align-items:center}
.a-flex-start{align-items:flex-start}
.a-flex-end{align-items:flex-end}
.a-j-start { justify-content: flex-start; }
.a-j-end { justify-content: flex-end; }
# 文字渐变色
<h2 class="find-title medium-font">探索更广阔的世界，为您</h2>
<style>
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(-70deg, #ff7170, #ffe57f);
-webkit-background-clip: text;
</style>
<style>
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(-70deg, #9867f0, #ed4e50);
-webkit-background-clip: text;
</style>
<style>
background: linear-gradient(90deg, #f3f9a7, #fbd786, #c6ffdd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-font-smoothing: antialiased;
</style>
<style>
-webkit-text-fill-color: transparent;
background: linear-gradient(90deg, #f59e0b, #ff4582, #0ea5e9);
background-clip: text;
-webkit-background-clip: text;
</style>
# svg
