制作化妆品网站—大一 HTML 期末网页作业，使用 HTML+CSS+JS，以雅诗兰黛美妆为主题
最编程
2023-12-31 12:09:52
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<link rel="stylesheet" href="./css/new.css">
<title>雅诗兰黛</title>
</head>
<script type="text/javascript">.onload = function(){
function $(param){
if(arguments[1] == true){
return document.querySelectorAll(param);
}else{
return document.querySelector(param);
}
}
var $box = $(".box1");
var $box1 = $(".box-1 ul li",true);
var $box2 = $(".box-2 ul");
var $box3 = $(".box-3");
var $length = $box1.length;
var str = "";
for(var i =0;i<$length;i++){
if(i==0){
str +="<li class='on'>"+(i+1)+"</li>";
}else{
str += "<li>"+(i+1)+"</li>";
}
}
$box2.innerHTML = str;
var current = 0;
var timer;
timer = setInterval(go,1000);
function go(){
for(var j =0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if($length == current){
current = 0;
}
$box1[current].style.display = "block";
$box2.children[current].className = "on";
current++;
}
for(var k=0;k<$length;k++){
$box1[k].onmouseover = function(){
clearInterval(timer);
}
$box1[k].onmouseout = function(){
timer = setInterval(go,1000);
}
}
for(var p=0;p<$box3.children.length;p++){
$box3.children[p].onmouseover = function(){
clearInterval(timer);
};
$box3.children[p].onmouseout = function(){
timer = setInterval(go,1000);
}
}
for(var u =0;u<$length;u++){
$box2.children[u].index = u;
$box2.children[u].onmouseover = function(){
clearInterval(timer);
for(var j=0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
this.className = "on";
$box1[this.index].style.display = "block";
current = this.index +1;
}
$box2.children[u].onmouseout = function(){
timer = setInterval(go,1000);
}
}
$box3.children[0].onclick = function(){
back();
}
$box3.children[1].onclick = function(){
go();
}
function back(){
for(var j =0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if(current == 0){
current = $length;
}
$box1[current-1].style.display = "block";
$box2.children[current-1].className = "on";
current--;
}
}</script>
<body>
<header class="logo"> <img src="images/logo.jpg" width="100" /> </header>
<nav class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="product.html">所有商品</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
<div class="box1 banner">
<div class="box-1">
<ul>
<li>
<img src="img/新建文件夹 (2)/口红.jpg" ></img>
</li>
<li>
<img src="img/新建文件夹 (2)/小棕瓶.jpg"></img>
</li>
<li>
<img src="img/新建文件夹 (2)/粉底液.jpg"></img>
</li>
<li>
<img src="img/新建文件夹 (2)/精华.jpg" ></img>
</li>
<li>
<img src="img/新建文件夹 (2)/面霜.jpg" ></img>
</li>
</ul>
</div>
<div class="box-2">
<ul>
</ul>
</div>
<div class="box-3">
<span class="prev"> < </span>
<span class="next"> > </span>
</div>
</div>
<div class="content">
<div class="box">
<div class="bar">
<h3>产品中心</h3>
</div>
<div class="list" style="clear:both">
<ul>
<li> <a href="proinfo.html"><img src="images/1.jpg" ></a>
<p>红石榴养肤洁颜油 </p>
</li>
<li> <a href="proinfo.html"><img src="images/2.jpg" ></a>
<p>鲜活亮采红石榴二合一洁面乳 </p>
</li>
<li> <a href="proinfo.html"><img src="images/3.jpg" ></a>
<p>权杖唇霜 </p>
</li>
<li> <a href="proinfo.html"><img src="images/4.jpg" ></a>
<p>胶原霜(乳霜款) </p>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="bar">
<h3>公司介绍</h3>
</div>
<div class="box">
<div class="pad" align="center">
<div>
<p>雅诗兰黛公司创立于1946年，技术先进，不断创新，凭着其研发的各类精致优雅而又奢华的产品而享誉全球。<br>
历经广泛的研究以及一贯严格的产品测试，她旗下的所有产品都秉承高水准的保证。</p>
<p>雅诗兰黛产品在各大高档购物中心以及专卖店有售点击这里 <br>
查找距离您最近的雅诗兰黛专柜。
</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<footer class="end">
<p>网页底部</p>
</footer>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<link rel="stylesheet" href="./css/new.css">
<title>雅诗兰黛</title>
</head>
<script type="text/javascript">.onload = function(){
function $(param){
if(arguments[1] == true){
return document.querySelectorAll(param);
}else{
return document.querySelector(param);
}
}
var $box = $(".box1");
var $box1 = $(".box-1 ul li",true);
var $box2 = $(".box-2 ul");
var $box3 = $(".box-3");
var $length = $box1.length;
var str = "";
for(var i =0;i<$length;i++){
if(i==0){
str +="<li class='on'>"+(i+1)+"</li>";
}else{
str += "<li>"+(i+1)+"</li>";
}
}
$box2.innerHTML = str;
var current = 0;
var timer;
timer = setInterval(go,1000);
function go(){
for(var j =0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if($length == current){
current = 0;
}
$box1[current].style.display = "block";
$box2.children[current].className = "on";
current++;
}
for(var k=0;k<$length;k++){
$box1[k].onmouseover = function(){
clearInterval(timer);
}
$box1[k].onmouseout = function(){
timer = setInterval(go,1000);
}
}
for(var p=0;p<$box3.children.length;p++){
$box3.children[p].onmouseover = function(){
clearInterval(timer);
};
$box3.children[p].onmouseout = function(){
timer = setInterval(go,1000);
}
}
for(var u =0;u<$length;u++){
$box2.children[u].index = u;
$box2.children[u].onmouseover = function(){
clearInterval(timer);
for(var j=0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
this.className = "on";
$box1[this.index].style.display = "block";
current = this.index +1;
}
$box2.children[u].onmouseout = function(){
timer = setInterval(go,1000);
}
}
$box3.children[0].onclick = function(){
back();
}
$box3.children[1].onclick = function(){
go();
}
function back(){
for(var j =0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if(current == 0){
current = $length;
}
$box1[current-1].style.display = "block";
$box2.children[current-1].className = "on";
current--;
}
}</script>
<body>
<header class="logo"> <img src="images/logo.jpg" width="100" /> </header>
<nav class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="product.html">所有商品</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
<div class="box1 banner">
<div class="box-1">
<ul>
<li>
<img src="img/新建文件夹 (2)/口红.jpg" ></img>
</li>
<li>
<img src="img/新建文件夹 (2)/小棕瓶.jpg"></img>
</li>
<li>
<img src="img/新建文件夹 (2)/粉底液.jpg"></img>
</li>
<li>
<img src="img/新建文件夹 (2)/精华.jpg" ></img>
</li>
<li>
<img src="img/新建文件夹 (2)/面霜.jpg" ></img>
</li>
</ul>
</div>
<div class="box-2">
<ul>
</ul>
</div>
<div class="box-3">
<span class="prev"> < </span>
<span class="next"> > </span>
</div>
</div>
<div class="content">
<div class="box">
<div class="bar">
<h3>产品中心</h3>
</div>
<div class="list" style="clear:both">
<ul>
<li> <a href="proinfo.html"><img src="images/1.jpg" ></a>
<p>红石榴养肤洁颜油 </p>
</li>
<li> <a href="proinfo.html"><img src="images/2.jpg" ></a>
<p>鲜活亮采红石榴二合一洁面乳 </p>
</li>
<li> <a href="proinfo.html"><img src="images/3.jpg" ></a>
<p>权杖唇霜 </p>
</li>
<li> <a href="proinfo.html"><img src="images/4.jpg" ></a>
<p>胶原霜(乳霜款) </p>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="bar">
<h3>公司介绍</h3>
</div>
<div class="box">
<div class="pad" align="center">
<div>
<p>雅诗兰黛公司创立于1946年，技术先进，不断创新，凭着其研发的各类精致优雅而又奢华的产品而享誉全球。<br>
历经广泛的研究以及一贯严格的产品测试，她旗下的所有产品都秉承高水准的保证。</p>
<p>雅诗兰黛产品在各大高档购物中心以及专卖店有售点击这里 <br>
查找距离您最近的雅诗兰黛专柜。
</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<footer class="end">
<p>网页底部</p>
</footer>
</body>
</html>