jquery仿京东商品页面
京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的! ! ! !
仿京东商品页面css的代码! ! !
* {
保证金:0;
填充:0;
}
.da {
宽度:360 px;
身高:418 px;
浮:左;
}
.shang {
宽度:350 px;
身高:350 px;
边界:1 px固体# ccc;
保证金:10 px 0 10 px 10 px;
位置:相对;
}
.yin {
宽度:150 px;
身高:150 px;
边界:1 px固体# ccc;
背景:rgba (255255255, 0.3);
位置:绝对的;
上图:0;
左:0;
光标:指针;
显示:没有;
}
.bao {
宽度:362 px;
高度:56 px;
}
.tab {
宽度:320 px;
高度:56 px;
margin-left: 10 px;
溢出:隐藏;
}
.Ul {
宽度:9999 px;
高度:56 px;
}
李.Ul {
宽度:52 px;
高度:52 px;
浮:左;
边界:2 px固体# ccc;
margin-left: 8 px;
list-style:没有;
位置:相对;
text-align:中心;
}
.li {
宽度:52 px;
高度:52 px;
边界:2 px固体# FF7403;
}
.li img {
显示:块;
位置:绝对的;
上图:50%;
左:50%;
margin-top: -26 px;
margin-left: -26 px;
}
.zuo {
显示:块;
宽:12 px;
高度:56 px;
背景:url (. ./img/icon_clubs.gif)不再重演;
background-size: 180 px 608 px;
背景位置:-82 px -462 px;
浮:左;
margin-left: 10 px;
}
,{
显示:块;
宽:12 px;
高度:56 px;
背景:url (. ./img/icon_clubs.gif)不再重演;
background-size: 180 px 608 px;
背景位置:-95 px -462 px;
浮:正确;
margin-top: -56 px;
}
.xia {
宽度:360 px;
身高:418 px;
边界:1 px固体# ccc;
浮:左;
保证金:10 px 0 0 px 20 px;
溢出:隐藏;
显示:没有;
}
.lie {
宽度:1329 px;
高度:30 px;
margin-left: 10 px;
margin-top: 20 px;
边界底部:2 px固体# BE0000;
}
李.lie {
浮:左;
list-style:没有;
宽度:80 px;
高度:28 px;
背景:# fff;
border - radius: 3 px;
边界:0;
行高:30 px;
text-align:中心;
margin-right: 5 px;
边界:1 px固体# BE0000;
颜色:# c30;
光标:指针;
粗细:大胆的;
}
.lie> ul .ll {
宽度:80 px;
高度:30 px;
背景:# BE0000;
border - radius: 3 px;
边界:0;
行高:30 px;
text-align:中心;
颜色:# fff;
光标:指针;
}
.nie {
宽度:1329 px;
身高:200 px;
margin-left: 10 px;
溢出:隐藏;
}
.bao1 {
宽度:1329 px;
身高:500 px;
}
.up {
宽度:1329 px;
身高:200 px;
}
.up跨度{
显示:块;
填充:10 px 0 0 10 px;
margin-bottom: 70 px;
}
.up p {
text-align:中心;
margin-top: 5 px;
}
.down {
宽度:1329 px;
身高:300 px;
背景:黄色;
}
之前
仿京东商品页面html的代码! ! !
& lt; div>
& lt; div类=癲a”比;
& lt; div类="商"比;
& lt; img src=" https://www.yisu.com/zixun/img/b1.jpg "高度=" 350 "宽度=" 350 " id=把潘静 北?
& lt; div类="阴"祝辞& lt;/div>
& lt;/div>
& lt; div类="包"比;
& lt;跨类="左"祝辞& lt;/span>
& lt; div类=把∠羁ā北?
& lt; ul类=皍l”比;
& lt; li>
& lt; img src=" https://www.yisu.com/zixun/img/b1.jpg "高度==?2”/?2”宽度比;
& lt;/li>
& lt; li>
& lt; img src=" https://www.yisu.com/zixun/img/b2.jpg "高度==?2”/?2”宽度比;
& lt;/li>
& lt; li>
& lt; img src=" https://www.yisu.com/zixun/img/b3.jpg "高度==?2”/?2”宽度比;
& lt;/li>
& lt; li>
& lt; img src=" https://www.yisu.com/zixun/img/b1.jpg "高度==?2”/?2”宽度比;
& lt;/li>
& lt; li>
& lt; img src=" https://www.yisu.com/zixun/img/b2.jpg "高度==?2”/?2”宽度比;
& lt;/li>
& lt; li>
& lt; img src=" https://www.yisu.com/zixun/img/b3.jpg "高度==?2”/?2”宽度比;
& lt;/li>
& lt; li>
& lt; img src=" https://www.yisu.com/zixun/img/b1.jpg "高度==?2”/?2”宽度比;
& lt;/li>
& lt; li>
& lt; img src=" https://www.yisu.com/zixun/img/b2.jpg "高度==?2”/?2”宽度比;
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;跨类=澳恪痹? lt;/span>
& lt;/div>
& lt; div类="谎言"比;
& lt; ul>
& lt;李类="我"在图文介绍& lt;/li>
& lt; li>评论(1)& lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类=澳簟北?
& lt; div类=癰ao1”比;
& lt; div类=吧稀北?
& lt; span>暂无好评! & lt;/span>
& lt; p>适用浏览器:IE8,360, FireFox, Safari, Chrome Opera,傲游,搜狗,世界之窗& lt;/p>
& lt; p>师徒课堂& lt;/p>
& lt;/div>
& lt; div类=跋蛳隆北?
& lt; img src=" https://www.yisu.com/zixun/img/11.png "高度=" 300 "宽度=" 1329 "/比;
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; div类="夏"比;
& lt; img src=" https://www.yisu.com/zixun/img/b1.jpg "高度=" 600 "宽度=" 600 " id=罢浴?比;
& lt;/div>
& lt;/div>
