资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么用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--;     }   }           
  • 首页
  •     
  • 所有商品
  •     
  • 关于我们
  •     
  • 联系我们
  •           
            
    •                
    •       
    •                
    •       
    •                
    •       
    •                
    •       
    •                
    •     
      
           
                 
      
            <       >    
                  

    产品中心

                    
              
    •             

      红石榴养肤洁颜油 

              
    •         
    •             

      鲜活亮采红石榴二合一洁面乳 

              
    •         
    •             

      权杖唇霜 

              
    •         
    •             

      胶原霜(乳霜款) 

              
    •       
                        

    公司介绍

                     
            

    雅诗兰黛公司创立于1946年,技术先进,不断创新,凭着其研发的各类精致优雅而又奢华的产品而享誉全球。
              历经广泛的研究以及一贯严格的产品测试,她旗下的所有产品都秉承高水准的保证。

            

    雅诗兰黛产品在各大高档购物中心以及专卖店有售点击这里 
              查找距离您最近的雅诗兰黛专柜。

          
                   

    网页底部

    CSS样式代码

    @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实现化妆品网站
    本文地址:http://cdkjz.cn/article/pgsggc.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220