个人博客

公告

basees.css
@charset "gbk";
/* 共用css */
* {
    margin: 0;
    padding: 0
}
body {
    font: 14px "微软雅黑", Arial, Helvetica, sans-serif;
    background: url(../images/acc.jpg) no-repeat center top #000;
    color: #fff
}
img {
    border: 0;
    display: block
}
ul, li {
    list-style: none;
}
/*默认链接颜色 */
a:link, a:visited, a:active {
    text-decoration: none;
    color: #fff
}
a:hover {
    text-decoration: none;
    color: #fff;
}
.clear {
    clear: both;
}
.blank {
    height: 8px;
    overflow: hidden;
    width: 100%;
    margin: auto;
    clear: both
}
.f_l {
    float: left
}
.f_r {
    float: right
}
/* header */
header, article, footer {
    width: 1100px;
    margin: auto;
    overflow: hidden
}
.logo {
    margin: 40px 0
}
nav {
    margin-bottom: 40px
}
nav a {
    position: relative;
    display: inline-block;
    font-size: 18px;
    margin-right: 30px
}
.topnav a span:first-child {
    z-index: 2;
    display: block;
}
.topnav a span:last-child {
    z-index: 1;
    display: block;
    color: #fff;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
    text-align: center
}
.topnav a:hover span:last-child, .topnav a:focus span:last-child {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%);
}
.en {
    color: #fff;
    font-size: 12px;
    z-index: 1;
    display: block;
}/* ie */
article {
    background: url(../images/articlebg.png) repeat;
}
.container {
    background: url(../images/articlebg.png) repeat;
    overflow: hidden;
    margin: 20px;
    box-shadow: #075498 0px 1px 10px;
}
footer {
    text-align: center;
    padding: 20px 0
}
.page {
    margin:20px 0;
    text-align:center;
    width:100%;
    overflow: hidden;
}
.page a b {
    color: #aee1ff;
}
.page>b, .page a {
    margin: 0 2px;
    height: 26px;
    line-height: 26px;
    border-radius: 50%;
    width: 26px;
    text-align: center;
    display: inline-block
}
.page a {
    margin: 0 2px;
    height: 26px;
    line-height: 26px;
    border-radius: 50%;
    width: 26px;
    text-align: center;
    display: inline-block
}/* 针对IE6 */
.page>b, .page a:hover {
    background: #2a455d;
    color: #FFF;
}
.page a {
    color: #aee1ff;
    border: #89c9ef 1px solid
}
.ctitle {
    position:relative
}
.ctitle b {
    font-size: 22px;
    margin-bottom: 20px;
    background: #2a7497;
    padding: 10px 0;
    width: 200px;
    text-align: center;
    border-radius: 0 30px 30px 0;
    box-shadow: #21566f 1px 1px 1px;
    border-left: #dae1e4 6px solid;
    display:block;
    margin:30px 0 0 30px
}
.ctitle span {
    float:right;
    font-size:14px;
    position:absolute;
    right:20px;
    top:20px;
    text-shadow: rgba(7, 84, 152, 0.71) 1px 1px 1px;
}
/*** guide ***/
.guide {
    width:60px;
    margin-left:570px;
    position:fixed;
    left:50%;
    bottom:134px;
    _position:absolute;
_top:expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight - 134+'px');
    display:block;
}
.guide a {
    display:block;
    width:60px;
    height:50px;
    background:url(../images/sprite_v2.png) no-repeat;
    margin-top:10px;
    text-decoration:none;
    font:16px/50px "楷体";
    text-align:center;
    color:#FFF;
    border-radius:2px;
}
.guide a span {
    display:none;
    text-align:center;
}
.guide a:hover {
    text-decoration:none;
    background-color:#39f;
    color:#fff;
}
.guide a:hover span {
    display:block;
    width:60px;
    background:#39f;
}
.guide .top {
    background-position:-145px -185px;
}
.guide .report {
    background-position:-146px -236px;
}

index.css

@charset "gbk";
/* blog */
.blog {
margin: 30px 20px;
overflow: hidden
}
.blog figure {
background: #ececec;
border: #FFF 10px solid;
width: 270px;
height: 430px;
float: left;
margin: 0 25px 0;
overflow: hidden
}
.blog figure img {
display: block;
margin: auto;
height: 256px;
overflow: hidden;
}
.blog figure p {
font-size: 14px;
text-shadow: #fff 1px 1px 0px;
line-height: 26px;
text-align: center;
font-weight: bold
}
.blog figure p a {
color: #226039;
}
.blog figure figcaption {
padding: 10px;
line-height: 22px;
color: #666;
}
.blog figure ul {
background: url(../images/yu.png) no-repeat center;
overflow: hidden;
height: 256px;
margin-bottom: 20px
}
.blog figure ul span {
opacity: 0
}
.blog figure ul:hover span {
opacity: 1
}
.blog figure ul a {
position: relative;
display: block
}
.blog figure ul span {
position: absolute;
left: 0px;
top: 0px;
background: rgba(0, 0, 0, 0.5) url(../images/yu.png) no-repeat center 10px;
color: #FFF;
display: block;
width: 100%;
height: 100%;
line-height: 256px;
text-align: center;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
text-decoration: underline
}
/* cbp_tmtimeline */
.cbp_tmtimeline {
margin: 30px 0 0 0;
padding: 0;
list-style: none;
position: relative;
}
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 5px;
background: #afdcf8;
left: 158px;
margin-left: -10px;
}
.cbp_tmtimeline > li {
position: relative;
}
.cbp_tmtimeline > li .cbp_tmtime {
display: block;
width: 100px;
padding-right: 30px;
position: absolute;
margin-left: 20px
}
.cbp_tmtimeline > li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
font-size: 14px;
color: #bdd0db;
}
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 22px;
color: #3594cb;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
color: #6cbfee;
}
.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 30px 15px 180px;
background: #666;
color: #fff;
padding: 2px;
position: relative;
border-radius: 5px;
height: 150px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
background: #666;
}
.cbp_tmtimeline > li .cbp_tmlabel h2 {
margin-top: 0px;
padding: 0 0 10px 0;
font-size: 16px;
text-shadow: rgba(7, 84, 152, 0.71) 1px 1px 1px;
}
.cbp_tmtimeline > li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position:
absolute;
pointer-events: none;
border-right-color: #666;
border-width: 10px;
top: 10px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #666;
}
.cbp_tmtimeline > li .cbp_tmicon {
width: 10px;
height: 10px;
font-family: 'ecoico';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #fff;
background: #46a4da;
border-radius: 50%;
box-shadow: 0 0 0 3px #afdcf8;
text-align: center;
left: 170px;
top: 15px;
margin: 0 0 0 -25px;
}
.blogpic {
width: 200px;
height: 120px;
overflow: hidden;
display: block;
float: left;
margin-right: 20px;
}
.blogpic img {
width: 100%;
height: auto;
margin: auto;
}
a.readmore {
background: #CCC;
color: #fff;
padding: 5px 10px;
float: right;
margin: 20px 0 0 0;
border-radius: 5px;
}
.cbp_tmtimeline li .cbp_tmtime {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
.cbp_tmtimeline li:hover .cbp_tmicon {
box-shadow: 0 0 0 3px #ececec;
}
.cbp_tmtimeline li:hover .cbp_tmtime {
background: #afdcf8;
border-radius: 20px 0 0 20px;
}
.cbp_tmtimeline li:hover .cbp_tmtime span {
color: #fff;
}
/* ---------------------info------------------------- */
.info {
width: 1000px;
margin: 40px auto;
overflow: hidden;
clear: both
}
/* 图片向上翻转的动画效果 */
.info figure {
display: inline-block;
width: 630px;
height: 250px;
position: relative;
-webkit-animation: pageTop 6s ease 0.5s backwards;
-moz-animation: pageTop 6s ease 0.5s backwards;
-ms-animation: pageTop 6s ease 0.5s backwards;
-o-animation: pageTop 6s ease 0.5s backwards;
animation: pageTop 6s ease 0.5s backwards;
float: left;
}
.info figcaption {
padding: 20px;
position: absolute;
top: 20%;
left: 0;
background: rgba(153, 153, 153, .8);
color: white;
opacity: 0;
-webkit-transition: opacity .75s ease-out;
-moz-transition: opacity .75s ease-out;
-o-transition: opacity .75s ease-out;
transition: opacity .75s ease-out;
}
.info figure:hover figcaption {
opacity: 1;
}
/* 用opacity 设置鼠标放上去显示文字的效果 */
.info figcaption strong {
display: block;
line-height: 40px
}
/* card */
.card {
box-shadow: 0px 1px 0px rgba(255, 255, 255, .1), inset 0px 1px 1px rgba(0, 0, 0, .7);
border-radius: 6px;
width: 350px;
float: right;
height: 250px;
overflow: hidden
}
.card h1 {
padding: 10px
}
.card p:first-child {
padding: 40px 0 0 40px
}
/* 结构性伪类选择符选择第一个p标签，并且设置上、左距离是40px*/
.card p {
padding: 0 0 0 40px;
line-height: 28px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
color:black;
-webkit-animation: animations2 5s ease-in-out 5s;
-moz-animation: animations2 5s ease-in-out 5s;
-o-animation: animations2 5s ease-in-out 5s;
-ms-animation: animations2 5s ease-in-out 5s;
animation: animations2 5s ease-in-out 5s;
}
.linkmore {
margin: 15px 0 0 15px
}
.linkmore li a {
height: 50px;
width: 50px;
display: block;
overflow: hidden;
box-shadow: 0px 1px 0px rgba(255, 255, 255, .1), inset 0px 1px 1px rgba(0, 0, 0, .7);
border-radius: 50%;
float: left;
margin: 0 6px;
}
.linkmore li a:hover {
opacity: 0.5;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.talk, .address, .email, .photos, .heart {
background: url(../images/icons.png) no-repeat;
}
.talk {
background-position: 13px 18px
}
.address {
background-position: 12px -22px
}
.email {
background-position: 12px -60px
}
.photos {
background-position: 12px -137px
}
.heart {
background-position: 13px -99px
}
#musicframe {
width:1000px;
height:600px;
}
@-webkit-keyframes pageTop {
0% {
opacity: 0;
-webkit-transform: perspective(400px) rotateX(90deg);
}
100% {
opacity: 1;
-webkit-transform: perspective(400px) rotateX(0deg);
}
}
@-moz-keyframes pageTop {
0% {
opacity: 0;
-moz-transform: perspective(400px) rotateX(90deg);
}
100% {
opacity: 1;
-moz-transform: perspective(400px) rotateX(0deg);
}
}
@-o-keyframes pageTop {
0% {
opacity: 0;
-o-transform: perspective(400px) rotateX(90deg);
}
100% {
opacity: 1;
-o-transform: perspective(400px) rotateX(0deg);
}
}
@keyframes pageTop {
0% {
opacity: 0;
transform: perspective(400px) rotateX(90deg);
}
100% {
opacity: 1;
transform: perspective(400px) rotateX(0deg);
}
}
@keyframes starwars {
0% {
opacity: 0;
transform: perspective(200px) scale(3) translateY(180px) rotateX(80deg);
}
80% {
opacity: 1;
transform: perspective(200px) scale(1) rotateX(60deg)
}
100% {
opacity: 1;
transform: perspective(200px) scale(1) rotateX(0deg)
}
}
@-webkit-keyframes animations2 {
0% {
opacity:0;
}
40% {
opacity:.8;
}
45% {
opacity:.3;
}
50% {
opacity:.8;
}
55% {
opacity:.3;
}
60% {
opacity:.8;
}
100% {
opacity:0;
}
}
@-moz-keyframes animations2 {
0% {
opacity:0;
}
40% {
opacity:.8;
}
45% {
opacity:.3;
}
50% {
opacity:.8;
}
55% {
opacity:.3;
}
60% {
opacity:.8;
}
100% {
opacity:0;
}
}
@-o-keyframes animations2 {
0% {
opacity:0;
}
40% {
opacity:.8;
}
45% {
opacity:.3;
}
50% {
opacity:.8;
}
55% {
opacity:.3;
}
60% {
opacity:.8;
}
100% {
opacity:0;
}
}
@-ms-keyframes animations2 {
0% {
opacity:0;
}
40% {
opacity:.8;
}
45% {
opacity:.3;
}
50% {
opacity:.8;
}
55% {
opacity:.3;
}
60% {
opacity:.8;
}
100% {
opacity:0;
}
}
@keyframes animations2 {
0% {
opacity:0;
}
40% {
opacity:.8;
}
45% {
opacity:.3;
}
50% {
opacity:.8;
}
55% {
opacity:.3;
}
60% {
opacity:.8;
}
100% {
opacity:0;
}
}
.snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 100001;
}

index.html

<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>个人博客</title>
<link href="css/basees.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script src="js/tool/jquery-1.7.2.min.js"></script>
<script src="js/tool/scrollReveal.js"></script>
<script src="js/tool/snow.js"></script>
</head>
<body>
<div class="snow-container"></div>
<header>
<div class="logo" data-scroll-reveal="enter right over 1s"><img src="images/logo.png"></div>
<nav class="topnav" data-scroll-reveal="enter bottom over 1s after 1s"><a href="index.html"><span>首页</span><span class="en">Home</span></a><a href="about.html"><span>关于我</span><span class="en">About</span></a><a href="concern.html"><span>我的关注</span><span class="en">Interest</span></a><a href="log.html"><span>个人日志</span><span class="en">Log</span></a><a href="xczs.html"><span>相册展示</span><span class="en">Show</span></a><a href="contact.html"><span>联系我</span><span class="en">Contact</span></a><a href="gbook.html"><span>留言</span><span class="en">Saying</span></a><a href="game.html"><span>游戏</span><span class="en">Game</span></a></nav>
</header>
<article>
<div class="container">
<div class="info">
<figure> <img src="images/art.jpg">
<figcaption><strong>渡人如渡己，渡已，亦是渡</strong> 当我们被误解时，会花很多时间去辩白。但没有用，没人愿意听，大家习惯按自己的所闻、理解做出判别，每个人其实都很固执。与其努力且痛苦的试图扭转别人的评判，不如默默承受，给大家多一点时间和空间去了解。而我们省下辩解的功夫，去实现自身更久远的人生价值。其实，渡人如渡己，渡已，亦是渡人。</figcaption>
</figure>
<div class="card" data-scroll-reveal="enter top">
<h1>我的名片</h1>
<p>网名：王冰涛</p>
<p>职业：学生</p>
<p>电话：18060570803</p>
<p>Email：1048014388@qq.com</p>
<ul class="linkmore">
<li><a href="gbook.html" class="talk" title="给我留言"></a></li>
<li><a href="#" class="address" title="联系地址"></a></li>
<li><a href="#" class="email" title="给我写信"></a></li>
<li><a href="xczs.html" class="photos" title="生活照片"></a></li>
<li><a href="#" class="heart" title="关注我"></a></li>
</ul>
</div>
</div>
<div class="blog" data-scroll-reveal="enter top">
<figure>
<ul>
<a href="logcontent1.html"><img src="images/t1.jpg"><span>浏览</span></a>
</ul>
<p><a href="logcontent1.html">web前端开发必备网站</a></p>
<figcaption>作为前端开发，那手头上必然要有几个有用的网站，以免碰到问题或者需要了解的时候没有地方查询。下面推荐几个我比较常用的网站。大前端以前端开发为主的综合性博客，有关前端开发的相...</figcaption>
</figure>
<figure>
<ul>
<a href="logcontent2.html"><img src="images/t2.jpg"><span>浏览</span></a>
</ul>
<p><a href="logcontent2.html">静静聆听</a></p>
<figcaption>总爱在安静的时候听这首歌，每当工作的时候，总爱戴上耳机，打开音乐播放器，来单曲循环这首歌。</figcaption>
</figure>
<figure>
<ul>
<a href="logcontent3.html"><img src="images/t3.jpg"><span>浏览</span></a>
</ul>
<p><a href="logcontent3.html">高效jquery（一）</a></p>
<figcaption>jquery是现在最常用的js框架了，非常简便，但是代码的质量也是有高有低，如何高质量的写出代码，下面总结一下，一下内容有来源于网络搜集。选择捷径 // 糟糕 if(collection.length > 0){..} ...</figcaption>
</figure>
</div>
<ul class="cbp_tmtimeline">
<li>
<time class="cbp_tmtime"><span>01-05</span> <span>2018</span></time>
<div class="cbp_tmicon"></div>
<div class="cbp_tmlabel" data-scroll-reveal="enter right over 1s" >
<h2>《剑指Offer:名企面试官精讲典型编程题》</h2>
<p><span class="blogpic"><a href="concerncontent1.html"><img src="images/jianzhioffer.jpg"></a></span>《剑指Offer:名企面试官精讲典型编程题》剖析了50个典型的程序员面试题，从基础知识、代码质量、解题思路、优化效率和综合能力五个方面系统整理了影响面试的5个要点...</p>
<a href="concerncontent1.html" target="_blank" class="readmore">阅读全文>></a> </div>
</li>
<li>
<time class="cbp_tmtime" ><span>01-04</span> <span>2018</span></time>
<div class="cbp_tmicon"></div>
<div class="cbp_tmlabel" data-scroll-reveal="enter right over 1s" >
<h2>《Head First设计模式》(中文版)</h2>
<p><span class="blogpic"><a href="concerncontent2.html"><img src="images/headfirstsheji.jpg"></a></span>《Head First设计模式》(中文版)共有14章，每章都介绍了几个设计模式，完整地涵盖了四人组版本全部23个设计模式Strategy、Observer、Decorator...</p>
<a href="concerncontent2.html" target="_blank" class="readmore">阅读全文>></a> </div>
</li>
<li>
<time class="cbp_tmtime" ><span>01-03</span> <span>2018</span></time>
<div class="cbp_tmicon"></div>
<div class="cbp_tmlabel" data-scroll-reveal="enter right over 1s" >
<h2>《高效程序员的45个习惯》</h2>
<p><span class="blogpic"><a href="#"><img src="images/gaoxiao.jpg"></a></span>本书简明实用、见解深刻，总结了高效程序员在开发过程中的45个个人习惯、思想观念和方法，有助于开发人员在开发进程、编码工作、开发者态度、项目和团队管理...</p>
<a href="#" target="_blank" class="readmore">阅读全文>></a> </div>
</li>
<li>
<time class="cbp_tmtime" ><span>01-02</span> <span>2018</span></time>
<div class="cbp_tmicon"></div>
<div class="cbp_tmlabel" data-scroll-reveal="enter right over 1s" >
<h2>《Head First HTML与CSS（第2版）》</h2>
<p><span class="blogpic"><a href="#"><img src="images/headfirsthtml.jpg"></a></span>是不是已经厌倦了那些深奥的HTML书？你可能在抱怨，只有成为专家之后才能读懂那些书。那么，找一本新修订的《Head First HTML与CSS（第2版）》吧，来真正学习HTML...</p>
<a href="#" target="_blank" class="readmore">阅读全文>></a> </div>
</li>
<li>
<time class="cbp_tmtime" ><span>01-01</span> <span>2018</span></time>
<div class="cbp_tmicon"></div>
<div class="cbp_tmlabel" data-scroll-reveal="enter right over 1s" >
<h2>《JavaScript高级程序设计（第3版）》</h2>
<p><span class="blogpic"><a href="#"><img src="images/javascriptgaoji.jpg"></a></span>本书是JavaScript 超级畅销书的最新版。ECMAScript 5 和HTML5 在标准之争中双双胜出，使大量专有实现和客户端扩展正式进入规范...</p>
<a href="#" target="_blank" class="readmore">阅读全文>></a> </div>
</li>
</ul>
</div>
</article>
<footer>
<div id="time"></div>
<script type="text/javascript">
setInterval(function(){
var time=new Date();
var year=time.getFullYear(); //获取年份
var month=time.getMonth()+1; //获取月份
var day=time.getDate(); //获取日期
var hour=checkTime(time.getHours()); //获取时
var minite=checkTime(time.getMinutes()); //获取分
var second=checkTime(time.getSeconds()); //获取秒
/****当时、分、秒、小于10时，则添加0****/
function checkTime(i){
if(i<10) return "0"+i;
return i;
}
var box=document.getElementById("time");
box.innerHTML=year+"年"+month+"月"+day+"日 "+hour+":"+minite+":"+second;
},1000); //setInterval(fn,i) 定时器，每隔i秒执行fn
</script>
</footer>
<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
(function(){
window.scrollReveal = new scrollReveal({reset: true});
})();
};
</script>
<div class="guide">
<div class="guide-wrap"><a href="fankui.html" class="report" title="反馈"><span>反馈</span></a><a href="javascript:window.scrollTo(0,0)" class="top" title="回顶部"><span>回顶部</span></a> </div>
</div>
</body>
</html>

posted on 2018-11-07 19:18 王冰涛涛涛涛阅读(307) 评论(0) 编辑收藏举报

刷新页面返回顶部

程序员做起

公告

个人博客