第一次前端-新闻展示

1.前言

这是第一次从设计到实现都是自己完成的前端，但是实在是丑，也很不认真，态度的确是有点问题，下次再接再厉。

2.实现

一.首页

1. 刚刚着手的时候，不知道怎么写，在参考了很多同类型的网站，才开始写（前端的设计实在是头疼）。但是怎么写都不能达到自己想要的样子。
2. 前面布局是看了别人的网站，留白，实现简约的风格。第一个网页实现以后觉得一般丑，也不是特别丑。利用css3实现了一点的动态效果，加一点动态效果页面也就看的舒服多了。

二.主页

1. 主页主要是利用bootstrap的栅格系统布局，简单的jq，以及一些bootstrap封装好的前端框架。
2. 顶部是导航栏，中间是两个分页的嵌套。推荐栏加了一个轮播图。然后就是新闻内容的简要展示。新闻的简要内容就是一样的框架了。
3. 右侧就是简单的图片，css3的动态效果和ulli标签了。
4. 下面利用css3以及bootstrap加了图片和文字内容。

三.文章展示

1. 取了一个新闻展示为例写了一个文章展示。
2. 中间就是文章的内容，给页边加了点阴影，有点立体感要舒服很多。
3. 下面加的一个评论，原本是要利用一个评论插件，但是修改之后还是出现了一点bug，就是回复评论过多之后会出现进条。不知道是不是插件的设计者故意这么写还是咋的。后来自己实现一个发表简单评论js。评论代码附上。

   $(".btn_submit").click(function(){
   		var now= new Date();
   		var year = now.getFullYear();
   		var month = now.getMonth();
   		var date = now.getDate();
   		var	hour = now.getHours();//得到小时
   	 	var minu = now.getMinutes();//得到分钟
   		var text=$("textarea").val();
   		var item='';
   		item += '<div class="view">';
   		item += 	'<div class="row">';
   		item += 		'<div class="col-md-1 col-sm-2 col-2 me">';
   		item += 			'<img src="img/user1.jpg">';
   		item += 		'</div>';
   		item += 		'<div class="col-md-8 col-sm-9 col-9 my_word" >';
   		item += 			'<h6>游客<small>'+ ' '+ year+'年' + month+'月' + date+'日' + hour+'点' + minu+'分' + '</small></h6>';
   		item += 			'<p>' + text + '</p>';
   		item += 			'<p style="text-align: right;"><i class="fa fa-thumbs-up"></i>(<span>150</span>)</p>';
   		item += 		'</div>';
   		item += 	'</div>';
   		item += 	'<br>';
   		item += '</div>';
   		$(".my_view").after(item);
   	});

4. 还添加了一个点赞效果，但是会点一个会把其他的评论都点了，应该是取对象的问题，但是现在js基础太差，最近在看js，有能力就改上去。点赞代码附上。

   $(".row > .my_word > p > i").click(function(){
   		var Num = $(".row > .my_word > p > span").html();
   		console.info(Num);
   		var num;
   		num = Number(Num);
   		var color = $(".row > .my_word > p > i").css("color");
   		console.info(color);
   		if(color == "rgb(33, 37, 41)")
   			num = num + 1;
   		else 
   			num = num - 1;
   		$(".row > .my_word > p > i").toggleClass("like");
   		$(".row > .my_word > p > span").text(num);
   
   	})

3.总结

1. 自己应该踏踏实实学习，通过这次经历，发现还是很多东西以为会其实都不熟悉。
2. bootstrap很好用，能够节省很多css3的代码，之前只能利用css3@media媒体查询实现，代码十分多。
3. jq的使用比js要好用很多，jq取元素要方便很多。
4. 网页的选颜色很重要，好的颜色如虎添翼，相反没取好颜色就显得更丑了。
5. 太菜了，加油吧。