怎么用HTML实现化妆品网站

本篇内容主要讲解“怎么用HTML实现化妆品网站”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用HTML实现化妆品网站”吧!

成都创新互联公司专注于网站建设|成都网站维护|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖轻质隔墙板等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身开发品质网站。

HTML结构代码







雅诗兰黛

.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 +=""+(i+1)+"";
      }else{
        str += ""+(i+1)+"";
      }
    }
    $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--;
    }
  }

  

  
    首页
    所有商品
    关于我们
    联系我们

< >

@charset "utf-8"; /* CSS Document */ ul,li,h2,h3,h4,p{ padding:0; margin:0; list-style:none} img{ max-width:100%} a{ text-decoration: none;} body{ width:1200px; background:#eee; margin:0px auto; line-height:21px} .clear{ clear:both} .menu li{ list-style:none} .logo{ background:#002563} .menu { background:#fff; width:100%; text-align:center; float:left; } .menu li a{ color:#000} .menu li { float:left; margin:2px; padding:15px 30px ; width:134px} .right{ float:right; width:660px; padding:20px} .left{ float:left; width:630px; padding:10px} .content { padding-bottom:20px;font-size:16px; line-height:26px; display:inline-block ; color:#111; width:100%} .box{ margin-top:20px; padding-bottom:10px; } .end{ clear:both; background:#002563; color:#fff; padding:10px 0; text-align:center;} .produce img{ margin:0 20px 20px 0} .produce { line-height:30px} .pad{ padding:20px; line-height:40px; display:block} .pad a{ color: #000;} .pad a:hover{ color: #E1353A;} .pics p{ margin:1px; text-align:center} .imglist{ width:100%; margin:0 auto} .imglist li{ float:left; width:46%; margin:2% ; text-align:center} .list{ margin:10px} .list li{ text-align:center; width:280px;font-size:12px; margin:40px 7px; float:left; } .list li p{ font-size: 18px; color: #000;} .list li img{ padding:2px; border:#ccc solid 1px; width: 90%;} .title{ text-align:center; color:#F00; padding:10px} .fl{ float:left} .js div{ width:100%; clear:both; margin-bottom:20px; float:left} .js div img{ float:left; margin-right:20px} .msg>div{ padding:10px 0} #submit2{ margin-top:30px; padding:10px; background:#993366; color:#fff; border:none; width:100%} .msg{ width:400px; margin:0 auto} .msg div span{ display:block;} .msg div input{ background:#a07ea6; padding:10px 0; width:100%; border:none;} .bar{ margin:0px ;background:#002563; clear:both; font-weight:bold; padding:5px 15px; color:#fff} .bar h4{ color:#fff; font-size:20px;} .bar a{ float:right; color:#fff} .le{ float:left; width:49%;} .ri{ float:right; width:49%;} .txt { line-height: 26px; font-size: 14px; color: #333; width:660px; float:right; margin-top:20px } .txt h3{ font-size:36px; line-height:50px ; font-weight:normal } form { width: 660px; float: right; margin-top:20px; } form p { margin: 10px 0; font-size: 16px; color: #333; } form .phone { width: 100%; height: 36px; padding: 0 10px; box-sizing: border-box; border: 1px solid #ccc; } form textarea { width: 100%; height: 100px; } form .but { background:#002563; border: none; color: #fff; margin: 20px 0; display: block; width: 200px; height: 36px; } .lx_pic { float: left; width: 460px; margin-top:20px; } .lx_pic img { width: 100%; } .newslist li{ border-bottom:#ccc dashed 1px; padding:10px}

重庆分公司，新征程启航

怎么用HTML实现化妆品网站

HTML结构代码

产品中心

公司介绍

CSS样式代码

其他资讯