web前端基礎小白練習效果，精美選項卡特效
阿新 • • 發佈：2019-01-26
選項卡特效是各類商品網站必備的一種效果，這種效果簡單實用，也非常適用於基礎階段的小夥伴用於練習，程式碼也是非常短css和js程式碼不超過30行。
精美選項卡原始碼：
<!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畫素--> <styletype="text/css"> *{margin:0px;padding:0px;} #Product{width:860px;/*寬*/height:250px;/*高*/margin:100pxauto 0px;} #Product .title{height:30px;border-bottom:1pxsolid #000;/*粗細 風格 顏色*/} #Product .title .txt{width:170px;height:30px;float:left;font-size:14px; line-height:30px;/*行高豎直居中*/font-family:"微軟雅黑";} #Product .title .sel{width:364px;height:30px;float:right;} #Product .title .sel span{width:120px;height:29px;border:1px solid #ddd; display:inline-block; font-size:12px;line-height:29px;text-align:center;/*水平居中*/ border-right:0px;border-bottom:0px;} #Product .title .sel span.last{border-right:1pxsolid #ddd;} #Product .title .sel span.active{background:#000;color:#fff;} #Product .List{height:220px;} #Product .List ul li{width:214px;height:215px;border:1pxsolid #ddd;list-style-type:none;/*去掉圓點*/float:left;border-top:0px;border-right:0px;text-align:center;} #Product .List ul li.last{border-right:1pxsolid #ddd;width:213px;} #Product .List ul li p{font-size:12px;line-height:20px;} #Product .List ul li p del{color:#666;font-family:"Arial";} #Product .List ul li img{margin-bottom:20px;} #Product .List ul{display:none;/*隱藏*/} </style> </head> <body> <!-- div盒子模型 高度 寬度 放內容的長方形 姓名="張三"--> <div id="Product"> <!--標題開始--> <divclass="title"> <divclass="txt">專屬於你的包櫥</div> <divclass="sel"> <spanclass="active">發現喜歡</span><span>正在促銷</span><spanclass="last">最近瀏覽</span> </div> </div> <!--標題結束--> <!--產品列表開始--> <divclass="List"> <ulstyle="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> <liclass="last"> <imgsrc="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> <liclass="last"> <imgsrc="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> <liclass="last"> <imgsrc="images/1.jpg"width="127"height="127"/> <p>麥包包(M Plus) 手提單肩斜挎包</p> <p><b>￥148</b><del>￥338</del></p> </li> </ul> </div> <!--產品列表結束--> </div> <!--引用外部的 jquery 類庫檔案 --> <scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script> <scripttype="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> <!-- 1、如何在頁面當中構建一個有寬度 高度的長方形 (div盒子模型) 2、講到了外邊距概念 margin , 同時還解決了外邊距的相容型問題 *{margin:0px;} 3、利用外邊距來控制長方形的位置 margin:上 左右 下; 4、如何給頁面當中的元素新增邊框線 border-bottom:粗細 1px 風格 solid 顏色 #000； 5、講到文字樣式(文字大小 字型型別 文字豎直居中-行高) 6、如何在頁面當中，插入一張圖片 <img src="地址"/> --> </body> </html>
web前端學習群：575308719，分享原始碼、視訊、企業級案例、最新知識點，歡迎初學者和在進階中的小夥伴。
關注公眾號→‘學習web前端’跟大佬一起學前端！