怎么用HTML實(shí)現(xiàn)化妝品網(wǎng)站

本篇內(nèi)容主要講解“怎么用HTML實(shí)現(xiàn)化妝品網(wǎng)站”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用HTML實(shí)現(xiàn)化妝品網(wǎng)站”吧!

成都創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)|成都網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋輕質(zhì)隔墻板等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身開發(fā)品質(zhì)網(wǎng)站。

HTML結(jié)構(gòu)代碼

<!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">關(guān)于我們</a></li>
    <li><a href="contact.html">聯(lián)系我們</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">
      <h4>產(chǎn)品中心</h4>
    </div>
    <div class="list" style="clear:both">
      <ul>
        <li> <a href="proinfo.html"><img src="images/1.jpg" ></a>
          <p>紅石榴養(yǎng)膚潔顏油 </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>權(quán)杖唇霜 </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">
    <h4>公司介紹</h4>
  </div>
  <div class="box">
    <div class="pad" align="center">
      <div>
        <p>雅詩蘭黛公司創(chuàng)立于1946年，技術(shù)先進(jìn)，不斷創(chuàng)新，憑著其研發(fā)的各類精致優(yōu)雅而又奢華的產(chǎn)品而享譽(yù)全球。<br>
          歷經(jīng)廣泛的研究以及一貫嚴(yán)格的產(chǎn)品測(cè)試，她旗下的所有產(chǎn)品都秉承高水準(zhǔn)的保證。</p>
        <p>雅詩蘭黛產(chǎn)品在各大高檔購物中心以及專賣店有售點(diǎn)擊這里 <br>
          查找距離您最近的雅詩蘭黛專柜。
</p>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</div>
<footer class="end">
  <p>網(wǎng)頁底部</p>
</footer>
</body>
</html>

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}

到此，相信大家對(duì)“怎么用HTML實(shí)現(xiàn)化妝品網(wǎng)站”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文題目：怎么用HTML實(shí)現(xiàn)化妝品網(wǎng)站
網(wǎng)站地址：http://www.rwnh.cn/article12/pgsggc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站收錄、軟件開發(fā)、網(wǎng)站營(yíng)銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

怎么用HTML實(shí)現(xiàn)化妝品網(wǎng)站

HTML結(jié)構(gòu)代碼

CSS樣式代碼