Oracle开发者门户提供了一个交互式的搜索栏，当用户点击搜索图标时，搜索框会淡入并显示。页面还包括一个轮播图，展示不同的产品和服务，用户可以点击箭头或按钮在图片之间切换。此外，还有‘语言’和‘沙箱’两个滚动区域，用户可以选择不同的编程语言和云服务进行探索。页面底部列出了一系列的开发者案例和事件，方便用户了解更多信息。
js代码：
$(function(){
//搜索栏淡入
$("#search")[0].onclick = function(){
var $text = $("#text")[0];
var $search_text = $(".search_text")[0];
$(".daohanglan")[0].style.display = "none";
$search_text.style.display = "inline";
var num = 0;
$text.focus();
var search_input = setInterval(function(){
$search_text.style.width = 514 + (num*5) + "px";
$text.style.width = 500 + (num*5) + "px";
$search_text.style.left = 160 - (num*2.5) + "px";
num++;
if(num > 60){
clearInterval(search_input);
}
},1);
}
//搜索栏淡出
$("#text")[0].onblur = function(){
var $text = $("#text")[0];
var $search_text = $(".search_text")[0];
var num = 0;
var search_input = setInterval(function(){
$search_text.style.left = 10 + (num*2.5) + "px";
$text.style.width = 800 - (num*5) + "px";
$search_text.style.width = 844 - (num*5) + "px";
num++;
if(num > 60){
clearInterval(search_input);
$(".daohanglan")[0].style.display = "inline";
$search_text.style.display = "none";
}
},1);
}
//View 点击出现
$("#view")[0].onclick = function(){
$(".view")[0].style.width = "371px";
$(".view")[0].focus();
}
//View 失去焦点消失
$(".view")[0].onblur = function(){
$(".view")[0].style.width = "0px";
}
//轮播图部分
//下一张
var img_num = 0;
$("#next_img")[0].onclick = function(){
if(img_num < 2){
img_num++;
}
$("#lunbo")[0].style.left = -(1534*img_num) + "px";
rightColor(img_num);
}
//上一张
$("#last_img")[0].onclick = function(){
if(img_num > 0){
img_num--;
}
$("#lunbo")[0].style.left = -(1534*img_num) + "px";
rightColor(img_num);
}
//按钮控件
for(i=0;i<3;i++){
$(".button")[i].index = i;
}
$(".button").click(function(){
$("#lunbo")[0].style.left = -(1534*this.index) + "px";
img_num = this.index;
rightColor(img_num);
})
//定时轮播
var towards = "right";
setInterval(function(){
if(towards == "right" && img_num <2){
img_num++;
$("#lunbo")[0].style.left = -(1534*img_num) + "px";
if(img_num == 2){
towards = "left";
}
}
else if(towards == "left" && img_num > 0){
img_num--;
$("#lunbo")[0].style.left = -(1534*img_num) + "px";
if(img_num == 0){
towards = "right";
}
}
rightColor(img_num);
},6000);
//language 按钮控件
var language_num = 0;
for(i=0;i<2;i++){
$(".button_language")[i].index = i;
}
$(".button_language").click(function(){
$(".languages")[0].style.left = -(264*4*this.index) + "px";
language_num = this.index;
rightColor_arrow("#last_language","#next_language",language_num,["white","rgb(112,114,117)"]);
rightColor_anniu(".button_language",language_num);
})
//sandbox 按钮控件
var sandbox_num = 0;
for(i=0;i<2;i++){
$(".button_sandbox")[i].index = i;
}
$(".button_sandbox").click(function(){
$(".sandboxs")[0].style.left = -(264*this.index) + "px";
sandbox_num = this.index;
rightColor_arrow("#last_sandbox","#next_sandbox",sandbox_num,["white","rgb(112,114,117)"]);
rightColor_anniu(".button_sandbox",sandbox_num);
})
//language 箭头
arrow("#last_language","#next_language",".languages",4,language_num);
//sandbox 箭头
arrow("#last_sandbox","#next_sandbox",".sandboxs",1,sandbox_num);
//case 动态插入动画
createKeyframes(800,".case",3,"true");
//event 动态插入动画
createKeyframes(1600,".event",3,"false");
//Infrastructure 动态插入动画
createKeyframes(2100,".learn",3,"false");
})
//按钮颜色匹配
function rightColor(img_num){
if(img_num != 1){
for(i=0;i<3;i++){
if(i == img_num){
$(".button")[i].style.backgroundColor = "white";
}else{
$(".button")[i].style.backgroundColor = "rgba(0,0,0,0)";
}
$(".button")[i].style.borderColor = "white";
}
$("#last_img")[0].childNodes[0].style.color = (img_num==0?"rgb(110,114,140)":"white");
$("#next_img")[0].childNodes[0].style.color = (img_num==2?"rgb(110,114,140)":"white");
hoverBackgroundColor(".button","white",img_num);
}
else{
for(i=0;i<3;i++){
if(i == img_num){
$(".button")[i].style.backgroundColor = "rgba(58,54,50,1)";
}else{
$(".button")[i].style.backgroundColor = "rgba(58,54,50,0)";
}
$(".button")[i].style.borderColor = "rgb(58,54,50) ";
}
$("#next_img")[0].childNodes[0].style.color = "black";
$("#last_img")[0].childNodes[0].style.color = "black";
hoverBackgroundColor(".button","rgba(58,54,50,1)",img_num);
}
}
//实现 button:hover
function hoverBackgroundColor(selected,overBackgroundColor,img_num){
for(i=0;i<3;i++){
$(selected)[i].onmouseover = function(){
this.style.backgroundColor = overBackgroundColor;
}
$(selected)[i].onmouseout = function(){
this.style.backgroundColor = "rgba(58,54,50,0)";
}
if(i == img_num){
$(selected)[i].onmouseover = function(){}
$(selected)[i].onmouseout = function(){}
}
}
}
//左右箭头
function arrow(eventSelector1,eventSelector2,selected,distance,num){
$(eventSelector1)[0].onclick = function(){
var str = eventSelector1.split("_")[1];
if(num > 0){
num--;
}
$(selected)[0].style.left = -(264*distance*0) + "px";
rightColor_anniu(".button_"+str,num);
rightColor_arrow(eventSelector1,eventSelector2,num,["white","rgb(112,114,117)"]);
}
$(eventSelector2)[0].onclick = function(){
var str = eventSelector1.split("_")[1];
if(num < 1){
num++;
}
$(selected)[0].style.left = -(264*distance) + "px";
rightColor_anniu(".button_"+str,num);
rightColor_arrow(eventSelector1,eventSelector2,num,["white","rgb(112,114,117)"]);
}
}
//箭头颜色匹配
function rightColor_arrow(eventSelector1,eventSelector2,num,arrowColor){
if(num == 1){
$(eventSelector1)[0].childNodes[0].style.color = arrowColor[0];
$(eventSelector2)[0].childNodes[0].style.color = arrowColor[1];
}
else{
$(eventSelector1)[0].childNodes[0].style.color = arrowColor[1];
$(eventSelector2)[0].childNodes[0].style.color = arrowColor[0];
}
}
//按钮颜色匹配
function rightColor_anniu(selected,num){
for(i=0;i<2;i++){
if(i == num){
$(selected)[i].style.backgroundColor = "white";
}else{
$(selected)[i].style.backgroundColor = "rgb(133,134,137)";
}
}
}
//动画函数
function createKeyframes(height,selected,number,long){
var i = 0;
var keyframeInterval = setInterval(function(){
if(document.documentElement.scrollTop > height){
var jianbian = setInterval(function(){
$(selected)[i].style.animationName = "up";
$(selected)[i].style.opacity = "1";
if(long =="true"){
$(selected)[i+4].style.animationName = "up";
$(selected)[i+4].style.opacity = "1";
}
if(i<number){
i++;
}else{
clearInterval(jianbian);
}
},200,i,long);
clearInterval(keyframeInterval);
}
},500,i,long);
}html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oracle Developers Portal</title>
<link rel="stylesheet" href="reset.min.css">
<link rel="stylesheet" href="font/iconfont.css">
<link rel="stylesheet" href="Index.css">
<script type="text/javascript" src="jQuery-3.6.js"></script>
<script text="text/javascript" src="Index.js"></script>
</head>
<body>
<div class="frame">
<div class="title">
<div class="logo l">
<a href="#"><img src="image/title/title1.png"></a>
</div>
<div class="search_text l ">
<input id="button" type="button" value="〈">
<input id="text" type="text" value="">
</div>
<div class="daohanglan l">
<div class="sousuo l">
<a href="#" id="search"><img src="image/title/title2.png"></a>
</div>
<a class="daohang" href="">Getting Started</a>
<a class="daohang" href="">Learn</a>
<a class="daohang" href="">Build</a>
<a class="daohang" href="">Community</a>
<a class="daohang" href="">Downloads</a>
</div>
<div class="useroperatelist r">
<a href="#" id="view">
<div class="useroperate l">
<span class="iconfont"></span> View Accounts
</div>
</a>
<div class="view" tabindex='0'>
<div class="viewlist front">
<div class="title">Cloud Account</div>
<div>
<button class="black">Sign in to Cloud
<div class="l">
<img src="image/cloud.png">
</div>
</button>
</div>
<div><button class="white">Sign Up for Free Cloud Tier</button></div>
</div>
<div class="viewlist">
<div class="title">Oracle Account</div>
<div><button class="black">Sign-in</button></div>
<div><button class="white">Create an Account</button></div>
</div>
</div>
<a href="">
<div class="useroperate l">
Get Started For Free
</div>
</a>
</div>
</div>
</div>
<div class="transition">
<span>Oracle Developer Resource Center</span>
</div>
<div class="gundong">
<a href="">
<img id="lunbo" src="image/gundong/gundong.png">
</a>
<div class="anniu">
<a href="#javascript" id="last_img"><span class="iconfont l zuo"></span></a>
<a href="#javascript" class="gundonganniu"><div class="button l firstbutton"></div></a>
<a href="#javascript" class="gundonganniu"><div class="button l"></div></a>
<a href="#javascript" class="gundonganniu"><div class="button l"></div></a>
<a href="#javascript" id="next_img"><span class="iconfont l"></span></a>
</div>
</div>
<div class="context">
<div class="shortlist">
<div class="short l">
<img src="image/short/short1.png"></br>
<span class="shorttitle">Build Arm Apps on Oracle Cloud</span></br>
<a href="">Learn about Ampere A1 Compute</a></br>
<a href="">Build your first Arm app on Kubernetes</a>
</div>
<div class="short l">
<img src="image/short/short2.png"></br>
<span class="shorttitle">Launch a Linux VM</span></br>
<a href="">Explore Terraform with Oracle Linux lab</a></br>
<a href="">Watch a demo (8:32)</a>
</div>
<div class="short l">
<img src="image/short/short3.png"></br>
<span class="shorttitle">Launch a MySQL Database</span></br>
<a href="">Deploying MySQL databases using the OCI <br>MySQL Service</a></br>
</div>
<div class="short l">
<img src="image/short/short4.png"></br>
<span class="shorttitle">Deploy a Kubernetes Cluster</span></br>
<a href="">Launch Kubernetes using Cloud Shell</a>
</div>
</div>
<div class="language l">
<div class='mulutitle'>Develop in your favorite language</div>
<div class='gundonglanguage'>
<a href="#javascript" id="last_language"><span class="iconfont l"></span></a>
<div class='languageframe l'>
<div class='languages'>
<img src="image/language/python.png">
<img src="image/language/js.png">
<img src="image/language/java.jpg">
<img src="image/language/net.png">
<img src="image/language/ruby.png">
<img src="image/language/php.png">
<img src="image/language/terraform.png">
<img src="image/language/apex.png">
<img src="image/language/sdk.png">
</div>
</div>
<a href="#javascript" id="next_language"><span class="iconfont l"></span></a>
</div>
<div class="anniu_language">
<a href="#javascript"><div class="button_language l first_language"></div></a>
<a href="#javascript"><div class="button_language l"></div></a>
</div>
</div>
<div class="sandbox l">
<div class='mulutitle'>Pick your sandbox</div>
<div class='gundongsandbox'>
<a href="#javascript" id="last_sandbox"><span class="iconfont l"></span></a>
<div class='sandboxframe l'>
<div class='sandboxs'>
<img src="image/sandbox/oracle.png">
<img src="image/sandbox/opensource.png">
<img src="image/sandbox/mysql.png">
<img src="image/sandbox/graalvm.png">
<img src="image/sandbox/linux.png">
<img src="image/sandbox/database.png">
</div>
</div>
<a href="#javascript" id="next_sandbox"><span class="iconfont l"></span></a>
</div>
<div class="anniu_language">
<a href="#javascript"><div class="button_sandbox l first_sandbox"></div></a>
<a href="#javascript"><div class="button_sandbox l"></div></a>
</div>
</div>
<div class="cases">
<div class="mulutitle">Use cases</div>
<div class="caseslist">
<div class="case l">
<img src="image/cases/cb79-enterpriseapp.png">
<div class="casename">Enterprise Apps</div>
<div class="p">Comprehensive set of enterprise<br> grade tools to build large scale,<br> mission critical applications.</div>
<a href="">See Enterprise App solutions</a>
</div>
<div class="case l">
<img src="image/cases/cb79-ml-ai.png">
<div class="casename">ML/AI</div>
<div class="p">Accelerate the creation and<br> deployment of machine learning<br> models and automate routine tasks<br> with AI.</div>
<a href="">See ML/AI solutions</a>
</div>
<div class="case l">
<img src="image/cases/cb79-webapp.png">
<div class="casename">Web Apps</div>
<div class="p">Speed, performance, scalability for all<br> your application needs.</div>
<a href="">See Web App solutions</a>
</div>
<div class="case l">
<img src="image/cases/cb79-container.png">
<div class="casename">Containers</div>
<div class="p">Fully managed cluster for any<br> workload.</div>
<a href="">See Containers solutions</a>
</div>
<div class="case l long">
<img src="image/cases/cb79-analytics-v3.png">
<div class="casename">Analytics</div>
<div class="p">Techniques and tools for <br>implementing impactful analytics<br> capabilities.</div>
<a href="">See Analytics solutions</a>
</div>
<div class="case l long">
<img src="image/cases/cb79-serverless.png">
<div class="casename">Serverless</div>
<div class="p">Focus on your applications rather<br> than servers.</div>
<a href="">See Serverless solutions</a>
</div>
<div class="case l long">
<img src="image/cases/cb79-category-hpc.png">
<div class="casename">HPC</div>
<div class="p">Enhanced high-performance network cluster to solve any complex problem.</div>
<a href="">See High Performance<br> Computing solutions</a>
</div>
<div class="case l long">
<img src="image/cases/cb79-modern-appdev.png">
<div class="casename">Modern Application Development</div>
<div class="p">Modern App Development is your<br> guide to build secure, resilient, and<br> scalable applications in OCI.</div>
<a href="">See Modern App Development <br>solutions</a>
</div>
</div>
</div>
<div class="events">
<div class="mulutitle">Developer Events</div>
<div class="eventslist">
<div class="event l">
<img src="image/human/human1.png">
<div class="casename">Hybrid Cloud Native Application<br> Management & Monitoring</div>
<div class="p">Sid Joshi, OCI Specialist Director
<br><br>Register now:</div>
<a href="">December 9, 2021 at 10:30am CET</a>
</div>
<div class="event l">
<img src="image/human/human2.jpg">
<div class="casename">Novidades do Autonomous Database (ADB)</div>
<div class="p">Renato Gomes, Cloud Solution Engineer
<br><br>Register now:</div>
<a href="">December 10, 2021 at 9am BRT</a>
</div>
<div class="event l">
<img src="image/human/human3.jpg">
<div class="casename">Content Tokenization w/ Oracle<br> Blockchain Platform</div>
<div class="p">Adrien Lhemann, Cloud Engineer
<br>Mark Rakhmilevich, Senior Director
<br><br>Register now:</div>
<a href="">December 13, 2021 at 9am PT | 12pm ET</a>
</div>
<div class="event l">
<img src="image/human/human4.jpg">
<div class="casename">Introduction to Data Science</div>
<div class="p">Jeroen Kloosterman, Product Strategy Director
<br><br>Register now:</div>
<a href="">December 15-16, 2021 at 9:30am CET</a>
</div>
<div class="moreevents">
<button>See more events</button>
</div>
</div>
</div>
<div class="infrastructure">
<div class="infrastructure_title">Get Started with Oracle Cloud Infrastructure</div>
<div class="learn l">
<div class="learntitle">Learn</div>
<a href="">Training</a>
<a href="">Hands-on Labs</a>
<a href="">Architecture Center</a>
<a href="">Virtual Events</a>
</div>
<div class="learn l">
<div class="learntitle">Develop</div>
<a href="">OCI Developer Guide</a>
<a href="">OCI Developer Tutorials</a>
<a href="">Set up CLI</a>
<a href="">Documentation</a>
</div>
<div class="learn l">
<div class="learntitle">Connect</div>
<a href="">Beards & Beers on OCI</a>
<a href="">The Developer Interviews</a>
<a href="">Groundbreakers Developer Community</a>
<a href="">Sign up for developer newsletters</a>
<a href="">Subscribe to Java Magazine</a>
</div>
</div>"
</div>
<div class="free">
<div class="title">Try Always Free. No Time Limits.</div>
Get Free Tier with no time limits on a selection of Always Free services like Autonomous Database, Compute, and Storage, and US$300 in free<br> credits to try additional cloud services.
<div class="forfree">
<button>Get started for free</button>
</div>
</div>
<div class="shares">
<div class="title l">Follow Oracle Developers</div>
<div class="share l">
<span class="iconfont"></span>
<a href="">Facebook</a>
</div>
<div class="share l">
<span class="iconfont"></span>
<a href="">Twitter</a>
</div>
<div class="share l">
<span class="iconfont"></span>
<a href="">RSS</a>
</div>
<div class="share l">
<span class="iconfont"></span>
<a href="">Blog</a>
</div>
<div class="share l">
<span class="iconfont"></span>
<a href="">YouTube</a>
</div>
</div>
<div class="background">
<img src="image/background.png">
</div>
<div class="tails">
<div class="tail l first">
<div class="title">Resources for</div>
<a href="">Careers</a>
<a href="">Developers</a>
<a href="">Open Source at Oracle</a>
<a href="">Oracle GitHub</a>
<a href="">Developer GitHub</a>
<a href="">Startups</a>
<a href="">Students and Educators</a>
</div>
<div class="tail l">
<div class="title">Why Oracle</div>
<a href="">Open Source at Oracle</a>
<a href="">Security Practices</a>
<a href="">Diversity and Inclusion</a>
<a href="">Corporate Responsibility</a>
<a href="">Cloud Economics</a>
<a href="">Oracle vs AWS</a>
<a href="">Sustainability</a>
</div>
<div class="tail l">
<div class="title">Learn</div>
<a href="">What is DevOps?</a>
<a href="">What is Low Code?</a>
<a href="">What is Docker?</a>
<a href="">What is Kubernetes?</a>
<a href="">What is Python?</a>
<a href="">What Is Infrastructure As Code?</a>
<a href="">What is Ruby?</a>
</div>
<div class="tail l">
<div class="title">What's new</div>
<a href="">Try Oracle Cloud Free Tier</a>
<a href="">Free Training</a>
<a href="">Arm for Developers</a>
<a href="">Cloud Architecture Center</a>
<a href="">Reference Architectures</a>
<a href="">Solution Playbooks</a>
<a href="">Red Bull Racing Honda</a>
</div>
<div class="tail l">
<div class="title">Contact Us</div>
<a href="">Developer Newsletter</a>
<a href="">Events</a>
<a href="">Developer Live</a>
<a href="">Blog - Developer</a>
<a href="">Blog - Cloud Infrastructure</a>
<a href="">Oracle Developer Community</a>
<a href="">Twitter - Oracle Developers</a>
</div>
<div class="xuanzhe l">
<div class="select l">
<div class="l">
<img src="image/diqiu.png">
</div>
<a href="">Select Language</a>
</div>
<div class="shezhi l">
<a href="">© 2021 Oracle</a> 丨
<a href="">Site Map</a>
<a href="">Privacy</a> /
<a href="">Do Not Sell My Info</a>
<a href="" class="yellow">Cookie 喜好设置</a>
<a href="">Ad Choices</a>
</div>
<div class="share_tubiao l">
<span class="iconfont l"></span>
<span class="iconfont l"></span>
<span class="iconfont l"></span>
</div>
</div>
</div>
</body>
</html>Less代码：
@a_color:rgb(239,203,113);
body{
font-size: 14px;
font-weight: 600;
color:white;
a{
color:white;
text-decoration: none;
}
.l{
float:left;
}
.r{
float:right;
}
.frame{
position: fixed;
z-index: 999;
width:100%;
height:60px;
background-color: rgb(58,54,50);
.title{
width:1344px;
margin:0 auto;
.logo{
img{
width:123px;
}
}
.search_text{
display:none;
width: 514px;
position: relative;
left:176px;
height: 40px;
input{
border: none;
outline:none;
background-color: white;
height:40px;
position: absolute;
top: 10px;
}
#button{
top:10px;
width: 40px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
left:0px;
font-weight: bolder;
font-size: 20px;
}
#text{
font-size: 18px;
height: 38px;
margin-left: -4px;
width: 470px;
left:44px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
}
.daohanglan{
margin-left:197px;
padding-top: 22px;
line-height: 20px;
.sousuo{
width:20px;
height: 20px;
margin-right:20px;
img{
width:20px;
}
}
.daohang{
margin-right:20px;
}
.daohang:hover{
text-decoration: underline;
}
}
.useroperatelist{
width:373px;
height:43px;
position: relative;
.view{
overflow: hidden;
position: absolute;
top:55px;
left:20px;
width:0px;
height: 395px;
background-color: rgb(251,249,248);
border-radius: 4px;
z-index:999;
.viewlist{
position: relative;
padding:40px 30px 0 30px;
height:160px;
.title{
color:rgb(64,63,61);
margin-bottom: 20px;
}
.black{
background-color: rgb(49,45,42);
color:rgb(251,249,248);
border:none;
position:relative;
div{
position: absolute;
top:11px;
left:195px;
img{
width:22px;
}
}
}
.black:hover{
background-color: rgb(22,21,19);
}
.white{
background-color: rgb(255,255,255);
border:1px black solid;
}
.white:hover{
background-color: rgb(245,244,242);
}
button{
border-radius: 4px;
width:300px;
height: 42px;
font-weight: 600;
margin-bottom:12px;
font-size: 14px;
}
}
.front{
border-bottom:1px rgb(225,222,220) solid;
}
}
.useroperate{
background-color: rgb(49,45,42);
width:164px;
height:44px;
margin-left: 20px;
line-height: 43px;
text-align: center;
border-radius: 4px;
margin-top:8px;
.iconfont {
font-size:24px;
margin-right:7px;
vertical-align: sub;
font-weight: 500;
}
}
}
}
}
.transition{
position: relative;
top:60px;
height:148px;
width:100%;
background-color: rgb(22,21,19);
line-height: 88px;
font-weight: 600;
font-size: 14px;
border-bottom: 1px rgb(46,45,43) solid;
span{
margin-left: 60px;
text-align: left;
}
}
.gundong{
position: relative;
background-color: rgb(52,54,59);
overflow: hidden;
img{
height:397px;
position:relative;
left:0px;
transition: left 0.3s;
}
.anniu{
width: 232px;
height: 80px;
position:absolute;
bottom:0px;
left:654px;
.button{
width: 10px;
height:10px;
border-radius: 50px;
margin:30px 6px;
border:2px white solid;
transition:background-color 0.3s;
}
.firstbutton{
background-color: white;
}
.button:hover{
background-color: white;
}
.iconfont{
display: inline-block;
width: 62px;
height: 73px;
color:white;
font-size: 40px;
text-align: center;
line-height: 73px;
padding-right:5px;
}
.zuo{
color:rgb(110,114,140);
}
.iconfont:hover{
background-color: rgba(58,54,50,0.2);
}
}
}
.context{
width:100%;
height: 2479px;
background-color: rgb(52,54,59);
padding-top:35px;
position:relative;
.shortlist{
width:1470px;
margin:0 auto;
padding-left:45px;
.short{
width:350px;
img{
margin-bottom:7px;
}
.shorttitle{
display: inline-block;
font-size:20px;
font-weight: 500;
margin-bottom: 11px;
}
a{
display: inline-block;
color:@a_color;
font-size: 15px;
line-height: 36px;
font-weight: lighter;
}
a:hover{
text-decoration: underline;
}
}
}
.language{
width:1436px;
margin:0 auto;
position: absolute;
top:287px;
left:50px;
}
.sandbox{
width:1436px;
margin:0 auto;
position: absolute;
top:555px;
left:50px;
}
.mulutitle{
font-size:44px;
font-weight: 500;
}
.gundonglanguage{
.iconfont{
color:rgb(112,114,117);
width: 60px;
height: 73px;
font-size: 70px;
text-align: center;
line-height: 73px;
margin: 45px 14px 0 -20px;
}
.languageframe{
margin-top: 28px;
width:1312px;
overflow: hidden;
.languages{
transition: left 0.3s;
position:relative;
left:0px;
width: 4000px;
height:250px;
padding:10px 10px;
img{
border-top:2px white solid;
border-bottom:2px white solid;
border-left:1px white solid;
border-right:1px white solid;
width:228px;
background-color: rgb(73,77,83);
margin-right:30px;
height: 84px;
transition:all 0.3s;
}
img:hover{
transform:scale(1.04);
box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
border-top:1px white solid;
border-bottom:2px white solid;
border-left:1px white solid;
border-right:2px white solid;
}
}
}
#next_language{
span{
color:white;
}
}
}
.gundongsandbox{
.iconfont{
color:rgb(112,114,117);
width: 60px;
height: 73px;
font-size: 70px;
text-align: center;
line-height: 73px;
margin: 45px 14px 0 -20px;
}
.sandboxframe{
margin-top: 28px;
width:1312px;
overflow: hidden;
.sandboxs{
transition: left 0.3s;
position:relative;
left:0px;
width: 4000px;
height:250px;
padding:10px 10px;
img{
border-top:2px white solid;
border-bottom:2px white solid;
border-left:1px white solid;
border-right:1px white solid;
width:228px;
background-color: rgb(73,77,83);
margin-right:30px;
height: 84px;
transition:all 0.3s;
}
img:hover{
transform:scale(1.04);
box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
border-top:1px white solid;
border-bottom:2px white solid;
border-left:1px white solid;
border-right:2px white solid;
}
}
}
#next_sandbox{
span{
color:white;
}
}
}
.anniu_language{
width: 60px;
height: 20px;
position:absolute;
bottom:120px;
left:680px;
.button_language{
width: 15px;
height:15px;
border-radius: 50px;
margin:0 6px;
background-color: rgb(133,134,137);
transition:background-color 0.3s;
}
.first_language{
background-color: white;
}
.button_language:hover{
background-color: white;
}
.button_sandbox{
width: 15px;
height:15px;
border-radius: 50px;
margin:0 6px;
background-color: rgb(133,134,137);
transition:background-color 0.3s;
}
.first_sandbox{
background-color: white;
}
.button_sandbox:hover{
background-color: white;
}
}
.cases{
width:1440px;
margin:0 auto;
position: absolute;
top:787px;
left:54px;
.case{
position: relative;
opacity: 0;
animation-duration: 0.5s;
animation-timing-function:linear;
margin:28px 36px 28px 0;
width:322px;
height: 322px;
background-color: rgb(73,77,83);
padding-left:26px;
padding-top: 16px;
box-sizing:border-box;
.casename{
font-size: 25px;
margin-top: 30px;
margin-bottom: 13px;
}
.p{
font-size: 14px;
font-weight: 500;
line-height: 25px;
margin-bottom: 9px;
}
a{
display: inline-block;
color:@a_color;
font-size: 15px;
line-height: 20px;
font-weight: lighter;
}
a:hover{
text-decoration: underline;
}
}
.long{
height: 345px;
}
}
.events{
width:1440px;
margin:0 auto;
position: absolute;
top:1659px;
left:54px;
.event{
position: relative;
opacity: 0;
animation-duration: 0.5s;
animation-timing-function:linear;
margin:25px 36px 28px 0;
width:322px;
height: 345px;
.casename{
font-size: 17px;
margin-top: 30px;
margin-bottom: 13px;
line-height: 22px;
}
.p{
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
a{
display: inline-block;
color:@a_color;
font-size: 15px;
line-height: 20px;
font-weight: lighter;
}
a:hover{
text-decoration: underline;
}
}
.moreevents{
width:149px;
height:48px;
position: absolute;
left:620px;
top:476px;
button{
border:none;
border-radius: 4px;
width: 100%;
height: 100%;
background-color: white;
}
button:hover{
background-color: rgb(245,243,242);
cursor: pointer;
}
}
}
.infrastructure{
width:1440px;
margin:0 auto;
position: absolute;
top:2235px;
left:54px;
.infrastructure_title{
font-size: 37px;
width:823px;
margin:0 auto;
}
.learn{
position: relative;
opacity: 0;
animation-duration: 0.5s;
animation-timing-function:linear;
margin:25px 36px 28px 0;
width:430px;
height: 345px;
.learntitle{
font-size: 23px;
margin-bottom:5px;
}
a{
display:block;
color:@a_color;
font-size: 15px;
line-height: 30px;
font-weight: 500;
}
a:hover{
text-decoration: underline;
}
}
}
}
.free{
width:100%;
background-color: rgb(38,71,89);
text-align: center;
padding:40px 0 63px 0;
font-weight: 500;
line-height: 22px;
.title{
font-size: 37px;
margin-bottom: 32px;
}
.forfree{
width:149px;
height:48px;
margin:0 auto;
button{
border:none;
border-radius: 4px;
width: 100%;
height: 100%;
background-color: white;
margin:20px;
}
button:hover{
background-color: rgb(245,243,242);
cursor: pointer;
}
}
}
.shares{
width:100%;
height:104px;
background-color: rgb(22,21,19);
.title{
font-size: 27px;
font-weight:lighter;
width:200px;
line-height: 38px;
height:80px;
margin: 15px 27px 0 60px;
}
.share{
width:60px;
text-align: center;
padding:30px 10px 0 10px;
margin-left: 130px;
.iconfont{
display: inline-block;
font-size: 35px;
margin-bottom:12px;
}
a:hover{
text-decoration: underline;
}
}
}
.background{
background-color: rgb(52,54,59);
img{
width: 100%;
}
}
.tails{
background-color: rgb(52,54,59);
height:380px;
padding-top:29px;
.tail{
width:220px;
background-color: rgb(52,54,59);
margin-right: 37px;
.title{
font-size: 18px;
color:rgb(165,165,166);
margin:15px 0;
}
a{
display: block;
font-weight: 500;
line-height: 25px;
}
}
.first{
margin-left:150px;
}
}
.xuanzhe{
width:1500px;
position: relative;
top: 88px;
.select{
margin-left: 340px;
margin-right: 45px;
div{
margin: 3px 4px 0 0;
}
width: 120px;
}
a{
display: inline-block;
color:@a_color;
font-size: 12px;
line-height: 20px;
font-weight: lighter;
font-weight:500;
}
a:hover{
text-decoration: underline;
}
.shezhi{
margin-right: 50px;
.yellow{
display: inline-block;
color:white;
font-size: 12px;
line-height: 20px;
font-weight: lighter;
font-weight:500;
}
.yellow:hover{
color:@a_color;
text-decoration: underline;
}
}
.share_tubiao{
span{
display: inline-block;
margin-top:-2px;
margin-right:20px;
font-size: 22px;
}
}
}
}
@keyframes up{
from{
top:100px;
opacity: 0;
}
to{
top:0px;
opacity: 1;
}
}
5705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
