简约风博客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";
	}
	}
	</script>

 

 

 

 

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杂谈页面截图

	导航 <div class="blog-masthead" style="margin:0;padding:0;float:left;width:100%;"> <div class="container nav nav-tabs">
	<div class="nav-top">
	<div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="img/mini.png" οnclick="yincang()"></div>
	</div>
	<nav class="blog-nav" style='padding-left:0;'>
	<a class="blog-nav-item " href="index.html">
	❤首页</a>
	<a class="blog-nav-item" href="site.html">❤ 文章</a>
	<a class="blog-nav-item" href="selfintro.html">❤ 简介</a>
	<a class="blog-nav-item" href="talk.html"><p style="color: white;float: left;margin-right: 5px;">❤ </p>❤杂谈</a>
	<a class="blog-nav-item" href="web.html">❤ 留念册</a>
	<a class="blog-nav-item" href="Message.html">❤ 留言板</a>
	<li role="presentation" class="dropdown blog-nav-item">
	<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 0;margin-left: 10px;">
	❤ 更多 <span class="caret"></span>
	</a>
	<ul class="dropdown-menu" style="width: 220px;">
	<li style="width: 220px;">
	<a>联系我们</a>
	</li>
	<li>
	<a href="https://blog.csdn.net/qq_38851897">CSDN博客</a>
	</li>
	<li>
	<a href="">个人博客</a>
	</li>
	</ul>
	</li>
	</nav>
	</div>
	</div>

 

 

 

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='<h4>'+name+'</h4><h5>'+message+'</h5>';
	document.getElementById('wall').appendChild(ele);
	}
	</script>

 

四、总结

遇到的第一个难点在个人简介的点击展开效果，在div展开和收起效果里随着div高度的改变，文字可能会超出div的高度，会溢出到下一个div的区域，开始针对这个问题我是通过改变不同的高度想要遮挡住多出的文字，后来发现不同的浏览器缩放比例不同依然会有溢出现象，最后采用了元素的overflow属性的hidden，当内容超出div框架后，将溢出的内容隐藏。

第二个难点在于首页图片旋转效果的实现，一开始没有想到翻页效果怎么实现，后来发现transform的旋转效果可以把图片旋转180deg，相当于反过来的效果，在两张图片外面的div设置hover旋转180deg就可以实现翻页效果。

 得意之处是简介大方的布局，目前市面上大多数的博客仍然停留在内容很多、样式繁琐，看起来眼花缭乱不清新的阶段，而我的博客主要设计理念就是清新、简洁、大方，让人耳目一新。并且加入了部分用户交互功能，用户可以评论和留言。

后续可以给这个网站加入后台，将博文、杂谈内容发表，评论和留言板内容都可以在后台通过后台语言和数据库对接来实现，最终形成一个完整的博客网站，在放到自己的服务器上。

 

五、附录（源代码）