简约风博客bootstrap实现
一、 设计内容及要求
此网站只要是有关于程序员的博客为主题的个人网站，主要通过基础的HTML+CSS，以及css3的动画新特性技术和部分javascript、jquery技术，通过bootstrap框架对页面整体进行布局.,JS和css3完成动态效果和部分用户交互功能。
使用HTML标记，CSS样式，完成的网页没有错误 √
首页设置导航栏，命名为index.html√
利用CSS技术对网站进行布局，网站风格统一√
建议使用Css3中的动画设计、flex布局√
可以尝试Bootstrap框架，或者其他主流框架（非必需）√
配置服务器，发布网站，并对主流浏览器测试√
二、设计思路
共分为六个页面：主页、文章、杂谈、留言板、留念册、个人介绍。主要样式为简约、时尚的样式，通过不同的JS效果，和大的banner风景图的效果让页面显得更加优美，每个页面的左边部分有点击左上角可拉伸的导航条以及必要的hover划过效果。除了每个页面的导航外，最后一个链接为外链到其他网站的导航，导航的定位为fix,当页面向下滚动时，导航条仍然不动。
2.1主页页面：
主页主要由四张相对于body绝对定位的div组成，div为有翻页效果的，当鼠标划过后，div会切换到另一面。这种效果通过transform和transition属性实现，每个div内层还有一个容器，在容器内部有一个class名为front和一个back的页面，两个div各代表一面，这时将back的transform属性设为rotate（180deg），即将这个DIV反过来。则这时只显示了front的div，当鼠标划过div时，再将外层的div的transform属性改为rotate(180deg)，这时则front反过来，back到了正面。再将此div的transition属性设为2秒。则就实现了旋转翻页效果。
了多个div，默认时将第一个div的display属性设为block，其他设为果。
2.3个人简介页面：
个人简介页面采用wordpress的简约风格，将个人信息分为三大部分，
2.2文章页面：
文章页面以枫树为背景，并且有枫叶掉落的动画，主要内容为博主发表过的博客文章，该页面的主要效果有枫叶掉落效果和文章切换效果。枫叶掉落效果通过绝对定位将叶子的图片位置先定位到枫树旁边，当页面内容加载完毕后，通过jquery的anamation将位置定到最终位置，并将持续时间设为3s，这时就实现了枫叶掉落效果。文章切换效果，在文章的article标签中放了多个div，默认时将第一个div的display属性设为block，其他设为none ，当点击next按钮，通过JS获取到aricle中的DOM元素，将下一页的display属性改为block,其他网页改为none,这样就实现可切换文章的效果。
2.3个人简介页面：
个人简介页面采用wordpress的简约风格，将个人信息分为三大部分，基本信息和联系方式，采用蓝、白、淡蓝的布局，此页面主要应用的效果有点击展开，再次点击收回特效和文字渐入特效，点击收回特效通过伪类选择器，当点击前div的高度为缩小时的高度，当触发伪类选择器后，将div的高度设为放大后的，再加上transition的时间，就实现了点击展开收回的效果。文字渐入效果则通过绝对定位将与背景色相同的DIV遮挡住文字，随着时间div向左移动，这样就使文字慢慢地显示出来。
2.4杂谈页面：
杂谈页面主要根据QQ空间说说的样式设计，首先背景是一个通过
animation实现的可随鼠标移动有特效的高清风景图片，再在此背景上通过绝对定位将博主头像、昵称、和发表内容显示出来，在发表内容下为点赞和评论的图标，再下方为评论内容和复选框。通过javascript的creatElement（创建元素）和append(添加元素)，创建元素后再将此元素的类名设为之前设好comment，通过选择器获得复选框内容和当前时间后再将DIV内容设为复选框中的内容，再将用户在复选框评论的内容移动到上方的评论内容中，这样就实现了用户评论功能，点击点赞图标后可以用alert弹出一条点赞成功的提示。
2.5留念册页面：
留念册页面主要由一个标语banner和一个大的图片轮播组成，这里面的图片轮播不是纯粹的图片轮播，而是将图片作为div的背景，所以再图片上面还能添加文字和按钮。图片轮播的效果看起来很高大上，实际上也可以通过简单的对display属性的改变来实现，一张图片的位置放多张图片，点击切换按钮后使不同的图片显示出来。
2.6留言板页面：
留言板页面由灰色背景作为墙的样式，将留言设计为便利贴的样式。
在通过transfrom的straw效果，将便利贴的div旋转，设计出便利贴贴到墙上的效果，由于将所有便利贴都设置为一种样式会使样式十分单一，所以通过nth-child，分别对2n,n+1,2n+1,3n+1分别设置不同的背景颜色（淡黄、淡紫、淡蓝、淡粉）和旋转角度（10deg,20deg,-10deg,-20deg）。留言框开始时是隐藏的，当点击右上角的加号后，居中显示出来，用户填写好姓名和留言内容后再次通过创建元素和添加元素的JS将留言内容设为便利贴样式并且添加到留言板上。
一、 设计结果及分析
3.1首页截图
翻页效果
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container {
width: 650px;
height: 490px;
}.front, .back
{
width: 100%;
height: 490px;
opa
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
background: lightblue no-repeat;
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: rgb(38,50,56) no-repeat;
}
3.2文章页面截图
|
var int = setInterval(litSlash, 1000); |
|
var fix = 1; |
|
|
|
function litSlash() { |
|
if(fix) { |
|
$(".tag").animate( //使用的animate(方法,选择#sys-alert .lit-slashNum的DOM |
|
|
|
{ |
|
opacity: "0" |
|
}, 1000); //改变不透明度 |
|
$(".tag").animate( |
|
|
|
{ |
|
opacity: "1" |
|
}, 1000); |
|
} |
|
} |
|
|
|
function over() { |
|
|
|
clearInterval(int); |
|
|
|
} |
|
|
|
function yincang() { |
|
if(fix) { |
|
$(".nav").animate( |
|
|
|
{ |
|
width: "150px", |
|
|
|
}); |
|
|
|
|
|
fix = 0; |
|
} else { |
|
$(".nav").animate( |
|
|
|
{ |
|
width: "60px", |
|
|
|
}); |
|
|
|
|
|
fix = 1; |
|
} |
|
} |
|
|
|
|
|
function cancel() { |
|
$("#article").animate( |
|
|
|
{ |
|
opacity: "0" |
|
}, 500); |
|
} |
|
$(function() { |
|
$("#article").animate( |
|
|
|
{ |
|
opacity: "1" |
|
}, 500); |
|
$("#leaf").animate( |
|
|
|
{ |
|
top:"24%", |
|
left:"5%", |
|
width:"35px" |
|
}, 5000); |
|
$("#leaf2").animate( |
|
|
|
{ |
|
top:"24%", |
|
left:"10%", |
|
width:"35px" |
|
}, 5000); |
|
|
|
$("#leaf3").animate( |
|
|
|
{ |
|
top:"24%", |
|
left:"15%", |
|
width:"35px" |
|
}, 5000); |
|
}); |
|
function change() |
|
{ |
|
if(document.getElementById("one").style.display!="none") |
|
{ |
|
document.getElementById("one").style.display="none"; |
|
document.getElementById("two").style.display="block"; |
|
} |
|
else if(document.getElementById("one").style.display=="none") |
|
{ |
|
document.getElementById("one").style.display="block"; |
|
document.getElementById("two").style.display="none"; |
|
} |
|
} |
|
|
3.3个人简介页面截图
|
||
|
var fix = 1; |
|
|
|
|
|
function litSlash() { |
|
|
if(fix) { |
|
|
$(".tag").animate( //使用的animate(方法,选择#sys-alert .lit-slashNum的DOM |
|
|
|
|
|
{ |
|
|
opacity: "0" |
|
|
}, 1000); //改变不透明度 |
|
|
$(".tag").animate( |
|
|
|
|
|
{ |
|
|
opacity: "1" |
|
|
}, 1000); |
|
|
} |
|
|
} |
|
|
|
|
|
function over() { |
|
|
|
|
|
clearInterval(int); |
|
|
|
|
|
} |
|
|
|
|
|
function yincang() { |
|
|
if(fix) { |
|
|
$(".nav").animate( |
|
|
|
|
|
{ |
|
|
width: "150px", |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
fix = 0; |
|
|
} else { |
|
|
$(".nav").animate( |
|
|
|
|
|
{ |
|
|
width: "60px", |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
fix = 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function cancel() { |
|
|
$("#article").animate( |
|
|
|
|
|
{ |
|
|
opacity: "0" |
|
|
}, 500); |
|
|
} |
|
|
$(function() { |
|
|
$("#article").animate( |
|
|
|
|
|
{ |
|
|
opacity: "1" |
|
|
}, 500); |
|
|
$("#hinder").animate( |
|
|
|
|
|
{ |
|
|
left:"62%", |
|
|
|
|
|
}, 4000); |
|
|
var a=setTimeout(hinder2(),4000); |
|
|
|
|
|
$("#hinder3").animate( |
|
|
|
|
|
{ |
|
|
left:"62%", |
|
|
|
|
|
}, 4000); |
|
|
|
|
|
}); |
|
|
function hinder2() |
|
|
{ |
|
|
$("#hinder2").animate( |
|
|
|
|
|
{ |
|
|
left:"62%", |
|
|
|
|
|
}, 4000); |
|
|
} |
|
|
function xiao(object) |
|
|
{ |
|
|
if(object.style.height=="350px") |
|
|
object.style.height="12%"; |
|
|
else if(object.style.height=="12%") |
|
|
object.style.height="350px"; |
|
|
} |
|
3.4杂谈页面截图
|
||
|
导航 |
|
|
||
|
 |
|
|
|
|
|
||
|
|
|
|
||
|
❤首页 |
|
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
❤ 更多 |
|
|
|
|
|
||
|
||
|
||
|
|
|
|
||
|
||
|
|
|
|
||
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
3.5留念册页面截图
3.6留言板页面截图
|
var int = setInterval(litSlash, 1000); |
|
var fix = 1; |
|
|
|
function litSlash() { |
|
if(fix) { |
|
$(".tag").animate( //使用的animate(方法,选择#sys-alert .lit-slashNum的DOM |
|
|
|
{ |
|
opacity: "0" |
|
}, 1000); //改变不透明度 |
|
$(".tag").animate( |
|
|
|
{ |
|
opacity: "1" |
|
}, 1000); |
|
} |
|
} |
|
|
|
function over() { |
|
|
|
clearInterval(int); |
|
|
|
} |
|
|
|
function yincang() { |
|
if(fix) { |
|
$(".nav").animate( |
|
|
|
{ |
|
width: "150px", |
|
|
|
}); |
|
|
|
|
|
fix = 0; |
|
} else { |
|
$(".nav").animate( |
|
|
|
{ |
|
width: "60px", |
|
|
|
}); |
|
|
|
|
|
fix = 1; |
|
} |
|
} |
|
|
|
|
|
function cancel() { |
|
$("#article").animate( |
|
|
|
{ |
|
opacity: "0" |
|
}, 500); |
|
} |
|
$(function() { |
|
$("#article").animate( |
|
|
|
{ |
|
opacity: "1" |
|
}, 500); |
|
}); |
|
function send() |
|
{ |
|
|
|
$("#subform").animate( |
|
|
|
{ |
|
opacity: "1" |
|
}, 500); |
|
} |
|
function subform() |
|
{ |
|
var name=$('#name').val(); |
|
var message=$('#message').val(); |
|
var ele=document.createElement('div'); |
|
ele.className='conven'; |
|
ele.innerHTML=' '+name+''+message+''; |
|
document.getElementById('wall').appendChild(ele); |
|
|
|
} |
|
|
四、总结
遇到的第一个难点在个人简介的点击展开效果，在div展开和收起效果里随着div高度的改变，文字可能会超出div的高度，会溢出到下一个div的区域，开始针对这个问题我是通过改变不同的高度想要遮挡住多出的文字，后来发现不同的浏览器缩放比例不同依然会有溢出现象，最后采用了元素的overflow属性的hidden，当内容超出div框架后，将溢出的内容隐藏。
第二个难点在于首页图片旋转效果的实现，一开始没有想到翻页效果怎么实现，后来发现transform的旋转效果可以把图片旋转180deg，相当于反过来的效果，在两张图片外面的div设置hover旋转180deg就可以实现翻页效果。
得意之处是简介大方的布局，目前市面上大多数的博客仍然停留在内容很多、样式繁琐，看起来眼花缭乱不清新的阶段，而我的博客主要设计理念就是清新、简洁、大方，让人耳目一新。并且加入了部分用户交互功能，用户可以评论和留言。
后续可以给这个网站加入后台，将博文、杂谈内容发表，评论和留言板内容都可以在后台通过后台语言和数据库对接来实现，最终形成一个完整的博客网站，在放到自己的服务器上。
五、附录（源代码）