-webkit-background-clip:text;4. 点击 preview 查看效果，没有问题即可保存。
-webkit-text-fill-color: transparent;
background-image: url(图片url);
background-position: 33% 56%;
<style>
#navi1 {
width: 100px;
height: 10px;
color: #fff;
margin-left: -111px;
-webkit-transition-duration: .7s;
padding: 10px;
padding-right: 25px;
background: 背景色/url;
border: 1px dashed #888;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
}
#navi1:hover {
width: 100px;
height: 10px;
padding: 10px;
padding-right: 25px;
color: #fff;
margin-left: 0px;
-webkit-transition-duration: .7s;
background: 背景色/url;
border: 1px dashed #fff;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
}
#nav1 {
font-family: arial;
text-transform: uppercase;
height:12px;
background: url(背景url);
color: #fff;
-webkit-transition-duration: .7s;
border: 1px dashed #888;
}
#nav1:hover{
font-family: arial;
text-transform: uppercase;
height:43px;
background: url(背景url);
color: #888;
-webkit-transition-duration: .7s;
border: 1px dashed #888;
}
</style>
<div style="top:60%; left:1px; position:fixed;">
<div id="navi1">
<div id="nav1"><center><span style="text-shadow:1px 1px 1px #ccc;"><a href="页面链接">页面名称</a></span><br /><br />页面简介</center>
</div></div>
<br /><br />
<div id="navi1">
<div id="nav1"><center><span style="text-shadow:1px 1px 1px #ccc;"><a href="页面链接">页面名称</a></span><br /><br />页面简介</center>
</div></div>
<br /><br />
<div id="navi1">
<div id="nav1"><center><span style="text-shadow:1px 1px 1px #ccc;"><a href="页面链接">页面名称</a></span><br /><br />页面简介</center>
</div></div>
</div>
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
background: url(背景网址);
.jpg)
background: url(背景网址) repeat-x;
.jpg)
background: url(背景网址) repeat-y;
.jpg)
background: url(背景网址) no-repeat left bottom;
<object width="25" height="25"><param name="movie" value="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" /><embed src="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" type="application/x-shockwave-flash" width="25" height="25"></embed></object>3. 保存即可。
<a style="display:scroll; position:fixed;bottom:0px; left:0px;" ><object width="25" height="25"><param name="movie" value="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" /><embed src="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" type="application/x-shockwave-flash" width="25" height="25"></embed></object></a>3. 保存即可。
<object width="25" height="25"><param name="movie" value="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" /><embed src="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" type="application/x-shockwave-flash" width="25" height="25"></embed></object>4. 预览查看播放器有没有出现，即可保存。
<a style="display:scroll; position:fixed;bottom:0px; left:0px;" ><object width="25" height="25"><param name="movie" value="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" /><embed src="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" type="application/x-shockwave-flash" width="25" height="25"></embed></object></a>4. 预览查看播放器有没有出现，即可保存。
.jpg)
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=第一首歌的MP3网址&t0=第一首歌的歌曲名字&f1=第二首的MP3网址&t1=第二首歌的歌曲名字&total=2" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
&f1=第三 / 四 / 五首的MP3网址&t1=第三 / 四 / 五首歌的歌曲名字
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=MP3网址&t0=歌曲名字&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
<script language="javascript" type="text/javascript">/* toggle() checks to see if the images has already been fadedor not and sends the appropriate variables to opacity(); */function toggle(el,milli) {// Get the opacity style parameter from the imagevar currOpacity = document.getElementById(el).style.opacity;if(currOpacity != 0) { // if not fadedfade(el, milli, 100, 0);} else { // else the images is already fadedfade(el, milli, 0, 100);}}/* changeOpacity() uses three different opacity settings toachieve a cross-browser opacity changing function. Thisfunction can also be used to directly change the opacityof an element. */function changeOpacity(el,opacity) {var image = document.getElementById(el);// For Mozillaimage.style.MozOpacity = (opacity / 100);// For IEimage.style.filter = "alpha(opacity=" + opacity + ")";// For othersimage.style.opacity = (opacity / 100);}/* fade() will fade the image in or out based on the startingand ending opacity settings. The speed of the fade isdetermined by the variable milli (total time of the fadein milliseconds)*/function fade(el,milli,start,end) {var fadeTime = Math.round(milli/100);var i = 0; // Fade Timer// Fade inif(start < end) {for(j = start; j <= end; j++) {// define the expression to be called in setTimeout()var expr = "changeOpacity('" + el + "'," + j + ")";var timeout = i * fadeTime;// setTimeout will call 'expr' after 'timeout' millisecondssetTimeout(expr,timeout);i++;}}// Fade outelse if(start > end) {for(j = start; j >= end; j--) {var expr = "changeOpacity('" + el + "'," + j + ")";var timeout = i * fadeTime;setTimeout(expr,timeout);i++;}}}</script>
<div class="enter" onClick="javascript:toggle('wise', 3000); this.style.display='none';document.getElementById('june').style.display=''"><img src="图片网址"style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></div><div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;"><div id="june" style="display : none;">
.enter {text-align: center;margin-top: 200px;}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>4. Ctrl + F 寻找代码 </style>
<script>
$(document).ready(function() {
//
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a style="outline: none; background-color: #fff;" href="#" class="close"></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() - 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .50;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 15px solid #FFE5A8;
float: left;
font-size: 13px;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #fff;
-moz-box-shadow: 0px 0px 20px #fff;
box-shadow: 0px 0px 20px #fff;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -25px -25px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
7. 之后，将以下代码添加到 <body> / <body oncontextmenu='return false;'> 下面：<a class='poplight' href='#?w=500' rel='1'>页面名称 1</a>
<div class='popup_block' id='1'>内容在这里。</div>
<a class='poplight' href='#?w=500' rel='1'><img src="图片 url" /></a>
<BlogItemCommentsEnabled><a class="comments" href="https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true" onclick="window.open('https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true', 'bloggerPopup', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=400,height=450');return false;"><$BlogItemCommentCount$> comment(s)</a></BlogItemCommentsEnabled>
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
