这周的主要工作是写了网站的社区部分的界面,划分为小部分来说可以分为社区、评论、个人帖子和一个选择图片的界面
首先来说一下社区
整个界面如上图所示,划分了分多个部分,每个部分是一个帖子,帖子的内容包括标题、内容以及上传的图片。下面是一个悬浮的窗口,以便用户可以随时发布自己的帖子。
这个界面在编写的过程中比较有难度是图片的大小问题,要保证图片不要过长或过宽,解决方法是将每一个图片放在一个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;
社区中的每一个帖子都应该能够点击进去,然后能够看里面的评论,并且可以进行评论
为了保持风格的一致,二者基本相同,但区别在于,在评论界面中把楼主的帖子的背景颜色加深,评论的背景为浅色,下面的输入栏也不需要输入标题