简约风博客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就可以实现翻页效果。

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

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

五、附录（源代码）

简约风博客bootstrap实现相关推荐

二次元博客php,Mokore: Wordpress二次元简约个人博客主题by江程训
本项目已支援996ICU项目: 一个Wordpress二次元个人博客主题,简约而不简单,Made BY 江程训. 最近总感觉作为一个Wordpress老玩家(其实也不算多老,也就接触这个网站程序一年) ...
最详细的个人博客教程搭建教程，最快5分钟快速搭建简约风格博客
文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「后端技术学堂」第一时间阅读(一般比博客早更新一到两篇) 傻瓜式一站式教你用github pages 来搭建博客,详细记录全过程 ...
EmlogPro简约Ultra博客主题源码
Ultra主题设计简洁友好,并且支持响应式,可自适应手机访问.Ultra秉持了专心写作专心阅读的特点,简单大方的主页构造,使得博客能在臃肿杂乱的环境中脱颖而出. 抗揍云下载地址: https://6e ...
简约的博客网页制作大学生个人博客网页设计模板学生个人网页成品 DIV简单个人网站作品下载静态HTML CSS个人网页作业源代码
适合个人博客搭建的WordPress免费开源主题汇总
WordPress最重要的就是找一个适合自己的主题了.好一点的WordPress主题基本上都是要收费的,而且价格还不便宜,这导致了不少的新手朋友们很为难.而有时我们仅仅根据个人的爱好来搭建一个博客,所 ...
最全面的github pages搭建个人博客教程
作为一个程序员怎么能没有自己的个人博客呢,这里详细记录和分享我的博客搭建经验,让你轻轻松松拥有自己的博客网站.傻瓜式一站式教你用 github pages 来搭建博客,详细记录全过程,保证你能学会. ...
HTML5期末大作业：HTML+CSS+JavaScript+BootStrap 简约的旅游图文相册博客HTML模板
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
WordPress简约博客主题模板Chen主题V1.2
介绍: WordPress简约博客主题模板Chen主题V1.2分享,喜欢就下载吧. 这个: 今天给大家分享一款还不错的源码,比较简约风的,如果是适合搭建个人站点,记录一下个人生活或者发布记录一些日志什 ...
莫提博客 - 简约优雅的个人博客系统
莫提博客 - 简约优雅的个人博客系统首先声明,这个项目结合了我目前所掌握的大多数技术,其中包括缓存.消息队列.搜索引擎等,所以不太适合刚刚接触JavaWeb的小伙伴.如果你对这些技术有所了解有想找找 ...

简约风博客bootstrap实现

简约风博客bootstrap实现相关推荐

最新文章

热门文章