JAVA开发 比亚迪汽车官网code
·
在看到制作精美的网页时,都有会发出感叹的经验。在浏览网页时对于不同的网站,有的网站会使我们产生赏心悦目的使用体验,而有的网站则很难给人留下深刻的印象。
对于相同的技术来说,在网页制作这个层面上更加注重的是设计天赋和灵感。
现在有两个设计师技术水平相当。但是一个设计师在美术造诣上更加具有天赋,而且善于设计。而另一位设计师却缺乏这样的资质和能力。两位设计师设计出的网页会有天差地别的效果。
你可能会对第一位设计师的作品十分欣赏,而另一位设计师的作品却不能给你留下任何深刻印象。
这跟商品设计是一个道理,商品是讲求设计的。你经常体验到商品经过精心设计后,在使用者中产生了风靡效果,成为了fashionable的明星商品。而同类商品虽然技术细节相同,但是在销售过程中却没有产生相同的效果。
区别就在于风靡商品的设计师在进行商品设计时将自己的天赋和灵感注入到商品的每个细节中,这和设计师的价值取向,对美的看法,设计师的品格相辅相成的。
如果一个人举止粗鲁,思想空乏。他所表达的内容和思想一定不会让你产生什么兴趣~~~哈哈哈哈,这个是必然的。
那么,不聊那么多,上一个某汽车网站的code。
来!上code~~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#div0{
/*border : 1px solid brown;*/
width: 100%;
height: 1900px;
}
#div1{
/*border : 1px solid brown;*/
width: 1200px;
height: 170px;
position: relative;
margin: auto;
text-align: center;
font-size: 25px;
font-weight: 600;
text-align: center;
padding-top: 20px;
}
#table1{
list-style: none;
position: relative;
margin: auto;
text-align: center;
}
#hr1{
position: relative;
margin: auto;
}
#hr2{
position: relative;
margin: auto;
margin-top: 20px;
height: 1px;
background-color: burlywood;
}
#sp1{
font-size: 25px;
position: relative;
margin: auto;
display: inline-block;
color: darkgreen;
font-family: icomoon;
}
#sp2{
font-size: 6px;
position: relative;
margin: auto;
display: inline-block;
color: darkgreen;
font-family: icomoon;
}
#table2{
position: relative;
top: -4px;
height: 55px;
width: 1200px;
font-size: 15px;
color: saddlebrown;
/*border: 1px solid black;*/
}
#table2 td{
position: relative;
line-height: 70px;
/*border: 1px solid black;*/
}
/*#table2 td:hover{
color: #335F7D
}*/
.td{
/*border: 1px solid black;*/
width: 170px;
text-align: center;
}
#td-first{
width: 200px;
text-align: left;
}
#td-last
{
text-align: center;
}
#table2-div1{
position: relative;
width: 155px;
height: 80px;
left: -2px;
margin-top: -2px;
border-top: 6px solid transparent;
transition: all 0.5s ease-in;
/*border: 1px solid black;*/
}
#table2-div2{
width: 45px;
height: 80px;
/*border: 1px solid green;*/
position: relative;
left: 60px;
margin-top: -2px;
border-top: 6px solid transparent;
transition: all 0.5s ease-in;
}
#table2-div3{
width: 75px;
height: 80px;
/*border: 1px solid green;*/
position: relative;
left: 45px;
margin-top: -2px;
border-top: 6px solid transparent;
transition: all 0.5s ease-in;
}
#table2-div4{
width: 110px;
height: 80px;
/*border: 1px solid green;*/
position: relative;
left: 30px;
margin-top: -2px;
border-top: 6px solid transparent;
transition: all 0.5s ease-in;
}
#table2-div5{
width: 45px;
height: 80px;
/*border: 1px solid green;*/
position: relative;
left: 60px;
margin-top: -2px;
border-top: 6px solid transparent;
transition: all 0.5s ease-in;
}
#table2-div6{
width: 75px;
height: 80px;
/*border: 1px solid green;*/
position: relative;
left: 50px;
margin-top: -2px;
border-top: 6px solid transparent;
transition: all 0.5s ease-in;
}
#table2-div7{
width: 70px;
height: 80px;
/*border: 1px solid green;*/
position: relative;
left: 65px;
margin-top: -2px;
border-top: 6px solid transparent;
transition: all 0.5s ease-in;
}
#table2 div:hover{
border-top: 6px solid darkgreen;
color: darkgreen;
cursor: pointer;
}
/*listdiv1列表样式*/
#listdiv1{
height: 550px;
width: 100%;
background-color: burlywood;
position: relative;
display: none;
/*height: 0px;*/
/*top: -1px;*/
/*border: 1px solid brown;*/
}
#listdiv1-ul{
position: relative;
top: 5px;
/*border-bottom: 75px;*/
left: 265px;
list-style: none;
color: saddlebrown;
}
#listdiv1-ul li{
width: 360px;
height: 50px;
line-height: 50px;
border-bottom: 1px solid white;
border-top: 5px solid transparent;
margin-bottom: -2px;
}
#listdiv1-ul-li7{
width: 400px;
}
#listdiv1-ul li:not(:first-child):hover{
width: 360px;
/*height: 50px;
line-height: 50px;*/
border-top: 5px solid darkgreen;
color: darkgreen;
}
/*#listdiv1-ul-li-last{
border-bottom: 1px solid white;
}
#listdiv1-ul-li-last:hover{
border-top: 3px solid #335F7D;
}*/
/*第一个子有序列表样式*/
#listdiv1-sublistdiv1{
position: relative;
margin: auto;
top: -378px;
/*border-bottom: 75px;*/
left: 360px;
list-style: none;
background-color: burlywood;
color: saddlebrown;
/*border: 1px solid brown;*/
width: 600px;
height: 375px;
display: none;
}
#listdiv1-sublistdiv1-ul1{
position: relative;
list-style: none;
left: 20px;
}
#listdiv1-sublistdiv1-ul1 li{
width: 360px;
height: 50px;
line-height: 50px;
border-bottom: 1px solid white;
border-top: 5px solid transparent;
margin-bottom: -2px;
}
#listdiv1-sublistdiv1-ul1 li:not(:first-child):hover
{
/*width: 360px;
height: 50px;
line-height: 50px;*/
border-top: 5px solid darkgreen;
color: darkgreen;
}
/*#listdiv1{
display: none;
}
#listdiv1-sublistdiv1{
display: none;
}*/
#listdiv1-sublistdiv2{
position: relative;
margin: auto;
top: -486px;
/*border-bottom: 75px;*/
left: 360px;
list-style: none;
background-color: burlywood;
color: saddlebrown;
/*border: 1px solid brown;*/
width: 600px;
height: 485px;
display: none;
}
#listdiv1-sublistdiv2-ul1{
position: relative;
list-style: none;
left: 20px;
}
#listdiv1-sublistdiv2-ul1 li{
width: 360px;
height: 50px;
line-height: 50px;
border-bottom: 1px solid white;
border-top: 5px solid transparent;
}
#listdiv1-sublistdiv2-ul1 li:not(:first-child):hover
{
width: 360px;
height: 50px;
line-height: 50px;
border-top: 5px solid darkgreen;
color: darkgreen;
}
/*listdiv2列表样式*/
#listdiv2{
/*display: none;*/
height: 770px;
width: 100%;
background-color: burlywood;
position: relative;
display: none;
}
#listdiv2-ul{
position: relative;
top: 5px;
/*border-bottom: 75px;*/
left: 265px;
list-style: none;
color: saddlebrown;
}
#listdiv2-ul li{
width: 360px;
height: 50px;
line-height: 50px;
margin-bottom: -2px;
border-bottom: 1px solid white;
border-top: 5px solid transparent;
}
#listdiv2-ul-li7{
width: 400px;
}
#listdiv2-ul li:not(:first-child):hover{
width: 360px;
height: 50px;
line-height: 50px;
border-top: 5px solid darkgreen;
color: darkgreen;
}
/*listdiv3列表样式*/
#listdiv3{
/*display: none;*/
height: 285px;
width: 100%;
background-color: burlywood;
position: relative;
display: none;
}
#listdiv3-ul{
position: relative;
top: 5px;
/*border-bottom: 75px;*/
left: 265px;
list-style: none;
color: saddlebrown;
}
#listdiv3-ul li{
width: 360px;
height: 50px;
line-height: 50px;
margin-bottom: -2px;
border-bottom: 1px solid white;
border-top: 5px solid transparent;
}
#listdiv3-ul-li7{
width: 400px;
}
#listdiv3-ul li:not(:first-child):hover{
width: 360px;
height: 50px;
line-height: 50px;
border-top: 5px solid darkgreen;
color: darkgreen;
}
/*listdiv4列表样式*/
#listdiv4{
/*display: none;*/
height: 440px;
width: 100%;
background-color: burlywood;
position: relative;
display: none;
}
#listdiv4-ul{
position: relative;
top: 5px;
/*border-bottom: 75px;*/
left: 265px;
list-style: none;
color: saddlebrown;
}
#listdiv4-ul li{
width: 360px;
height: 50px;
line-height: 50px;
margin-bottom: -2px;
border-bottom: 1px solid white;
border-top: 5px solid transparent;
}
#listdiv4-ul-li7{
width: 400px;
}
#listdiv4-ul li:not(:first-child):hover{
width: 360px;
height: 50px;
line-height: 50px;
border-top: 5px solid darkgreen;
color: darkgreen;
}
#div-lun3{
position: relative;
/*border: 1px solid brown;*/
/*width: 100%;*/
height: 543px;
display: flex;
overflow: hidden;
/*border: 1px solid black;*/
/*right: -1950px;*/
/*transition: all 3s ease-in;*/
}
.div-lun3-img{
position: relative;
left: -1920px;
transition: all 0.5s ease-in;
object-fit: cover;
}
#div-lun3-button-div{
position: relative;
top: -295px;
}
#div-lun3-button2{
position: relative;
left: 1605px;
}
#div-lun3-button-div img:hover{
cursor: pointer;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(function(){
//下拉列表
$("#table2-div1").mouseover(function(){
$("#listdiv1").stop();
$("#listdiv1").slideDown(250);
})
$("#table2-div1").mouseleave(function(){
$("#listdiv1").stop();
$("#listdiv1").slideUp(250);
})
$("#listdiv1").mouseover(function(){
$("#listdiv1").stop();
$("#listdiv1").slideDown(250);
})
$("#listdiv1").mouseleave(function(){
$("#listdiv1").stop();
$("#listdiv1").slideUp(250);
})
//诚信,合规与风险鼠标移入事件
$("#listdiv1-ul-li7").mouseover(function(){
$("#listdiv1-sublistdiv1").stop();
$("#listdiv1-sublistdiv1").show(250);
})
//诚信,合规与风险鼠标移入事件
$("#listdiv1-sublistdiv1").mouseleave(function(){
$("#listdiv1-sublistdiv1").stop();
$("#listdiv1-sublistdiv1").hide(250);
})
//诚信,合规与风险鼠标移出事件
$("#listdiv1-ul-li7").mouseleave(function(){
$("#listdiv1-sublistdiv1").stop();
$("#listdiv1-sublistdiv1").hide(250);
})
//工厂鼠标移入事件
$("#listdiv1-ul-li-last").mouseover(function(){
$("#listdiv1-sublistdiv2").stop();
$("#listdiv1-sublistdiv2").show(250);
})
//工厂鼠标移入事件
$("#listdiv1-sublistdiv2").mouseleave(function(){
$("#listdiv1-sublistdiv2").stop();
$("#listdiv1-sublistdiv2").hide(250);
})
//工厂鼠标移入事件
$("#listdiv1-ul-li-last").mouseleave(function(){
$("#listdiv1-sublistdiv2").stop();
$("#listdiv1-sublistdiv2").hide(250);
})
$("#table2-div2").mouseover(function(){
$("#listdiv2").stop();
$("#listdiv2").slideDown(250);
})
$("#table2-div2").mouseleave(function(){
$("#listdiv2").stop();
$("#listdiv2").slideUp(250);
})
$("#listdiv2").mouseover(function(){
$("#listdiv2").slideDown(250);
$("#listdiv2").stop();
})
$("#listdiv2").mouseleave(function(){
$("#listdiv2").stop();
$("#listdiv2").slideUp(250);
})
$("#table2-div3").mouseover(function(){
$("#listdiv3").stop();
$("#listdiv3").slideDown(250);
})
$("#table2-div3").mouseleave(function(){
$("#listdiv3").stop();
$("#listdiv3").slideUp(250);
})
$("#listdiv3").mouseover(function(){
$("#listdiv3").stop();
$("#listdiv3").slideDown(250);
})
$("#listdiv3").mouseleave(function(){
$("#listdiv3").stop();
$("#listdiv3").slideUp(250);
})
$("#table2-div4").mouseover(function(){
$("#listdiv4").stop();
$("#listdiv4").slideDown(250);
})
$("#table2-div4").mouseleave(function(){
$("#listdiv4").stop();
$("#listdiv4").slideUp(250);
})
$("#listdiv4").mouseover(function(){
$("#listdiv4").stop();
$("#listdiv4").slideDown(250);
})
$("#listdiv4").mouseleave(function(){
$("#listdiv4").stop();
$("#listdiv4").slideUp(250);
})
$("#div-lun3-button1").mouseover(function(){
$("#div-lun3-button1").attr("src","img/icon_19.png");
})
$("#div-lun3-button1").mouseleave(function(){
$("#div-lun3-button1").attr("src","img/icon_17.png");
})
$("#div-lun3-button2").mouseover(function(){
$("#div-lun3-button2").attr("src","img/icon_18.png");
})
$("#div-lun3-button2").mouseleave(function(){
$("#div-lun3-button2").attr("src","img/icon_16.png");
})
$("#div-lun3-button1").click(function(){
var index = -1;
lun(index);
})
$("#div-lun3-button2").click(function(){
var index = 1;
lun(index);
})
//轮播图
var len = 0;
// function lun(){
// var imgs=["img/20211216172254.ashx","img/img/20220620193934.ashx"];
// var index = 0;
// while(index < 2){
// index ++;
// $(".div-lun3-img").after(${imgs[0]});
// $(".div-lun3-img").before(${imgs[1]});
// }
//
//
// }
function lun(index){
var length = 1920;
length = index*length;
len = len + length;
if(len > 0){
len = -1920;
}else if(len < -2000){
len = 0;
}
let movelength = len + "px";
// alert(len);
// document.querySelector('.div-lun3-img').style.left=length;
// var url =
// document.querySelector(".div-lun3-img").style.overflow="auto";
let d = document.querySelectorAll(".div-lun3-img");
d.forEach(function(value,index){
d[index].style.left=movelength;
})
}
//定时器
ss = setInterval(function(){
// alert("cc");
lun(1);
},2000);
})
// window.onload=function(){
// //大众汽车集团(中国)鼠标移入事件
// document.getElementById("table2-div1").onmouseover=function(){
// let div = document.getElementById("listdiv1");
// div.style.display="block";
//// alert("cc")
// }
// //大众汽车集团(中国)鼠标移出事件
// document.getElementById("table2-div1").onmouseleave=function(){
// let div = document.getElementById("listdiv1");
// div.style.display="none";
//// alert("cc")
// }
//
// //大众汽车集团(中国)二级菜单鼠标移入事件
// document.getElementById("listdiv1").onmouseover=function(){
// let div = document.getElementById("listdiv1");
// div.style.display="block";
//// alert("cc")
// }
// //大众汽车集团(中国)二级菜单鼠标移出事件
// document.getElementById("listdiv1").onmouseleave=function(){
// let div = document.getElementById("listdiv1");
// div.style.display="none";
//// alert("cc")
// }
//
// //诚信,合规与风险鼠标移入事件
// document.getElementById("listdiv1-ul-li7").onmouseover=function(){
// let div = document.getElementById("listdiv1-sublistdiv1");
// div.style.display="block";
// }
//
// //诚信,合规与风险鼠标移入事件
// document.getElementById("listdiv1-sublistdiv1").onmouseover=function(){
// let div = document.getElementById("listdiv1-sublistdiv1");
// div.style.display="block";
// }
//
// //诚信,合规与风险鼠标移出事件
// document.getElementById("listdiv1-ul-li7").onmouseleave=function(){
// let div = document.getElementById("listdiv1-sublistdiv1");
// div.style.display="none";
// }
//
// //工厂鼠标移入事件
// document.getElementById("listdiv1-ul-li-last").onmouseover=function(){
// let div = document.getElementById("listdiv1-sublistdiv2");
// div.style.display="block";
// }
//
// //工厂鼠标移入事件
// document.getElementById("listdiv1-sublistdiv2").onmouseover=function(){
// let div = document.getElementById("listdiv1-sublistdiv2");
// div.style.display="block";
// }
//
// //工厂鼠标移出事件
// document.getElementById("listdiv1-ul-li-last").onmouseleave=function(){
// let div = document.getElementById("listdiv1-sublistdiv2");
// div.style.display="none";
// }
//
//
//
// //品牌鼠标移入事件
// document.getElementById("table2-div2").onmouseover=function(){
// let div = document.getElementById("listdiv2");
// div.style.display="block";
// }
// //品牌鼠标移出事件
// document.getElementById("table2-div2").onmouseleave=function(){
// let div = document.getElementById("listdiv2");
// div.style.display="none";
// }
//
// //品牌 二级菜单鼠标移入事件
// document.getElementById("listdiv2").onmouseover=function(){
// let div = document.getElementById("listdiv2");
// div.style.display="block";
// }
// //品牌 二级菜单鼠标移出事件
// document.getElementById("listdiv2").onmouseleave=function(){
// let div = document.getElementById("listdiv2");
// div.style.display="none";
// }
//
// //合作伙伴鼠标移入事件
// document.getElementById("table2-div3").onmouseover=function(){
// let div = document.getElementById("listdiv3");
// div.style.display="block";
// }
// //合作伙伴鼠标移出事件
// document.getElementById("table2-div3").onmouseleave=function(){
// let div = document.getElementById("listdiv3");
// div.style.display="none";
// }
//
// //合作伙伴 二级菜单鼠标移入事件
// document.getElementById("listdiv3").onmouseover=function(){
// let div = document.getElementById("listdiv3");
// div.style.display="block";
// }
// //合作伙伴 二级菜单鼠标移出事件
// document.getElementById("listdiv3").onmouseleave=function(){
// let div = document.getElementById("listdiv3");
// div.style.display="none";
// }
//
// //企业社会责任鼠标移入事件
// document.getElementById("table2-div4").onmouseover=function(){
// let div = document.getElementById("listdiv4");
// div.style.display="block";
// }
// //企业社会责任鼠标移出事件
// document.getElementById("table2-div4").onmouseleave=function(){
// let div = document.getElementById("listdiv4");
// div.style.display="none";
// }
//
// //企业社会责任 二级菜单鼠标移入事件
// document.getElementById("listdiv4").onmouseover=function(){
// let div = document.getElementById("listdiv4");
// div.style.display="block";
// }
// //企业社会责任 二级菜单鼠标移出事件
// document.getElementById("listdiv4").onmouseleave=function(){
// let div = document.getElementById("listdiv4");
// div.style.display="none";
// }
//
// }
</script>
</head>
<body>
<div id="div0">
<div id="div1">
<table id="table1">
<!--<img src="img/VWK_Logomaster_4C_S.ashx"/>-->
<tr><td><span id="sp1">VOLKSWAGEN</span></td></tr>
<tr><td><span id="sp2">GROUP CHINA</span></td></tr>
<!-- <tr><td></td></tr>-->
</table>
<hr id="hr2"></hr>
<table id="table2">
<tr>
<td id="td-first"><div id="table2-div1">大众汽车集团(中国) </div></td>
<td class="td"><div id="table2-div2">品牌</div></td>
<td class="td"><div id="table2-div3">合作伙伴</div></td>
<td class="td"><div id="table2-div4">企业社会责任</div></td>
<td class="td"><div id="table2-div5">职业</div></td>
<td class="td"><div id="table2-div6">媒体中心</div></td>
<td id="td-last"><div id="table2-div7">社交平台</div></td>
</tr>
</table>
</div>
<div id="listdiv1">
<ul id="listdiv1-ul">
<li></li>
<li>关于VGC</li>
<li>集团高管</li>
<li>新闻</li>
<li>历年大事件</li>
<li>所获奖项</li>
<li id="listdiv1-ul-li7">诚信,合规与风险管理
<div id="listdiv1-sublistdiv1">
<ul id="listdiv1-sublistdiv1-ul1">
<li></li>
<li>诚信</li>
<li>合规</li>
<li>行为准则</li>
<li>举报系统</li>
</ul>
</div>
</li>
<li>环境</li>
<li id="listdiv1-ul-li-last">工厂
<div id="listdiv1-sublistdiv2">
<ul id="listdiv1-sublistdiv2-ul1">
<li></li>
<li>上汽大众与工厂</li>
<li>一起-大众与工厂</li>
<li>零部件与动力总成工厂</li>
</ul>
</div>
</li>
</ul>
</div>
<div id="listdiv2">
<ul id="listdiv2-ul">
<li></li>
<li>大众汽车</li>
<li>斯柯达</li>
<li>捷达</li>
<li>奥迪</li>
<li>兰博基尼</li>
<li>宾利</li>
<li>保时捷</li>
<li>宝马</li>
<li>斯堪尼亚</li>
<li>曼恩</li>
<li>大众汽车金融服务</li>
<li>Mobility Asia</li>
</ul>
</div>
<div id="listdiv3">
<ul id="listdiv3-ul">
<li></li>
<li>上汽大众</li>
<li>一起-大众</li>
<li>大众辽宁</li>
</ul>
</div>
<div id="listdiv4">
<ul id="listdiv4-ul">
<li></li>
<li>低碳未来</li>
<li>教育</li>
<li>经济赋能</li>
<li>志愿者</li>
<li>社会关爱</li>
<li>集团全球责任报告</li>
</ul>
</div>
<div id="div-lun3">
<img class="div-lun3-img" id="div-lun3-img0" src="img/20220620193934.ashx"/>
<img class="div-lun3-img" id="div-lun3-img1" src="img/20211216172254.ashx"/>
<img class="div-lun3-img" id="div-lun3-img2" src="img/20220620193934.ashx"/>
<img class="div-lun3-img" id="div-lun3-img3" src="img/20211216172254.ashx"/>
</div>
<div id="div-lun3-button-div">
<img id="div-lun3-button1" src="img/icon_17.png"/>
<img id="div-lun3-button2" src="img/icon_16.png"/>
</div>
</div>
</body>
</html>
更多推荐
所有评论(0)