(个人)基于深度学习的中国传统特色图像的风格迁移创新实训第九周(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;

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


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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值