欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

WIN8风格左右全屏大图焦点图幻灯片切换样式

 

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>WIN8风格左右全屏大图焦点图幻灯片切换样式</title>

<meta name="keywords" content="jquery特效,图片滚动,全屏大图焦点图" />

<meta name="description" content="WIN8风格左右全屏大图焦点图幻灯片切换样式。" />

<link href="css/style.css" rel="stylesheet" type="text/css">

 

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/slides.js"></script>

 

</head>

<body>

 

<div id="gallery">

 

         <ul id="slides" class="visual">

                   <a href="#"><li class="visual1 slide"></li></a>

                   <a href="#"><li class="visual2 slide"></li></a>

                   <a href="#"><li class="visual3 slide"></li></a>

                   <a href="#"><li class="visual4 slide"></li></a>

         </ul>

        

         <div class="topbar">

                   <div class="switch">

                            <ul id="storeimgs" class="storeimgs">

                                     <li class="menuItem" id="t_li_1">

                                               <div class="slide-tip slide-tip-first ">

                                                        <div class="slide-title">网站建设</div>

                                                        <div class="slide_icon slide_icon1"></div>

                                                        <div class="icdetail">[<a href="#">基础型网站套餐</a>]&nbsp;&nbsp;[<a href="#">精美型网站套餐</a>]<br />[<a href="#">豪华型网站套餐</a>]&nbsp;&nbsp;[<a href="#">B2C电子商务网站</a>]</div>

                                               </div>

                                               <div class="jt" style="display: block; "></div>

                                     </li>

                                     <li class="menuItem" id="t_li_2">

                                               <div class="slide-tip">

                                                        <div class="slide-title">js代码</div>

                                                        <div class="slide_icon slide_icon2"></div>

                                                        <div class="icdetail">[<a href="#">jquery特效</a>]&nbsp;&nbsp;[<a href="#">焦点图</a>]<br /><a href="#" class="download">tab选项卡下载</a></div>

                                               </div>

                                               <div class="jt"></div>

                                     </li>

                                     <li class="menuItem" id="t_li_3">

                                               <div class="slide-tip">

                                                        <div class="slide-title">基础业务</div>

                                                        <div class="slide_icon slide_icon3"></div>

                                                        <div class="icdetail">[<a href="#">域名注册</a>]&nbsp;&nbsp;[<a href="#">企业邮箱</a> ]<br />[<a href="#">网站主机(空间)</a>]</div>

                                               </div>

                                               <div class="jt"></div>

                                     </li>

                                     <li class="menuItem" id="t_li_4">

                                               <div class="slide-tip">

                                                        <a href="#" style="display:block;height:115px;">

                                                                 <div class="slide-title"></div>

                                                                 <div class="icdetail">&nbsp;</div>

                                                        </a>

                                               </div>

                                               <div class="jt"></div>

                                     </li>

                            </ul>

                   </div>

         </div>

        

</div>

 

</body>

</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h14849.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-12-01 20:28 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。