css模板
最近好多人问我博客的css模板....
现在是高三,没多少时间,趁放假赶紧更一下
主体就是把博客园的一个模板改动了一点
上面的图片特效,也是从别人那里得到的代码,大致就是下面那些,下面的三个图片换成自己想要的就行了.
<link rel="stylesheet" href="http://files.cnblogs.com/files/candy99/bootstrap.min.css">
<script src="http://files.cnblogs.com/files/candy99/jquery1.11.1.js"></script>
<script src="http://files.cnblogs.com/files/candy99/bootstrap.min.js"></script>
<script src="http://files.cnblogs.com/files/candy99/bootbox.min.js"></script>
<link rel="stylesheet" href="http://files.cnblogs.com/files/candy99/slider.min.css">
<div style="margin-bottom: 20px;overflow: hidden;box-shadow: 0 2px 16px #ddd;background-color:#fff;height:360px;">
<div id="imgBar" style="margin:0 auto;width:1280px;"><div class="slider-box" style="height: 360px;"><div id="imgBar_0_0" class="slider_cube" style="left: 0px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_0_1" class="slider_cube" style="left: 0px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_0_2" class="slider_cube" style="left: 0px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px -238.667px; background-size: 1280px 360px; top: -17.1315px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: 0px -238.667px; background-size: 1280px 360px; top: 102.202px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_0" class="slider_cube" style="left: 128.1px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_1" class="slider_cube" style="left: 128.1px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_2" class="slider_cube" style="left: 128.1px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px -238.667px; background-size: 1280px 360px; top: -28.6099px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -127.1px -238.667px; background-size: 1280px 360px; top: 90.7234px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_0" class="slider_cube" style="left: 256.2px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_1" class="slider_cube" style="left: 256.2px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_2" class="slider_cube" style="left: 256.2px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px -238.667px; background-size: 1280px 360px; top: -28.2206px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -254.2px -238.667px; background-size: 1280px 360px; top: 91.1127px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_0" class="slider_cube" style="left: 384.3px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_1" class="slider_cube" style="left: 384.3px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_2" class="slider_cube" style="left: 384.3px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px -238.667px; background-size: 1280px 360px; top: -16.2405px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -381.3px -238.667px; background-size: 1280px 360px; top: 103.093px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_0" class="slider_cube" style="left: 512.4px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_1" class="slider_cube" style="left: 512.4px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_2" class="slider_cube" style="left: 512.4px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px -238.667px; background-size: 1280px 360px; top: -14.4504px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -508.4px -238.667px; background-size: 1280px 360px; top: 104.883px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_0" class="slider_cube" style="left: 640.5px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_1" class="slider_cube" style="left: 640.5px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_2" class="slider_cube" style="left: 640.5px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px -238.667px; background-size: 1280px 360px; top: -57.4707px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -635.5px -238.667px; background-size: 1280px 360px; top: 61.8625px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_0" class="slider_cube" style="left: 768.6px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_1" class="slider_cube" style="left: 768.6px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px -119.333px; background-size: 1280px 360px; top: -1.19332px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -762.6px -119.333px; background-size: 1280px 360px; top: 118.14px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_2" class="slider_cube" style="left: 768.6px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px -238.667px; background-size: 1280px 360px; top: -89.6487px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -762.6px -238.667px; background-size: 1280px 360px; top: 29.6844px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_0" class="slider_cube" style="left: 896.7px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_1" class="slider_cube" style="left: 896.7px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px -119.333px; background-size: 1280px 360px; top: -0.584714px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -889.7px -119.333px; background-size: 1280px 360px; top: 118.749px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_2" class="slider_cube" style="left: 896.7px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px -238.667px; background-size: 1280px 360px; top: -110.144px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -889.7px -238.667px; background-size: 1280px 360px; top: 9.18943px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_0" class="slider_cube" style="left: 1024.8px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_1" class="slider_cube" style="left: 1024.8px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px -119.333px; background-size: 1280px 360px; top: -7.43146px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1016.8px -119.333px; background-size: 1280px 360px; top: 111.902px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_2" class="slider_cube" style="left: 1024.8px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px -238.667px; background-size: 1280px 360px; top: -119.004px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1016.8px -238.667px; background-size: 1280px 360px; top: 0.328916px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_0" class="slider_cube" style="left: 1152.9px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_1" class="slider_cube" style="left: 1152.9px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px -119.333px; background-size: 1280px 360px; top: -2.56493px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1143.9px -119.333px; background-size: 1280px 360px; top: 117.138px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_2" class="slider_cube" style="left: 1152.9px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px -238.667px; background-size: 1280px 360px; top: -119.333px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1143.9px -238.667px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div></div></div>
</div>
<script src="http://files.cnblogs.com/files/lianmin/slider1.2.min.js"></script>
<script type="text/javascript">
$("#imgBar").slider({
imgs: [
"https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg",
"https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg",
"https://images0.cnblogs.com/blog/708426/201501/100602118284450.jpg"],
scale: 128 / 36,
border: true,
delay: 2200,
x: 10,
y: 3
});
function makeOpen(url){
return eval('wind' + 'ow.o' + 'pen("'+url+'")');
}
</script>
css模板的更多相关文章
- Asp.net MVC3 CSS 模板
http://www.cnblogs.com/huyq2002/archive/2011/12/16/2289795.html Asp.net MVC3 CSS 模板 如果你现在正在用asp.net ...
- 初始CSS模板
/*开始 初始CSS模板 开始*/ body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4 ...
- css 模板
css RESET @CHARSET "gbk"; /*设置编码*/ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote, /** 结构元素 **/ dl ...
- css模板之 web模板一
效果 <html><head><style type="text/css">div.container{width:100%;margin:0p ...
- 软件工程课开学测试——根据已有的CSS模板资源,搭建整个系统
日期:2019.2.28 博客期:038 星期四 今天的测试得到了9.5分,将将及格的程度吧!本次程序完成的很不成功! <%@ page language="java" co ...
- 常用css模板
段落超出显示省略号(可单行多行) .p-content{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-b ...
- 假日旅游CSS网页模板
假日旅游CSS3网页模板,蓝色,旅游,假日,公司,设计,主页,HTML,DIV+CSS,模板下载. http://www.huiyi8.com/lvyoumuban/css/
- 免费css布局和模板集合
Internet 上有很多基于 (X)HTML/CSS 标记的模板.如果你是一个 Web 开发人员,你不希望把时间一次又一次地浪费在重复代码设计上面,这里提供了一个列表,提供了基于 CSS 的免费模板 ...
- Less:优雅的写CSS代码
css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或 ...
随机推荐
- HDU1016(素数环)
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- Number Sequence(快速幂矩阵)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1005 Number Sequence Time Limit: 2000/1000 MS (Java/O ...
- Oil Deposits(dfs水)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1241 Oil Deposits Time Limit: 2000/1000 MS (Java/Othe ...
- Linux下C++/C的编译调试
这几天因为任务的原因我需要在ubuntu下编写程序.因此恶补了许多linux程序编写的知识.我分以下几个方面总结我所学的知识. gcc,g++,make命令的使用 gdb 调试 VScode的使用 c ...
- vim&vi在编辑的时候突然卡死,不接收输入问题的解决
多方查找无果,看了官方解释如下: "CTRL-S and CTRL-Q are called flow-control characters. They represent an antiq ...
- windows server 2008使用nginx转发API异常解决办法
公司比较传统,一直使用的JSP做项目,没有遇到过跨域问题. 最近因为公司接到一个微信spa项目,因为考虑到项目需要调用老接口,斗胆选择nginx(1.12.1)做接口转发服务, 开发环境使用的win1 ...
- 字符串API
string可以看成是多个字符组成的只读数组,也可以通过下标去访问某个字符 访问i位置的字符 : str[i] 字符个数: str.length 倒数第n个字符 : str[str.length- ...
- SDK是什么?什么是SDK
从 SDK导航 看到的 应该比较专业! SDK的英文全名是:software development kit,翻译成中文的意思就是"软件开发工具包" 通俗一点的理解,是指由第三方服 ...
- 邓_php面试【002】——完整版
1.用PHP打印出前一天的时间格式是2006-5-10 22:21:21(2分) $a = date("Y-m-d H:i:s", strtotime("-1 day&q ...
- Sublime Text 2激活、插件包安装、以及快捷键
http://jingyan.baidu.com/article/ff4116259b057c12e48237b8.html Sublime Text作为一款轻量.简洁.高效.跨平台的编辑器.支持N多 ...