京东店铺全屏代码+悬浮代码

合集下载

悬浮客服模板html代码

京东商城弹出式导航代码

.user_menu ul li:hover ul .fl1 {width:950px;height:auto;overflow:hidden;margin-left:20px;margin-bottom:10px;}
.user_menu ul li:hover ul .fl1:hover {background-color#C30D23;}
</div>
</div>
<div class="fl1">
<a class="title2" href="/view_search-144316-844159-1-0-20-1.htmlh-144316-809020-1-0-20-1.html" target="_blank">花茶</a>
.user_menu ul li:hover ul .fl1 .title2 {display:block;width:100px;height:31px;overflow:hidden;background-color:#C30D23;float:left;text-align:center;text-decoration:none;line-height:30px;color:white;font-size:14px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);opacity:1.0;}
</div>
</div>
<div class="fl1">
<a class="title2" href="/view_search-144316-887146-1-0-20-1.html" target="_blank">黑茶</a>

常用网页漂浮广告代码

常用网页漂浮广告代码代码:1.<body bgcolor="#F7F7F7"><div id="www_qpsh_com" style="position:absolute"> <a href="链接地址"target="_blank"><img src="图片地址" border="0"> </a></div><script>var x = 50,y = 60var xin = true, yin = truevar step = 1var delay = 10var obj=document.getElementById("www_qpsh_com") function floatwww_qpsh_com() {var L=T=0var R= document.body.clientWidth-obj.offsetWidthvar B = document.body.clientHeight-obj.offsetHeight obj.style.left = x + document.body.scrollLeftobj.style.top = y + document.body.scrollTopx = x + step*(xin?1:-1)if (x < L) { xin = true; x = L}if (x > R){ xin = false; x = R}y = y + step*(yin?1:-1)if (y < T) { yin = true; y = T }if (y > B) { yin = false; y = B }}var itl= setInterval("floatwww_qpsh_com()", delay)obj.onmouseover=function(){clearInterval(itl)}obj.onmouseout=function(){itl=setInterval("floatwww_qpsh _com()", delay)}</script></body>2.<body bgcolor="#F7F7F7"><div id="www_qpsh_com" style="position:absolute"> <a href="链接地址"target="_blank"><img src="图片地址" border="0"> </a></div><script>var x = 50,y = 60var xin = true, yin = truevar step = 1var delay = 10var obj=document.getElementById("www_qpsh_com") function floatwww_qpsh_com() {var L=T=0var R= document.body.clientWidth-obj.offsetWidthvar B = document.body.clientHeight-obj.offsetHeight obj.style.left = x + document.body.scrollLeftobj.style.top = y + document.body.scrollTopx = x + step*(xin?1:-1)if (x < L) { xin = true; x = L}if (x > R){ xin = false; x = R}y = y + step*(yin?1:-1)if (y < T) { yin = true; y = T }if (y > B) { yin = false; y = B }}var itl= setInterval("floatwww_qpsh_com()", delay)obj.onmouseover=function(){clearInterval(itl)}obj.onmouseout=function(){itl=setInterval("floatwww_qpsh _com()", delay)}</script></body>。

各类漂浮广告代码、弹窗广告代码大全

-->
</SCRIPT>
参数解释：
<SCRIPT LANGUAGE="java script"> js脚本开始；
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
window.open(′url′,′窗口名′,′属性列表′);
〈/script〉
其中“url”是在窗口中显示的html文档的地址；“窗口名”可任意起一个，但不要用中文；“属性列表”是一个用逗号分开的各个属性值的字符串，它确定了弹出窗口的外观与状态。常用属性有：
toolbar（是否显示工具栏
将下面这段代码插入你的页面中，在页面加载时就会自动弹出一个窗口，并打开Google搜索引擎，是不是很简单啊！
将代码放置在〈!?XXX --〉中间是为了兼容较低版本浏览器的需要，在低版本的浏览器中标签内的内容将被视作注视。
打开的页面使用绝对路径（http://）或相对路径（../page.htm）都可以。
-->
</script>
然后，在相同目录下新建一个popup.htm网页(注意要与上面的url对应!)，用于显示在弹出窗口中。在新建文件的源代码中加入如下代码：
代码：
<script language="java script">
function closeit() {
setTimeout("self.close()",10000)

京东商城弹出式导航代码

.user_menu ul li:hover ul .fl1 {width:950px;height:auto;overflow:hidden;margin-left:20px;margin-bottom:10px;}
.user_menu ul li:hover ul .fl1:hover {background-color#C30D23;}
.user_menu ul li:hover ul .fl1 .fl2 a:hover {text-decoration:underline;}
.user_menu ul li:hover .tanchu {width:120px;height:auto;overflow:hidden;padding-top:0px;font-size:12px;}
.user_menu ul li:hover .tanchu a:hover {background-color:#C30D23;color:white;}</style>
<div class="user_menu">
<ul>
<li>
<div class="fl2">
<a href="/view_search-144316-887121-1-0-20-1.html" target="_blank">普洱茶</a><a href="/view_search-144316-887122-1-0-20-1.html" target="_blank">安化黑茶</a><a href="#" target="_blank"></a>

网页上漂浮的客服代码(漂浮框架兼容各大浏览器)

常见网页上的漂浮客服窗口，是一个漂浮框架，各位可以拿去用。

在chrome、ie、firefox下测试正常。

以下是部分代码（可点击演示查看或直接下载源代码）：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>网站客服漂浮框架（兼容各大浏览器）-网页特效代码()</title><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><style type="text/css">.kfoutbox{position:absolute;z-index:10000;right:5px;margin:0px;width:80px;height:150p x;background:#ff0000;}</style></head><body style="margin:0px;padding:0px;font-size:12px;"><div style="margin:0pxauto;padding-top:200px;width:980px;height:800px;text-align:center;background:#f2f2f2 ;">这里是网页的内容区<br><a href="/">网页特效代码</a></div><div id="kfoutbox" class="kfoutbox"><span id="kfboxclose" style="color:#ffffff">关闭按钮</span></div><script language="javascript">var default_top_ps = 100;var evans_agt = erAgent.toLowerCase();var evans_ie = ((evans_agt.indexOf("msie") != -1) && (evans_agt.indexOf("opera") == -1) && (evans_agt.indexOf("omniweb") == -1));var evans_mymovey = new Number();function evans_IeTrueBody() {return (patMode && patMode != "BackCompat") ? document.documentElement: document.body}function evans_GetScrollTop() {return evans_ie ? evans_IeTrueBody().scrollTop: window.pageYOffset}function evans_heartBeat() {evans_diffY = evans_GetScrollTop();evans_mymovey += Math.floor((evans_diffY -document.getElementById('kfoutbox').style.top.replace("px", "") + default_top_ps) * 0.1); document.getElementById('kfoutbox').style.top = evans_mymovey + "px"}var evans_tmpintval = window.setInterval("evans_heartBeat()", 1);if (document.getElementById('kfboxclose')) {document.getElementById('kfboxclose').onclick = function() {window.clearInterval(evans_tmpintval);document.getElementById('kfoutbox').style.display = 'none'}}var popupdelay = 0;var maxpoptimes = 3;var prepoptime = '10';function Tong_MoveDiv() {this.Move = function(Id, Evt, T) {if (Id == "") {return}var o = document.getElementById(Id);if (!o) {return}evt = Evt ? Evt: window.event;o.style.position = "absolute";o.style.zIndex = 200;var obj = evt.srcElement ? evt.srcElement: evt.target;var w = o.offsetWidth;var h = o.offsetHeight;var l = o.offsetLeft;var t = o.offsetTop;var div = document.createElement("DIV");document.body.appendChild(div);div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:" + w + "px;height:" + h + "px;top:" + t + "px;left:" + l + "px;position:absolute;background:#000";div.setAttribute("id", Id + "temp");this.Move_OnlyMove(Id, evt, T)};this.Move_OnlyMove = function(Id, Evt, T) {var o = document.getElementById(Id + "temp");if (!o) {return}var evt = Evt ? Evt: window.event;var relLeft = evt.clientX - o.offsetLeft;var relTop = evt.clientY - o.offsetTop;if (!window.captureEvents) {o.setCapture()} else {window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP)}document.onmousemove = function(e) {if (!o) {return}e = e ? e: window.event;var bh = Math.max(document.body.scrollHeight, document.body.clientHeight, document.body.offsetHeight, document.documentElement.scrollHeight,document.documentElement.clientHeight, document.documentElement.offsetHeight);var bw = Math.max(document.body.scrollWidth, document.body.clientWidth, document.body.offsetWidth, document.documentElement.scrollWidth,document.documentElement.clientWidth, document.documentElement.offsetWidth);var sbw = 0;if (document.body.scrollWidth < bw) sbw = document.body.scrollWidth;if (document.body.clientWidth < bw && sbw < document.body.clientWidth) sbw = document.body.clientWidth;if (document.body.offsetWidth < bw && sbw < document.body.offsetWidth) sbw = document.body.offsetWidth;if (document.documentElement.scrollWidth < bw && sbw <document.documentElement.scrollWidth) sbw = document.documentElement.scrollWidth;if (document.documentElement.clientWidth < bw && sbw <document.documentElement.clientWidth) sbw = document.documentElement.clientWidth;if (document.documentElement.offsetWidth < bw && sbw <document.documentElement.offsetWidth) sbw = document.documentElement.offsetWidth;if (e.clientX - relLeft <= 0) {o.style.left = 0 + "px"} else if (e.clientX - relLeft >= bw - o.offsetWidth - 2) {o.style.left = (sbw - o.offsetWidth - 2) + "px"} else {o.style.left = e.clientX - relLeft + "px"}if (e.clientY - relTop <= 1) {o.style.top = 1 + "px"} else if (e.clientY - relTop >= bh - o.offsetHeight - 30) {o.style.top = (bh - o.offsetHeight) + "px"} else {o.style.top = e.clientY - relTop + "px"}};document.onmouseup = function() {if (!o) return;if (!window.captureEvents) {o.releaseCapture()} else {window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP) }var o1 = document.getElementById(Id);if (!o1) {return}var l0 = o.offsetLeft;var t0 = o.offsetTop;var l = o1.offsetLeft;var t = o1.offsetTop;Kf54MyMove.Move_e(Id, l0, t0, l, t, T);document.body.removeChild(o);o = null}};this.Move_e = function(Id, l0, t0, l, t, T) {if (typeof(window["ct" + Id]) != "undefined") {clearTimeout(window["ct" + Id])}var o = document.getElementById(Id);if (!o) return;var sl = st = 8;var s_l = Math.abs(l0 - l);var s_t = Math.abs(t0 - t);if (s_l - s_t > 0) {if (s_t) {sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6 } else {sl = 0}} else {if (s_l) {st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6 } else {st = 0}}if (l0 - l < 0) {sl *= -1}if (t0 - t < 0) {st *= -1}if (Math.abs(l + sl - l0) < 52 && sl) {sl = sl > 0 ? 2 : -2}if (Math.abs(t + st - t0) < 52 && st) {st = st > 0 ? 2 : -2}if (Math.abs(l + sl - l0) < 16 && sl) {sl = sl > 0 ? 1 : -1}if (Math.abs(t + st - t0) < 16 && st) {st = st > 0 ? 1 : -1}if (s_l == 0 && s_t == 0) {return}if (T) {o.style.left = l0 + "px";o.style.top = t0 + "px";return} else {if (Math.abs(l + sl - l0) < 2) {o.style.left = l0 + "px"} else {o.style.left = l + sl + "px"}if (Math.abs(t + st - t0) < 2) {o.style.top = t0 + "px"} else {o.style.top = t + st + "px"}window["ct" + Id] = window.setTimeout("Kf54MyMove.Move_e('" + Id + "', " + l0 + " , " + t0 + ", " + (l + sl) + ", " + (t + st) + "," + T + ")", 1)}}};</script></body></html>。

网页浮动窗口代码

1. 右栏浮动广告QUOTE:<script language=javascript>var specialcode="<DIV id=searchspe style='Z-INDEX: 100; right: 1px; POSITION: absolute; TOP: 180px;'><TABLE cellSpacing=0 cellPadding=0 width=150 style='border-left:1px solid #2E6287;border-top:1px solid #2E6287;border-right:1px solid #2E6287;font-size:12px;color:#ffffff; border-bottom-color:#2E6287; border-bottom-width:1px'><TR bgcolor=#2E6287><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关闭</TD></TR></TABLE><table border='1' width='150' id='table1' height='500' bordercolor='#2E6287'><tr><td>广告内容</td></tr></table></DIV>";document.write(specialcode);lastScrollY=0;functionheartBeat0(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollY);if(percent>0)percen t=Math.ceil(percent);elsepercent=Math.floor(percent);document.all.searchspe.style.pixelTop+=percent;lastScrollY=lastScr ollY+percent;}window.setInterval("heartBeat0()",1);</script>2.左栏浮动广告QUOTE:<script language=javascript>var specialcode="<DI V id=searchspe style='Z-INDEX: 100; left: 1px; POSITION: absolute; TOP: 50px;'><TABLE cellSpacing=0 cellPadding=0 width=360 style='border-left:1px solid #333333;border-top:1px solid #333333;border-right:1px solid #333333;font-size:12px;color:#ffffff'><TR bgcolor=#2E6287><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关闭</TD></TR></TABLE><table border='1' width='150' id='table1' bordercolor='#2E6287' height='500'><tr><td>广告内容</td></tr></table></DIV>";document.write(specialcode);lastScrollY=0;functionheartBeat0(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollY);if(percent>0)percen t=Math.ceil(percent);elsepercent=Math.floor(percent);document.all.searchspe.style.pixelTop+=percent;lastScrollY=lastScr ollY+percent;}window.setInterval("heartBeat0()",1);</script>3.左栏固定广告QUOTE:<DIV id=searchspe style='Z-INDEX: 100; left: 1px; POSITION: absolute; TOP: 50px;'><TABLE cellSpacing=0 cellPadding=0 width=360 style='border-left:1px solid #333333;border-top:1px solid #333333;border-right:1px solid #333333;font-size:12px;color:#ffffff'><TR bgcolor=#2E6287><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关闭</TD></TR></TABLE>广告内容</DIV>4.右栏固定广告QUOTE:<DIV id=searchspe style='Z-INDEX: 100; right: 1px; POSITION: absolute; TOP: 50px;'><TABLE cellSpacing=0 cellPadding=0 width=360 style='border-left:1px solid #333333;border-top:1px solid #333333;border-right:1px solid #333333;font-size:12px;color:#ffffff'><TR bgcolor=#2E6287><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关闭</TD></TR></TABLE>广告内容</DIV>5.漂浮广告代码QUOTE:<div id="img" style="position:absolute;; width: 200; height: 151">广告内容</div><script LANGUAGE="JavaScript">var xPos = 20;var yPos = 10;img.style.left= xPos;img.style.top = yPos;var step = 1;var delay = 30;var width,height,Hoffset,Woffset;var y = 1;var x = 1;var interval;img.visibility = "visible";function changePos(){width = document.body.clientWidth;height = document.body.clientHeight;Hoffset = img.offsetHeight;Woffset = img.offsetWidth;if (y){yPos = yPos + step;}else{yPos = yPos - step;}if (yPos < 0){y = 1;yPos = 0;}if (yPos >= (height - Hoffset)){y = 0;yPos = (height - Hoffset);}if (x){xPos = xPos + step;}else{xPos = xPos - step;}if (xPos < 0){x = 1;xPos = 0;}if (xPos >= (width - Woffset)){x = 0;xPos = (width - Woffset);}img.style.left = xPos + document.body.scrollLeft; img.style.top = yPos + document.body.scrollTop; }function start(){interval = setInterval('changePos()', delay);}function pause_resume(){clearInterval(interval);}start();</script>6.固定对联QUOTE:<DIV id=searchspe style='Z-INDEX: 100; right: 5px; POSITION: absolute; TOP: 50px;'><TABLE cellSpac ing=0 cellPadding=0 width=150 style='font-size:12px;color:#ffffff'><TR bgcolor=#C54A00><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关闭</TD></TR></TABLE>广告内容</DIV><DIV id=searchspe2 style='Z-INDEX: 100; left: 5px; POSITION: absolute; TOP: 50px;'><TABLE cellSpacing=0 cellPadding=0 width=150 style='font-size:12px;color:#ffffff'><TR bgcolor=#12BDFF><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe2.style.visibility='hidden' width=30>关闭</TD></TR></TABLE>广告内容</DIV>7.随动对联QUOTE:<script language=javascript>function close163news(){searchspe.style.visibility='hidden';searchspe2.style.visibility='hidden';} var specialcode="<DIV id=searchspe style='Z-INDEX: 100; right: 1px; POSITION: absolute; TOP: 30px;'><TABLE cellSpac ing=0 cellPadding=0 width=150 style='font-size:12px;color:#ffffff'><TR bgcolor=#C54A00><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick='close163news()' width=30>关闭</TD></TR></TABLE>广告内容</DIV>";document.write(specialcode);lastScrollX=0;function heartBeat0(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollX);if(percent>0)percen t=Math.ceil(percent);elsepercent=Math.floor(percent);document.all.searchspe.style.pixelTop+=percent;lastScrollX=lastScr ollX+percent;}window.setInterval("heartBeat0()",1);var specialcode2="<DIV id=searchspe2 style='Z-INDEX: 100; left: 1px; POSITION: absolute; TOP: 30px;'><TABLE cellSpacing=0 cellPadding=0 width=150 style='font-size:12px;color:#ffffff'><TR bgcolor=#12BDFF><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick='close163news()' width=30>关闭</TD></TR></TABLE>广告内容</DIV>";document.write(specialcode2);lastScrollY=0;function heartBeat1(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollY);if(percent>0)percen t=Math.ceil(percent);elsepercent=Math.floor(percent);document.all.searchspe2.style.pixelTop+=percent;lastScrollY=lastSc rollY+percent;}window.setInterval("heartBeat1()",1);</script>8.qq好友上线广告代码QUOTE:<DIV id=eMengstyle="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 64px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 168px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 374px; HEIGHT: 115px; BACKGROUND-COLOR: #c9d3f3"><TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4 border=0><TBODY><TR><TDstyle="FONT-SIZE: 12px; BACKGROUND-IMAGE: none; COLOR: #0f2c8c"width=30 height=24> </TD><TDstyle="PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND-IMAGE: none; COLOR: #1f336b; PADDING-TOP: 4px"vAlign=center width="100%"><span class="style13">本站提示</span></TD><TD vAlign=center align=right width=19 2px? padding-top: 2px;padding-right:><SPAN title=关闭style="FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px"onclick=closeDiv()>×</SPAN></TD></TR><TR><TDstyle="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 1px" colSpan=3 height=90><DIVstyle="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%"><div align="left"> <span style="text-decoration: none"><FONTcolor=#FF0000>仿造qq好友上线<br><center> </center></FONT></span></div></DIV></td></tr></table><SCRIPT language=JavaScript>window.onload = getMsg;window.onresize = resizeDiv;window.onerror = function(){}var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;function getMsg(){try{divTop = parseInt(document.getElementById("eMeng").style.top,10)divLeft = parseInt(document.getElementById("eMeng").style.left,10)divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)docWidth = document.body.clientWidth;docHeight = document.body.clientHeight;document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeightdocument.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidthdocument.getElementById("eMeng").style.visibility="visible"objTimer = window.setInterval("moveDiv()",10)}catch(e){}}function resizeDiv(){try{divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)docWidth = document.body.clientWidth;docHeight = document.body.clientHeight;document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)}catch(e){}}function moveDiv(){try{if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10))){window.clearInterval(objTimer)objTimer = window.setInterval("resizeDiv()",1)}divTop = parseInt(document.getElementById("eMeng").style.top,10)document.getElementById("eMeng").style.top = divTop - 1}catch(e){}}function closeDiv(){document.getElementById('eMeng').style.visibility='hidden';if(objTimer) window.clearInterval(objTimer)}</SCRIPT>9:网页中的分享代码：<div id="ckepop"><a title="分享到新浪微博" class="jiathis_button_tsina"></a><a title="分享到QQ收藏" class="jiathis_button_qq"></a><a title="分享到开心网" class="jiathis_button_kaixin001"></a><a title="分享到人人网" class="jiathis_button_renren"></a><span class="separator">|</span><a href="/share/" class="jiathis button jtico jtico_more" target="_blank">更多</a> </div> <script type="text/javascript" src="/code/jia.js" charset="utf-8 "></script>是不是觉得图标太少了？来分析下这段JS。

悬浮广告代码-js手机端网站底部和头部悬浮html广告代码教程【附实例】

悬浮⼴告代码-js⼿机端⽹站底部和头部悬浮html⼴告代码教程【附实例】<script>document.write("<style>");document.write("#topNavad{background-color:#fff0; z-index:999; position:fixed; top:0; left:0; width:100%; _position:absolute;");document.write("_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); overflow:visible; }");document.write("#bottomNavad{background-color:#fff0; z-index:999; position:fixed; bottom:0; left:0; width:100%; _position:absolute;");document.write("_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); overflow:visible; }");document.write("<\/style>");document.write("");document.write(" ");document.write("");document.write("<div id=\"topNavad\">");document.write("<div id=\"MyDiv2\">");document.write("<div id=\"newsImg\">");document.write("<center>");document.write("<a href=\"https:\/\/\" rel=\"nofollow\" target=\"_blank\">");document.write("<img src=\"shunwang.jpg\" title=\"AD\" \/ style=\"width:100%\">");document.write("<\/a>");document.write("<\/center>");document.write("<\/div>");document.write("<span onclick='CloseDiv(\"MyDiv2\")' style=\"text-align:right; display:block;\">关闭<\/span>");document.write("");document.write("<\/div>");document.write("<\/div>");document.write("");document.write("");document.write("");document.write("<div id=\"bottomNavad\">");document.write("<div id=\"MyDiv1\">");document.write("<span onclick='CloseDiv(\"MyDiv1\")' style=\"text-align:right; display:block;\">关闭<\/span>");document.write("<center>");document.write("<a href=\"https:\/\/\" rel=\"nofollow\" target=\"_blank\">");document.write("<img src=\"shunwang.jpg\" title=\"AD\" \/ style=\"width:100%\">");document.write("<\/a>");document.write("<\/center>");document.write("<\/div>");document.write("<\/div>");document.write("");document.write("");function CloseDiv(div) {document.getElementById(div).style.display = 'none';};</script>悬浮⼴告代码-js⼿机端⽹站底部和头部悬浮html⼴告代码教程-移动端的悬浮⼴告代码html版本：<style>#topNavad{background-color:#fff0; z-index:999; position:fixed; top:0; left:0; width:100%; _position:absolute;_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); overflow:visible; }#bottomNavad{background-color:#fff0; z-index:999; position:fixed; bottom:0; left:0; width:100%; _position:absolute;_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); overflow:visible; }</style><div id="topNavad"><div id="MyDiv2"><div id="newsImg"><center><a href="https://" rel="nofollow" target="_blank"><img src="shunwang.jpg" title="AD" / style="width:100%"></a></center></div><span onclick='CloseDiv("MyDiv2")' style="text-align:right; display:block;">关闭</span></div></div><div id="bottomNavad"><div id="MyDiv1"><span onclick='CloseDiv("MyDiv1")' style="text-align:right; display:block;">关闭</span> <center><a href="https://" rel="nofollow" target="_blank"><img src="shunwang.jpg" title="AD" / style="width:100%"></a></center></div></div><script>function CloseDiv(div) {document.getElementById(div).style.display = 'none';};</script>。

网页两边悬浮窗广告代码

<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>悬浮广告</title></head><body><div style="height:900px; display:block;"></div><div id="AdLayer1" style='position: absolute; ;z-index:1; left:100px; border:1px #DDD solid; width:36px; height:200px; background-color:#CCC;'></div><div id="AdLayer2" style='position: absolute; ;z-index:1; right:100px; border:1px #DDD solid; width:36px; height:200px; background-color:green;'></div><script type="text/javascript">// 页面初始化function initEcAd() {document.all.AdLayer1.style.posTop = 200;document.all.AdLayer1.style.visibility = 'visible'document.all.AdLayer2.style.posTop = 200;document.all.AdLayer2.style.visibility = 'visible'MoveLeftLayer('AdLayer1');MoveRightLayer('AdLayer2');}// 移动左面的广告层function MoveLeftLayer(layerName) {var x = 100;var y = 100;// 左侧广告距离页首高度var diff = (document.body.scrollTop + y - document.all.AdLayer1.style.posTop)*.40;var y = document.body.scrollTop + y - diff;eval("document.all." + layerName + ".style.posTop = parseInt(y)");eval("document.all." + layerName + ".style.posLeft = x");setTimeout("MoveLeftLayer('AdLayer1');", 20);}// 移动右边的广告层function MoveRightLayer(layerName) {var x = 100;var y = 100;// 右侧广告距离页首高度var diff = (document.body.scrollTop + y - document.all.AdLayer2.style.posTop)*.40;var y = document.body.scrollTop + y - diff;eval("document.all." + layerName + ".style.posTop = y");eval("document.all." + layerName + ".style.posRight = x");setTimeout("MoveRightLayer('AdLayer2');", 20);}initEcAd()</script> </body> </html>。

全屏代码

<div style="height:472px;"><div class="sn-simple-logo footer-more-trigger" style="width:1920px;left:50%;top:auto;border:0;padding:0;z-index:1;"><div class="sn-simple-logo footer-more-trigger" style="width:1920px;height:472px;left:-960px;top:auto;border:0px;padding:0px;z-index:1;"> <div style="width:584px;height:472px;float:left;"> </div><div style="width:950px;height:472px;"><div class="footer-more" style="padding:0;height:470px;position:relative;"><div style="width:950px;"><ul style="width:105%;height:470px;"><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a target="_blank" style="display:block;width:310px;height:230px;background:url(///imgextra/i4/166771117/TB2_KPCaxBmpuFjSZFDXXXD8pXa_!!166771117.png)no-repeat scroll center center;"></a></li><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a target="_blank" style="display:block;width:310px;height:230px;background:url(///imgextra/i4/166771117/TB2cyHCatXnpuFjSZFoXXXLcpXa_!!166771117.png)no-repeat scroll center center;"></a></li><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a target="_blank" style="display:block;width:310px;height:230px;background:url(///imgextra/i1/166771117/TB2rBzAaxBmpuFjSZFsXXcXpFXa_!!166771117.png)no-repeat scroll center center;"></a></li><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a target="_blank" style="display:block;width:310px;height:230px;background:url(///imgextra/i3/166771117/TB2tMvAaElnpuFjSZFjXXXTaVXa_!!166771117.png)no-repeat scroll center center;"></a></li><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a target="_blank" style="display:block;width:310px;height:230px;background:url(///imgextra/i4/166771117/TB23RnAaxxmpuFjSZFNXXXrRXXa_!!166771117.png)no-repeat scroll center center;"></a></li><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a target="_blank" style="display:block;width:310px;height:230px;background:url(///imgextra/i1/166771117/TB2_6DzaCVmpuFjSZFFXXcZApXa_!!166771117.png)no-repeat scroll center center;"></a></li></ul></div><div class="footer-more-panel" style="width:auto;line-height:inherit;padding:0;background:none;border:0;top:0;right:auto;bottom:auto;left:0;"><div style="width:950px;"><ul style="width:105%;height:470px;"><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a class="ma_61" target="_blank" style="display:block;width:310px;height:230px;background-color:#0D0D0D;display:block;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);opacity:0.4;" ></a><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{"trigger":".ma_61","align":{"node":".ma_61","offset":[0,0],"points":["cc","cc"]}}"><div class="tcx" style="z-index:999;height:230px;width:310px;opacity:1;"><a target="_blank" href="///item.htm?spm=a1z10.5-c.w4002-1622564405.26.cqOI1S&id=541534969012&scene=taobao_shop"><imgsrc="///imgextra/i4/166771117/TB2_KPCaxBmpuFjSZFDXXXD8pXa_!!166771117.png" /></a></div></div></li><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a class="ma_62" target="_blank" style="display:block;width:310px;height:230px;background-color:#0D0D0D;display:block;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);opacity:0.4;" ></a><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{"trigger":".ma_62","align":{"node":".ma_62","offset":[0,0],"points":["cc","cc"] }}"><div class="tcx" style="z-index:999;height:230px;width:310px;opacity:1;"><a target="_blank" href="///category-1279576596.htm?spm=a1z10.5-c.w4002-1622564405.4.i9yoQ2&search=y&cps=y&queryType=cat&a mp;catId=1279576596&parentCatId=1279576594&scene=taobao_shop"><imgsrc="///imgextra/i4/166771117/TB2cyHCatXnpuFjSZFoXXXLcpXa_!!166771117.png" /></a></div></div></li><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a class="ma_63" target="_blank" style="display:block;width:310px;height:230px;background-color:#0D0D0D;display:block;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);opacity:0.4;" ></a><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{"trigger":".ma_63","align":{"node":".ma_63","offset":[0,0],"points":["cc","cc"] }}"><div class="tcx" style="z-index:999;height:230px;width:310px;opacity:1;"><a target="_blank" href="///category-1279576597.htm?spm=a1z10.5-c.w4002-1622564405.5.N8qP5h&search=y&cps=y&queryType=cat&a mp;catId=1279576597&parentCatId=1279576594&scene=taobao_shop"><imgsrc="///imgextra/i1/166771117/TB2rBzAaxBmpuFjSZFsXXcXpFXa_!!166771117.png" /></a></div></div></li><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a class="ma_64" target="_blank" style="display:block;width:310px;height:230px;background-color:#0D0D0D;display:block;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);opacity:0.4;" ></a><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{"trigger":".ma_64","align":{"node":".ma_64","offset":[0,0],"points":["cc","cc"] }}"><div class="tcx" style="z-index:999;height:230px;width:310px;opacity:1;"><a target="_blank" href="///item.htm?spm=a1z10.5-c.w4002-1622564405.20.cqOI1S&id=534339951532&scene=taobao_shop"><imgsrc="///imgextra/i3/166771117/TB2tMvAaElnpuFjSZFjXXXTaVXa_!!166771117.png" /></a></div></div></li><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a class="ma_65" target="_blank" style="display:block;width:310px;height:230px;background-color:#0D0D0D;display:block;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);opacity:0.4;" ></a><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{"trigger":".ma_65","align":{"node":".ma_65","offset":[0,0],"points":["cc","cc"]}}"><div class="tcx" style="z-index:999;height:230px;width:310px;opacity:1;"><a target="_blank" href="///item.htm?spm=a1z10.5-c.w4002-1622564405.23.cqOI1S&id=541522684595&scene=taobao_shop"><imgsrc="///imgextra/i4/166771117/TB23RnAaxxmpuFjSZFNXXXrRXXa_!!166771117.png" /></a></div></div></li><li style="width:310px;height:230px;float:left;margin-right:10px;margin-bottom:10px;"><a class="ma_66" target="_blank" style="display:block;width:310px;height:230px;background-color:#0D0D0D;display:block;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);opacity:0.4;" ></a><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{"trigger":".ma_66","align":{"node":".ma_66","offset":[0,0],"points":["cc","cc"]}}"><div class="tcx" style="z-index:999;height:230px;width:310px;opacity:1;"><a target="_blank" href="///item.htm?spm=a1z10.5-c.w4002-1622564405.17.cqOI1S&id=534405546456&scene=taobao_shop"><imgsrc="///imgextra/i1/166771117/TB2_6DzaCVmpuFjSZFFXXcZApXa_!!166771117.png" /></a></div></div></li></ul></div></div></div></div></div></div></div>。

京东店铺装修代码全集

（京东商城）店铺装修代码大全首先旗舰店店铺设计代码一、大背景不平铺<div class="forBack">(正文body)可换的地方</div><style type="text/css">.w1{ text-align:center; width:100%; background:url(/popstreet/201105/18/banner_bg_170834.gif) center top no-repeat}/*模板背景图片循环*/ </style>二、.漂浮右侧（左侧可更改RIGHT: 1.5%为left: 1.5%）<div class="w w1"><div style="POSITION: fixed; BOTTOM: 0px; COLOR: #000000; TOP: 30%; RIGHT: 1.5%"> <div><a href="/ilike/food197021/index.html" target="_blank"><img border="0" alt=""src="/uploads/promotion/promotion-images/2011/08/01/20110801035244 KK.jpg" width="130" height="135" usemap="#Map02" /></a></div></div></div>三、.活动底部导航<div style="POSITION: fixed; WIDTH: 980px; BOTTOM: 0pt; HEIGHT: 60px; MARGIN-LEFT: -490px; LEFT: 50%" id="springfloat"><img border="0" alt="" src="/popstreet/201107/12/banner_salebottom_161815.gif"width="980" height="60" usemap="#Map2" /><map id="Map2" name="Map2"><area href="#hw" shape="RECT" coords="727,14,829,48" /><area href="#ps" shape="RECT" coords="853,15,968,47" /><area href="#yd" shape="RECT" coords="614,15,720,46" /><area href="#bao" shape="RECT" coords="508,12,596,49" /><area href="#nz" shape="RECT" coords="26,19,139,50" /><area href="#nvz" shape="RECT" coords="150,14,260,48" /><area href="#ny" shape="RECT" coords="268,18,372,47" /><area href="#xie" shape="RECT"coords="385,15,479,50" /></map></div>四、默认专题边框及背景颜色去除（见标注）<style type="text/css">.tem-top{ background:#ffffff; border:7px solid #fff; border-bottom:0}/*单品顶部背景白色边框7像素下边框为0*/.tem-middle,.left-line,.tem-bottom{ background:#fff;}/*单品中部单品间隔虚线单品顶部背景为白色*/.tem-middle{ border-left:7px solid #fff;border-right:7px solid #fff}/*单品中部左边框7像素右边框7像素*/.tem-bottom{ border:7px solid #fff; border-top:0;}/*单品底部7像素边框顶部边框为0*/.w1{ text-align:center; width:100%; background:url(/popstreet/201107/11/banner_3_164158.gif)}/*模板背景图片循环*/.tem{margin: 0 auto; padding: 0 16px;width: 980px;}/*单品模板宽度*/#springfloat{ _display:none;}b{ font-weight:normal;}</style>右边框7像素*/.tem-bottom{ border:7px solid #fff; border-top:0;}/*。

浮动广告代码

注：浮动广告代码：<SCRIPT language=JavaScript>self.onError=null;currentX = currentY = 0;whichIt = null;lastScrollX = 0; lastScrollY = 0;NS = (yers) ? 1 : 0;IE = (document.all) ? 1: 0;function heartBeat() {if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }if(diffY != lastScrollY) {percent = .1 * (diffY - lastScrollY);if(percent > 0) percent = Math.ceil(percent);else percent = Math.floor(percent);if(IE) document.all.sohususpend.style.pixelTop += percent;if(NS) document.sohususpend.top += percent;lastScrollY = lastScrollY + percent;}if(diffX != lastScrollX) {percent = .1 * (diffX - lastScrollX);if(percent > 0) percent = Math.ceil(percent);else percent = Math.floor(percent);if(IE) document.all.sohususpend.style.pixelLeft += percent;if(NS) document.sohususpend.left += percent;lastScrollX = lastScrollX + percent;}}function checkFocus(x,y) {stalkerx = document.sohususpend.pageX;stalkery = document.sohususpend.pageY;stalkerwidth = document.sohususpend.clip.width;stalkerheight = document.sohususpend.clip.height;if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;else return false;}function grabIt(e) {if(IE) {whichIt = event.srcElement;while (whichIt.id.indexOf("sohususpend") == -1) {whichIt = whichIt.parentElement;if (whichIt == null) { return true; }}whichIt.style.pixelLeft = whichIt.offsetLeft;whichIt.style.pixelTop = whichIt.offsetTop;currentX = (event.clientX + document.body.scrollLeft);currentY = (event.clientY + document.body.scrollTop);} else {window.captureEvents(Event.MOUSEDOWN);if(checkFocus (e.pageX,e.pageY)) {whichIt = document.sohususpend;StalkerTouchedX = e.pageX-document.sohususpend.pageX;StalkerTouchedY = e.pageY-document.sohususpend.pageY;}}return true;}function moveIt(e) {if (whichIt == null) { return false; }if(IE) {newX = (event.clientX + document.body.scrollLeft);newY = (event.clientY + document.body.scrollTop);distanceX = (newX - currentX); distanceY = (newY - currentY);currentX = newX; currentY = newY;whichIt.style.pixelLeft += distanceX;whichIt.style.pixelTop += distanceY;if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;if(whichIt.style.pixelLeft > document.body.offsetWidth -document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;if(whichIt.style.pixelTop > document.body.offsetHeight +document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;event.returnValue = false;} else {whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;if( (whichIt.left + whichIt.clip.width) >=(window.innerWidth+self.pageXOffset-17)) whichIt.left =((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;if( (whichIt.top + whichIt.clip.height) >=(window.innerHeight+self.pageYOffset-17)) whichIt.top =((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;return false;}return false;}function dropIt() {whichIt = null;if(NS) window.releaseEvents (Event.MOUSEDOWN);return true;}if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); window.onmousedown = grabIt;window.onmousemove = moveIt;window.onmouseup = dropIt;}if(IE) {document.onmousedown = grabIt;document.onmousemove = moveIt;document.onmouseup = dropIt;}if(NS || IE) action = window.setInterval("heartBeat()",1);</SCRIPT>。

网页上漂浮的客服代码（漂浮框架兼容各大浏览器）

网页上漂浮的客服代码（漂浮框架兼容各大浏览器）第一篇：网页上漂浮的客服代码(漂浮框架兼容各大浏览器) 常见网页上的漂浮客服窗口，是一个漂浮框架，各位可以拿去用。

在chrome、ie、firefox下测试正常。

以下是部分代码（可点击演示查看或直接下载源代码）：.kfoutbox{position:absolute;z-index:10000;right:5px;margin:0px;width:80px;height:150px;back ground:#ff0000;}这里是网页的内容区第二篇：《漂浮》四年级上美术教案《漂浮》四年级上美术教案漂浮教学内容与目标、显性内容与目标应知：通过本学习，学生初步探索有关浮力的知识，并能根据身边的废旧材料进行有创意的设计。

应会：结合绘画、粘贴、插接等不同造型手法，以及漂浮的科学道理，利用生活中的废旧物品实现自己的艺术创想。

2、隐性内容与目标通过本学习，培养学生将艺术创造与科学研究完美结合的意识，以及发现问题、分析问题、解决问题的能力，激发他们热爱生活、关注生活的美好情感。

教学重点：启发学生探究简单的浮力知识，并结合身边废旧物品进行有创意的设计与制作。

教学难点：在制作漂浮物时，创新地使用材料，制作方法精细。

教学过程：一、游戏导人游戏l：发给学生每人一支吸管，提出游戏要求：你能想到几种令吸管在水中漂浮起来的方法?游戏2：抢答——如果给你一把吸管，让它们漂浮在水面上．设想一下都可能有哪些不同的造型？二、思考反馈吸管为什么可以漂浮?铁很重，为什么轮船却能漂浮在海上？三、信息交流组织学生进行信息交流。

哪位科学家最早发现了浮力？你知道有哪些关于浮力的小故事吗?四、合作探究组织学生分组探究：在我们身边，还有哪些材料可以漂浮?看一看：书中同学作品给了你哪些启发?试一试：运用折、剪、卷、组合等不同手段，你能用手边的材料组织什么样的漂浮物的造型?讲一讲：你能设想一下它的功能及装饰吗？五、探索实践提出作业要求：利用身边的废旧材料，制作一个能浮在水面上的新颖美观的玩具。

屏幕保护程序代码飘荡的字

屏幕保护程序代码飘荡的字篇一：屏幕保护程序代码飘荡的字是一种常见的屏幕保护程序效果，它可以在计算机屏幕上显示一系列漂浮的字符，给人一种代码正在运行的感觉。

这种屏保程序不仅美观，还能保护屏幕避免长时间静止不动导致的烧屏现象。

实现屏幕保护程序代码飘荡的字并不复杂，通常使用编程语言如C++、Java或Python来编写。

以下是一个简单的Python代码示例：```pythonimport randomimport pygameimport string# 设置屏幕大小SCREEN_WIDTH = 800SCREEN_HEIGHT = 600# 设置字体颜色和大小FONT_COLOR = (255, 255, 255) # 白色FONT_SIZE = 24# 初始化pygamepygame.init()# 创建屏幕对象screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT)) pygame.display.set_caption('Code Screensaver')# 创建字体对象font = pygame.font.Font(None, FONT_SIZE)# 创建字符列表characters = list(string.ascii_letters + string.digits)# 创建字符对象列表texts = [font.render(characters[random.randint(0, len(characters)-1)], True, FONT_COLOR) for _ in range(100)]# 创建字符坐标列表positions = [(random.randint(0, SCREEN_WIDTH), random.randint(0, SCREEN_HEIGHT)) for _ in range(100)]# 游戏主循环running = Truewhile running:# 处理退出事件for event in pygame.event.get():if event.type == pygame.QUIT:running = False# 填充屏幕背景颜色screen.fill((0, 0, 0)) # 黑色# 更新字符位置for i in range(len(texts)):positions[i] = (positions[i][0], (positions[i][1] + random.randint(1, 3)) % SCREEN_HEIGHT)# 绘制字符到屏幕for i in range(len(texts)):screen.blit(texts[i], positions[i])# 更新屏幕显示pygame.display.flip()# 退出pygamepygame.quit()```上述代码使用了Python的pygame库来创建屏幕并绘制字符。

DIV+CSS仿京东商城导航条代码

background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category a{
font:12px;
text-decoration:none;
color:#333333;
<h3><a href="#" style="color:#ff3333;">热销推荐</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</a></li>
background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category .h2_cat_1{
width:148px;
height:26px;
background-image:url(/upload/360buy/my_menubg_1.gif);
<li><a href="#">下载排行</a></li>

我写的京东页面代码

我写的京东页⾯代码1、index.html---主要搭建页⾯的结构2、base.css---主要写⼀些样式重置的代码/*样式重置*/body,p,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,input,textarea{margin: 0;padding: 0;}a {text-decoration: none;color: #999;}li {list-style: none;}img,input {outline: none;vertical-align: middle;border: 0;}body {font-size: 12px;font-family: "微软雅⿊";color: #999;background-color: #f6f6f6;}table {border-collapse: collapse;}/*放置⼀些公共的样式*/.clear:after {display: block;content: "";clear: both;}/*IE兼容*/.clear {zoom: 1;}.fl {float: left;}.fr {float: right;}.w {width: 1190px;margin: 0 auto;}3、head.css---主要写页⾯顶部的样式/*顶部⼴告样式开始*/.head_banner {height: 80px;background-color: #d32338;}.head_banner .w {position: relative;}.head_banner .w .close {display: block;width: 20px;height: 20px;font-size: 13px;color: rgba(255,255,255,0.3);line-height: 20px;text-align: center;background-color: rgba(0,0,0,0.3);position: absolute;top: 5px;right: 5px;}.head_banner .w .close:hover {color: rgba(255,255,255,0.8);background-color: rgba(0,0,0,0.8);}/*顶部⼴告样式结束*//*头部导航部分开始*/.head_nav {height: 30px;background-color: #e3e4e5;border-bottom: 1px #ddd solid;}.head_nav .w ul.fl li {margin-left: 200px;height: 30px;line-height: 30px;text-align: center;border: 1px #e3e4e5 solid;border-bottom: none;}.head_nav .w ul.fl li:hover{background-color: #fff;border: 1px #e3e4e5 solid;border-bottom: none;}.head_nav .w ul.fl li .iconfont {/*margin-left: 10px;*/color: #f10215;}/*.head_nav .w .fl .iconfont:hover {background-color: #fff;border: 1px #eee solid;border-bottom: none;}*/.head_nav .w ul.fr li {/*height: 10px;*/padding: 0 6px;line-height: 30px;float: left;}.head_nav .w ul.fr li a.red {color: red;}.head_nav .w ul.fr li a:hover{color: #f10215;}.head_nav .w ul.fr li .iconfont {font-size: 9px;}.head_nav .w ul.fr li.line {width: 1px;height: 10px;padding: 0; /*li设置了padding撑开，line不⽤撑开，把padding设为0*/ background-color: #cccccc;margin: 11px 6px 0 6px;}/*.head_nav .w .fr li a {font-size: 12px;color: #999;}.head_nav .w .fr a:hover {font-size: 12px;color: #f10215;}*/.head_nav .w .fr li .public {/*font-size: 9px;*/border: 1px #e3e4e5 solid;border-bottom: none;height: 29px;}.head_nav .w .fr li .public:hover {background-color: #fff;border: 1px #ccc solid;border-bottom: none;}/*⼩三⾓样式*/.head_nav .w .fr li.mobile {position: relative;}.head_nav .w .fr li.mobile:after {display: block;content: "";width: 0;height: 0;border-top: 8px transparent solid;border-right: 8px transparent solid;border-bottom: 8px #fff solid;border-left: 8px transparent solid;position: absolute;top: 18px;left: 20px;}/*⼆维码样式*/.head_nav .w .fr li.mobile i {width: 58px;height: 58px;border: 1px #ccc solid;display: block;background: url(../img/mobile_qrcode.png) no-repeat center; position: absolute;left: 0px;top: 31px;}/*头部导航部分结束*//*头部搜索区域开始*/.head_search {height: 140px;}.head_search .w {position: relative;}.head_search .w .logo {float: left;position: absolute;top: -30px;/*margin-top: -30px;*/box-shadow: 0px 0px 10px #ccc;}.head_search .w .search {width: 548px;height: 33px;float: left;margin-top: 25px;margin-left: 320px;border: 1px #f10215 solid;position: relative;}.head_search .w .search .text {width: 498px;height: 33px;float: left;text-indent: 4px; /*input框⾥的字体缩进*/ }.head_search .w .search .btn {width: 50px;height: 33px;background-color: #f10215;float: left;}.head_search .w .search .iconfont {position: absolute;top: 7px;right: 13px;color: #fff;font-size: 20px;}.head_search .w .shopcart {float: left;width: 188px;height: 33px;line-height: 33px;text-align: center;font-size: 12px;color: #f10215;background-color: #fff;border: 1px #e3e4e5 solid;margin-top: 25px;margin-left: 35px;position: relative;}.head_search .w .shopcart em {display: block;font-style: normal;width: 14px;height: 14px;color: #fff;line-height: 14px;text-align: center;border-radius: 50%;background-color: #f10215;position: absolute;top: 5px;right: 34px;}/*热词搜索样式*/.head_search .w .hotwords {float: left;margin-left: 320px;margin-top: 10px;}.head_search .w .hotwords ul li {float: left;font: 12px/12px "微软雅⿊";margin-right: 10px;}.head_search .w .hotwords a.red {color: red;}.head_search .w .hotwords a:hover {color: red;}/*主导航栏样式*/.head_search .w .main_nav {float: left;margin-left: 230px;margin-top: 31px;}.head_search .w .main_nav ul li {float: left;font: 700 16px/16px "微软雅⿊";margin-right: 30px;}.head_search .w .main_nav ul li.line {width: 1px;height: 10px;background-color: #ccc;margin: 3px 20px 0 -10px;}.head_search .w .main_nav ul li a {color: #555;}.head_search .w .main_nav ul li a:hover {color: red;}/*⼩⼴告*/.head_search .w .small_banner {margin-top: 12px;display: block;float: right;}/*头部搜索区域结束*/4、index.css---主要写轮播图部分和秒杀部分的样式/*轮播区域样式*/.con_lunbo {height: 480px;background: url(../img/a-bg.png) no-repeat center;z-index: -1;} /*背景图被压在版⼼下⾯，但是重新敲⼀遍，保存⼀遍就可以了，为什么？？*/ /*左侧导航列表样式*/.con_lunbo .w .side_nav {width: 190px;height: 480px;background-color: #6e6568;}.con_lunbo .w .side_nav ul {margin-top: 16px;}.con_lunbo .w .side_nav ul li {height: 30px;font: 12px/30px "微软雅⿊";color: #fff;padding-left: 12px;}.con_lunbo .w .side_nav ul li:hover {background-color: rgba(255,255,255,0.3);}.con_lunbo .w .side_nav ul li a {color: #fff;}.con_lunbo .w .side_nav ul li a:hover {color: red;}/*中间轮播区域样式*/.con_lunbo .w .lunbo {width: 790px;height: 480px;margin: 0 10px;}.con_lunbo .w .lunbo .lb {height: 340px;margin-bottom: 10px;overflow: hidden;position: relative;}.con_lunbo .w .lunbo .lb ul {width: 8000px;}.con_lunbo .w .lunbo .lb ul li {/*width: 790px;height: 340px;*/float: left;}.con_lunbo .w .lunbo .box_img {height: 130px;}.con_lunbo .w .lunbo .lb ol.lb_nav {width: 182px;height: 12px;padding: 4px 9px;border-radius: 9px;background-color: rgba(255,255,255,0.5);position: absolute;left: 50%;bottom: 20px;margin-left: -91px;}.con_lunbo .w .lunbo .lb ol.lb_nav li {float: left;width: 12px;height: 12px;background-color: #fff;border-radius: 50%;margin-right: 10px;}.con_lunbo .w .lunbo .lb ol.lb_nav li:nth-last-child(1) { margin: 0;}.con_lunbo .w .lunbo .lb ol.lb_nav li.active {background-color: red;}/*右侧⽣活列表样式*/.con_lunbo .w .life_list {width: 190px;height: 480px;background-color: #fff;}/*上边登录部分样式*/.con_lunbo .w .life_list .life_top {width: 190px;height: 115px;border-bottom: 1px #e6e6e6 solid;}.con_lunbo .w .life_list .life_top img {width: 45px;height: 45px;border-radius: 50%;margin: 15px 10px 10px;float: left;}.con_lunbo .w .life_list .life_top p {float: left;font: 11px/11px "微软雅⿊";color: #666;/*margin-top: 21px;margin-left: 15px;margin-bottom: 9px;*/margin: 21px 0 15px;}.con_lunbo .w .life_list .life_top a {float: left;font: 11px/11px "微软雅⿊";color: #000;font-weight: bold;margin-right: 9px;}.con_lunbo .w .life_list .life_top a:nth-child(1) { /*不起作⽤*/margin-top: 15px; /*a是⾏内元素，没有margin，设置浮动以后就有margin了*/ }.con_lunbo .w .life_list .life_top a:hover {color: red;}.con_lunbo .w .life_list .life_top .fuli {width: 168px;height: 24px;float: left;margin-top: 15px;}.con_lunbo .w .life_list .life_top .fuli a {float: left;display: block;width: 70px;height: 20px;border: 2px #e01222 solid;font: 11px/20px "微软雅⿊";text-align: center;color: #e01222;background-color: #fff;margin: 0 10px;}.con_lunbo .w .life_list .life_top .fuli a:nth-child(2) {margin: 0;}.con_lunbo .w .life_list .life_top .fuli a:hover {color: #fff;background-color: #e01222;}/*中间促销部分样式*/.con_lunbo .w .life_list .life_middle {width: 160px;height: 147px; /*154px-7px*/margin: 0 auto;}.con_lunbo .w .life_list .life_middle .life_title {width: 147px; /*160px-13px*/height: 15px; /*17px-2*/margin-top: 7px;border-bottom: 1px #e6e6e6 solid;padding-bottom: 2px;}.con_lunbo .w .life_list .life_middle .life_title a {float: left;font: 11px "微软雅⿊";color: #333;font-weight: bold;}.con_lunbo .w .life_list .life_middle .life_title a.sale {border-right: 1px #e6e6e6 solid;padding-right: 13px;}.con_lunbo .w .life_list .life_middle .life_title a.gonggao {margin-left: 15px;}.con_lunbo .w .life_list .life_middle .life_title a.more {float: right;}.con_lunbo .w .life_list .life_middle .life_con {height: 127px;}.con_lunbo .w .life_list .life_middle .life_con a {font: 11px/23px "微软雅⿊";color: #666;float: left;}.con_lunbo .w .life_list .life_middle .life_con a:nth-child(1) { /*不⽣效，问题同上*/margin-top: 19px;}.con_lunbo .w .life_list .life_middle .life_con a:hover {color: red;}/*下边⽣活服务部分样式*/.con_lunbo .w .life_list .life_bottom {width: 190px;height: 210px;}.con_lunbo .w .life_list .life_bottom {overflow: hidden;}.con_lunbo .w .life_list .life_bottom ul {width: 192px;overflow: hidden; /*为什么不起作⽤应该给ul的⽗元素设置overflow: hidden;*/}.con_lunbo .w .life_list .life_bottom ul li {float: left;width: 47px;height: 69px;border-top: 1px #e6e6e6 solid;border-right: 1px #e6e6e6 solid;position: relative;}.con_lunbo .w .life_list .life_bottom ul li a i {display: block;width: 15px;height: 18px;background: url() no-repeat -4px -88px;text-align: center;margin: 15px 16px 10px 15px;}.con_lunbo .w .life_list .life_bottom ul li:nth-child(2) a i { /*不⽣效 */width: 20px; /*li包含a，应该是第⼆个li⾥的a，⽽不是第⼆个a*/height: 20px;background-position: -2px -45px;margin-top: 17px;margin-left: 13px;}.con_lunbo .w .life_list .life_bottom ul li a p { /*不⽣效*/font-size: 11px "微软雅⿊"; /*刚开始设置的是span，span是⾏内元素，text-align: center;不起作⽤*/ color: #666;text-align: center;}.con_lunbo .w .life_list .life_bottom ul li a b {display: block;width: 13px;height: 16px;background: url(../img/jian.png) no-repeat;position: absolute;top: 0;right: 0;}/*秒杀部分样式*/.con_ms {height: 305px;margin-top: 10px;}/*标题左侧样式*/.con_ms .w .title {height: 55px;background: url(../img/seckill_hd.png) no-repeat; }.con_ms .w .title .left_title .corner {display: block;width: 25px;height: 25px;background: url() no-repeat -190px -48px;float: left;margin-top: -2px;margin-left: -1px;}.con_ms .w .title .left_title .clock {display: block;width: 34px;height: 40px;background: url() no-repeat 0px -39px;float: left;margin-top: 8px;margin-left: 31px;}.con_ms .w .title .left_title h4 {float: left;font: 24px/24px "微软雅⿊";color: #fff;margin-left: 10px;margin-top: 16px;}.con_ms .w .title .left_title a {float: left;font-size: 13px;color: #fff;margin-left: 15px;margin-top: 25px;}.con_ms .w .title .left_title a i.right_arrow {display: inline-block;background: url() no-repeat -153px -39px;width: 16px;height: 17px;vertical-align: top;}/*标题右侧时间样式*/.con_ms .w .title .right_time .left_text {width: 55px;height: 28px;margin-top: 27px;margin-right: 7px;font: 12px/12px "微软雅⿊";color: #fff;}.con_ms .w .title .right_time span {float: left;}.con_ms .w .title .right_time span.hours,span.min,span.sec { width: 35px;height: 37px;background-color: #440106;border-radius: 3px;font: 12px/37px "微软雅⿊";color: #f90013;text-align: center;margin-top: 10px;}.con_ms .w .title .right_time span.dot {width: 4px;height: 12px;/*margin-top: 22px;*/margin: 22px 4px 0;}.con_ms .w .title .right_time span.dot i {display: block;width: 4px;height: 4px;border-radius: 50%;background-color: #440106;}.con_ms .w .title .right_time span.dot i:nth-child(1) {margin-bottom: 4px;}.con_ms .w .title .right_time .right_text {width: 70px;height: 28px;/*margin-top: 27px;margin-left: 7px;margin-right: 22px;*/margin: 27px 22px 0 7px;font: 12px/12px "微软雅⿊";color: #fff;}/*下侧商品区域样式*/.con_ms .w .content .shopping {height: 250px;background-color: #fff;float: left;}.con_ms .w .content .shopping ul li {float: left;width: 199px;height: 225px;border-right: 1px #e7e7e7 solid;}.con_ms .w .content .shopping ul li a {display: block;width: 184px;height: 195px;margin-left: 15px;text-align: center;margin-bottom: 11px;position: relative;}.con_ms .w .content .shopping ul li a b.shop_icon {width: 30px;height: 40px;display: block;position: absolute;z-index: 2;color: #fff;text-align: center;line-height: 40px;font-weight: normal;background: url() no-repeat -53px -39px;}.con_ms .w .content .shopping ul li a img {position: relative;top: 13px;}.con_ms .w .content .shopping ul li a p {text-align: left;margin-top: 15px;height: 28px;line-height: 14px;overflow: hidden; /*溢出内容隐藏*/}.con_ms .w .content .shopping ul li p.price span.newPrice {color: red;margin-left: 15px;float: left;}.con_ms .w .content .shopping ul li p.price span.newPrice i {font-size: 9px;font-size: normal;}.con_ms .w .content .shopping ul li p.price span.newPrice span { font-size: 14px;font-weight: bold;}.con_ms .w .content .shopping ul li .oldPrice {font-size: 9px;float: left;margin-left: 10px;margin-top: 2px;}.con_ms .w .content .shopping ul li span.shadow {width: 170px;height: 22px;display: block;background: url() no-repeat;}/*下侧右边⼴告区域样式*/.con_ms .w .content .big_Img {width: 190px;float: left;}.con_ms .w .content .big_Img img {float: left;}5、foot.css---主要写页⾯底部的样式.foot {height: 567px;background-color: #eaeaea;}/*上⾯多快好省部分样式*/.foot .foot_top {height: 102px;border-bottom: 1px #dedede solid;}/*.foot .foot_top .w {height: 102px;border-bottom: 1px #dedede solid;}*/.foot .foot_top .w ul li {float: left;width: 297px;height: 102px;line-height: 102px;/*text-align: center;*/font-weight: bold;}.foot .foot_top .w ul li h5 {float: left;width: 36px;height: 42px;margin-top: 30px;margin-left: 36px;line-height: 42px;text-align: center;font-size: 20px;color: #e01121;text-indent: -999999px; /*1、优化 2、客户体验*/background: url(../img/ico_service.png) no-repeat;}.foot .foot_top .w ul li:nth-child(2) h5 {/*background: url(../img/ico_service.png) no-repeat 0 -43px;*/ background-position: 0 -43px;}.foot .foot_top .w ul li:nth-child(3) h5 {/*background: url(../img/ico_service.png) no-repeat 0 -85px;*/ background-position: 0 -85px;}.foot .foot_top .w ul li:nth-child(4) h5 {/*background: url(../img/ico_service.png) no-repeat 0 -127px;*/ background-position: 0 -127px;}.foot .foot_top .w ul li p {float: left;margin-left: 10px;font-size: 18px;color: #444444;}/*中间服务部分*//*.foot .service {height: 200px;}*/.foot .service .w {/*height: 200px;*/border-bottom: 1px #ddd solid;}/*.foot .service .w .service_list {}*/.foot .service .service_list dl {float: left;width: 198px;}.foot .service .service_list dl dt {margin-top: 26px;margin-bottom: 15px;font: 13px/13px "微软雅⿊";color: #666666;font-weight: bold;}.foot .service .service_list dl dd {margin-bottom: 11px;font: 11px/11px "微软雅⿊";}.foot .service .map {width: 200px;background: url(../img/ico_footer.png) no-repeat;height: 172px; /*不知道172怎么来的*/background-position: 0 22px;}.foot .service .map h5 {margin-top: 25px;font: 13px/13px "微软雅⿊";font-weight: bold;color: #666666;text-align: center;}.foot .service .w .map p {margin: 23px 20px 0 10px;font: 11px "微软雅⿊";line-height: 18px;}.foot .service .map a {float: right;}.foot .service .map a:hover {color: red;}/*尾部版权部分*/.foot .copyright p {margin-bottom: 9px;text-align: center;}.foot .copyright p:nth-child(1) {margin-top: 19px;margin-bottom: 17px;font: 12px/12px "微软雅⿊";font-weight: bold;}.foot .copyright p a {margin: 0 9px;}.foot .copyright p a {font: 13px/13px "微软雅⿊";color: #666;text-align: center;}.foot .copyright p.pic_href {width: 678px; /*不知道678怎么来的？？测的是640*/ margin: 0 auto;}.foot .copyright p.pic_href a {float: left;display: block;width: 103px;height: 32px;background: url(../img/ico_footer.png) no-repeat;background-position: 0 -150px;margin: 0;margin-right: 10px;}.foot .copyright p.pic_href a:nth-child(2) {background-position: -104px -150px;}.foot .copyright p.pic_href a:nth-child(3) {background-position: 0px -183px;}.foot .copyright p.pic_href a:nth-child(4) {background-position: -104px -183px;}.foot .copyright p.pic_href a:nth-child(5) {background-position: 0px -216px;}.foot .copyright p.pic_href a:nth-child(6) {background-position: -104px -216px;}/*固定底部年货样式*/.box_fix {width: 1334px;height: 95px;background: url(../img/footer-fix.png) no-repeat;position: fixed;left: 50%;bottom: 0;margin-left: -667px;}.box_fix>img:nth-child(1) {margin-left: 104px;}.box_fix img {margin-top: 15px;}.box_fix a:nth-child(2) {margin-left: 76px;}这是我写的京东⾸页的代码，主要⽤的是html和css，有很多不⾜之处，希望各位⼤神多多指教。