(个人)基于深度学习的中国传统特色图像的风格迁移创新实训第九周（1）

这周的主要工作是写了网站的社区部分的界面，划分为小部分来说可以分为社区、评论、个人帖子和一个选择图片的界面

首先来说一下社区

整个界面如上图所示，划分了分多个部分，每个部分是一个帖子，帖子的内容包括标题、内容以及上传的图片。下面是一个悬浮的窗口，以便用户可以随时发布自己的帖子。

这个界面在编写的过程中比较有难度是图片的大小问题，要保证图片不要过长或过宽，解决方法是将每一个图片放在一个div中，通过js对其进行控制

<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
	<script>
		function setImage(test_img){
			//var test_img = document.getElementById("test_img");
		im = new Image();
			im.src = test_img.src;
		//||test.img.height||test.offsetHeight;
			im.onload = function(){
		var w = test_img.width;
		var h =test_img.height;
		//alert("w "+w+ " h"+h);
		var half_h = h/2;
		var half_w = w/2;
		var half_H = 90;
		
		test_img.style.marginTop=(half_H-half_h)+"px";
			}
		//test_img.style.marginLeft=(half_H-half_w)+"px";
		}
		
		window.onload = function(){
			var $elements = $('.tim');// 获取所有class为tim的元素
			var len = $elements.length;
			for (var i=0;i<len;i++)
			setImage($elements[i]);//设置他们的属性
		}
		
	</script>

<div class="img1">
<img src="image/3.jpg" class="tim" style="max-width:100%;max-height:100%;">
	
</div>

再简单说一下悬浮窗口，其关键是background-attachment：fixed;

社区中的每一个帖子都应该能够点击进去，然后能够看里面的评论，并且可以进行评论

为了保持风格的一致，二者基本相同，但区别在于，在评论界面中把楼主的帖子的背景颜色加深，评论的背景为浅色，下面的输入栏也不需要输入标题