html小例子

阿新 • • 發佈：2018-12-23

精美選項卡效果：
關鍵程式碼：

 $(function(){
    $(".sel span").mouseover(function(){
      $(this).addClass("bg").siblings().removeClass();
      var index=$(this).index();
      $(".list ul").eq(index).show().siblings().hide();
      });});

mousemove事件通過滑鼠在元素上移動來觸發。
行內元素(span)程式碼儘量寫在一行上，不寫在一行上(換行)會有空格
(這兩個塊之間會有空格)
原始碼：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>精美選項卡特效</title 
>
<!-- 引用 css樣式 高:300m;  寬：400m; px畫素-->
<style type="text/css">
*{
  margin:0px;
  padding:0px;
  }
#product{
  width:862px;
  height:250px;
  margin:100px auto 0px;

  }
#product .title{
  height:30px;
  border-bottom:solid 1px #000;
  }
#product .title .txt{
  width:170px;
  height:30px;
  float:left 
;
  font-size:14px;
  line-height:30px;
  }
#product .title .sel{
  width:364px;
  height:30px;
  float:right;
  }
#product .title .sel span{
  width:120px;
  height:29px;
  border:solid 1px #ddd;
  display:block;
  font-size:12px;
  line-height:29px;
  text-align:center;
  border-right:0px;
  border-bottom:0px;
  float:left;
  }
#product .list{
  height:220px;
  }
#product .list ul li{
  width:214px;
  height:215px;
  border:solid 1px #ddd;
  list-style:none;
  float:left;
  text-align:center;
  border-top:0px;
  border-right:0px;

  }
#product .list ul li.last{
  border-right:1px solid #ddd;
  width:213px;
  }
#product .list ul li p{
  font-size:12px;
  line-height:20px;
  }
#product .list ul li img{
  margin-bottom:20px;
  }
#product .list ul{
  display:none;
  }
.bg{
  cursor:pointer;
  background:pink;
  }
</style>
 <div id="Product">

    <!--標題開始-->
    <div class="title">
        <div class="txt">專屬於你的包櫥</div>
        <div class="sel">
            <span class="active">發現喜歡</span><span >正在促銷</span><span class="last">最近瀏覽</span>
        </div>
    </div>
    <!--標題結束-->

    <!--產品列表開始-->
    <div class="List">
        <ul style="display:block;">
            <li> <img src="images/1.jpg" width="127" height="127"/> 
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
            <li> <img src="images/2.jpg" width="127" height="127"/>
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
            <li> <img src="images/3.jpg" width="127" height="127"/>
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
            <li class="last"> 
                <img src="images/4.jpg" width="127" height="127"/>
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
        </ul>

        <ul>
            <li> <img src="images/5.jpg" width="127" height="127"/> 
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
            <li> <img src="images/6.jpg" width="127" height="127"/>
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
            <li> <img src="images/7.jpg" width="127" height="127"/>
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
            <li class="last"> 
                <img src="images/8.jpg" width="127" height="127"/>
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
        </ul>

        <ul>
            <li> <img src="images/9.jpg" width="127" height="127"/> 
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
            <li> <img src="images/10.jpg" width="127" height="127"/>
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
            <li> <img src="images/11.jpg" width="127" height="127"/>
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
            <li class="last"> 
                <img src="images/1.jpg" width="127" height="127"/>
                 <p>麥包包(M Plus) 手提單肩斜挎包</p>
                 <p><b>￥148</b> <del>￥338</del></p>
            </li>
        </ul>
    </div>
    <!--產品列表結束-->

</div>

<!--引用外部的 jquery 類庫檔案 -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" >
    $(".sel span").mouseover(function(){
        $(this).addClass("active").siblings().removeClass("active"); //class="active"
        var _index=$(this).index(); //獲取序列號
        $(".List ul").eq(_index).show().siblings().hide();

    });
</script>

html小例子

精美選項卡效果：關鍵程式碼： $(function(){ $(".sel span").mouseover(function(){ $(this).addClass(

html的小例子

var () doc closed 模擬 http 需要 class logs 常用的前端實例： 1略 2、在網頁商城中的圖片當我們把鼠標放上去之後，圖片會顯示一個有顏色的外邊框，圖片某一部分的字體的顏色並發生改變鼠標放上去之前鼠標放上去之後：實

步步為營-65-線程小例子

res rgs int alt ntc gen orm read win 1 搖獎機 using System; using System.Collections.Generic; using System.ComponentModel; using System.Da

多線程小例子

set rgs 退出開始 rri let 重新 ted 處理 1. 線程小例子 /** * 失去一日甚易，欲得回已無途！ * 2016-11-17下午1:43:51 * * 進程：可以包含一個或者多個線程！ cp

bootstrap01登錄小例子

hicon 引入 pan itl javascrip set 用戶名 phi cnblogs 引入需要的bootstrap文件 <!DOCTYPE html> <html> <head lang="en"> <m

java中的String類的不可變性的小例子

變化 str void string類對象 style ima blog com 在java語言中，String類具有不可變性，即常量字符串不可更改。下面的一個小例子簡單演示相關概念。 1 public class test { 2 public stati

HTML小知識點積累

tom 文本 href function spl vertical filter ots lin 1.怎樣讓heigth:100%起效? ??有時候我們設置heigth:100%,想讓當前控件鋪滿整個屏幕,可是非常少情況下這個屬性能達到我們想要的效果,

ADF12C+Spring集成小例子

spring adf12c 集成本文出自 “ADF推廣員” 博客，請務必保留此出處http://feitai.blog.51cto.com/9103016/1950235ADF12C+Spring集成小例子

dom4j使用的小例子

int ml2 read sel eval console ati ack val product.xml: <?xml version="1.0" encoding="UTF-8"?> <root> <product>

雙層for循環各種小例子

-1 ext static can 行數 () ann ++ ati /* * ********* 執行流程：現從外層循環開始,外層執行一次內層執行一圈 * ********* i=1 j 1-9打印* * ********* i=2 j

macaca測試web小例子

class bdr ant 測試結果文檔 () 官方 quit 中心上午剛把macaca的環境在公司的電腦上吧web 端的環境給搭建好，於是乎，看看網上的例子，看看官方的文檔 https://macacajs.github.io/wd.py/ 可以在這個鏈接看到原滋

Android小例子：使用反射機制來讀取圖片制作一個圖片瀏覽器

onclick lac protected blank pri tar lec 存儲 current 效果圖：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　工程文件夾：　　該例子可供於新手參考練習，如果有哪裏不對的地方，望指正>-< 《

?python 的zip 函數小例子

.... python 函數例子小例子 int ... tom pri In [57]: name = (‘Tome‘,‘Rick‘,‘Stephon‘) In [58]: age = (45,23,55) In [59]: for a,n in zip (name

Nightmare安裝and一個小例子

lob user tor driver .cn earch .org var query 前端的功能測試功能測試必須在真正瀏覽器做，現在有四種方法。使用本機安裝的瀏覽器使用 Selenium Driver 使用 Headless Chrome 使用 Electr

shell整理（32）===兩個嵌套循環的小例子

心得 shell 思考（1）shell打印如下圖所示的圖案。shell 代碼如下：#!/bin/bashecho "-"for i in `seq 9`do for x in `seq $i` do echo -n " "

[Python]Python 使用 for 循環的小例子

使用例子 for ... 循環 for 循環小例子 pytho print [Python]Python 使用 for 循環的小例子: In [7]: for i in range(5): ...: print "xxxx" ...: prin

[Spark][Python]Spark Join 小例子

ont nta text read null json corrupt led park [[email protected] ~]$ hdfs dfs -cat people.json {"name":"Alice","pcode":"94304"}{"nam

python 循環小例子

python1. 實現1-100的所有的和sum = 0for i in xrange(1,101): sum+=iprint(sum)結果：50502. 實現1-500所有奇數的和sum = 0for i in xrange(1,501): if i%2 == 1: sum+=ip

文件讀取下載小例子

成功 and ont rec save tin dir() 文件讀取 last package sevlet3; import java.io.File; import java.io.FileOutputStream; import java.io.IOExcepti

python 基礎字典小例子

free 反轉 efault who print python 基礎 for style cot 統計單詞次數作為字典存儲cotent = "who have an apple apple is free free is money you know" result =

html小例子

相關推薦