时间:2021-07-01 10:21:17 帮助过:5人阅读
![]() |
在线预览 源码下载
html代码:
- 换肤
- <div class="heitiao"></div>
- <div class="con"><img src="https://www.gxlcms.com/images/content.png"></div>
- <div class="head">
- <div class="menu">
- <div class="title">
- <p class="p1"></p>
- <p class="p2"></p>
- </div>
- <div class="bg">
- <div class="bgcon">
- <img class="big" src="https://www.gxlcms.com/images/bg0s.jpg">
- <img src="https://www.gxlcms.com/images/bg1s.jpg">
- <img src="https://www.gxlcms.com/images/bg2s.jpg">
- <img src="https://www.gxlcms.com/images/bg3s.jpg">
- <img src="https://www.gxlcms.com/images/bg4s.jpg">
- <img src="https://www.gxlcms.com/images/bg5s.jpg">
- <img class="big" src="https://www.gxlcms.com/images/bg6s.jpg">
- <img src="https://www.gxlcms.com/images/bg7s.jpg">
- <img src="https://www.gxlcms.com/images/bg8s.jpg">
- <img class="last" src="https://www.gxlcms.com/images/bg9s.jpg">
- <img class="last" src="https://www.gxlcms.com/images/bg10s.jpg">
- <img class="last" src="https://www.gxlcms.com/images/bg11s.jpg">
- </div>
- <div class="bgyl">
- <img src="https://www.gxlcms.com/images/yl.png">
- </div>
- </div>
- </div>
- </div>
css代码:
- *{margin:0;padding:0}
- a{color:#fff;
- margin-top:10px;
- display:block;
- margin-left:18%;
- font-size:13px;
- position:absolute;
- }
- body{background:url(images/bg0.jpg);}
- .con{width:911px;
- height:317px;
- margin:50px auto;}
- .head{width:100%;
- height:0px;
- background:#fff;
- position:fixed;
- left:0px;
- top:0px;
- border-bottom:1px solid #e3e3e3;
- overflow:hidden;
- }
- .title{width:911px;
- height:45px;
- margin:0px auto;}
- .heitiao{width:100%;
- height:35px;
- background:rgba(0,0,0,0.7);
- }
- .menu{width:100%;
- height:45px;
- border-bottom:1px solid #e3e3e3;}
- .p1{width:861px;
- height:45px;
- background:url(images/p1.png);
- float:left;
- cursor:pointer;}
- .p2{width:50px;
- height:45px;
- background:url(images/sp.png);
- float:right;
- cursor:pointer;
- }
- .bg{width:911px;
- height:205px;
- margin:25px auto;}
- .bgcon{width:590px;
- height:190px;
- float:left;
- }
- .bgcon img{width:97px;
- height:59px;
- display:block;
- float:left;
- margin-right:1px;
- margin-bottom:1px;
- }
- .bgcon .big{width:195px;
- height:119px;}
- .bgcon .last{position:relative;
- top:-60px;
- }
- .bgyl{width:264px;
- height:180px;
- float:right;
- background:url(https://www.gxlcms.com/images/bg1s.jpg);
- background-size:294px;}
以上代码就是本文介绍基于jQuery实现仿百度首页换肤背景图片切换代码,希望大家喜欢。