平面设计banner尺寸,网页banner的尺寸

很快一周又过去了
这周收获到的,工作中的知识点总结

一, 网站首页banner的高度计算
网站首页在设计banner的高度的时候,需要保证一进入页面的时候,屏幕至少能显示一半出来,也就是说banner完全显示出来,下方的楼层也要显示一部分出来

解决方法:
屏幕比例 16:9或者4:3,
求高度的时候比例 9/16=0.5625
(如果是求宽度比例是16/9)
网站的最小宽度是1200px,
所以 banner的高度是1200*0.5625=675
另外还有上方的header,header高是60
所以675+60=735
也就是banner的高度是735的时候做一些样式处理
然后配合媒体查询
屏幕的max-height : 850px的时候, banner的高度 565
屏幕的max-height : 750px的时候, banner的高度 495

二,页面的渲染
项目基于fis3+laravel,
用的是php的laravel框架和blade模板,
要完成一个页面,
实现方式一:
前端直接在blade模板当中写页面
比如一个导航与后台协商好接口数据之后
模板当中这样写
//判断是否定义了变量并且变量里面有数据@if (isset($navList) && count($navList)) <div class=”items-wrapper col-l”> @foreach ($navList as $item) //循环这个变量 <a rel=”external nofollow” href=”{{%20$navList[‘href’])%20}}”>{{$navList[‘label’] }}</a> //输出变量中的href label @endforeach </div>@endif
这样可以可以生成一个列表,
然后再在样式文件中定义样式,
如果有交互的效果,就在JS里编写
这种处理方式是数据在服务器处理,然后返回给前端一个页面.从而显示出来

实现方式二:
前端先获取后台返回的json数据,然后拼成html结构,显示在页面上,
这里涉及到一种类似bigrender的实现,(淘宝页面查看源代码的话就能找到这些<textarea>)

比如模板中写法如下

<div class=”course-wrapper”>//用一个textarea包着 <textarea style=”display:none” autocomplete=”off” data-id=”course-data”> {!! json_encode([//后端的数据 “floorItemList” => $recommendList, “extraDataList” => $extraDataList//json编码后端统一不要中文字符编码 ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!} </textarea>//获取到数据前给一个loading提示 <div class=”loading”> <i class=”iconfont icon-cat icon”></i> <span class=”text”>数据加载中…</span> </div> </div>

样式还是在css文件中定义

脚本当中
就要先发送一个ajax请求,获取后端的数据,把数据处理完成之后,再通过拼接字符串,生成html结构
这种处理方式,相当于客户端处理数据,

服务器端与客户端处理数据的最主要的不同是
服务器端处理数据的时候,如果页面的数据比较多,会造成加载缓慢,耗性能,
客户端处理的话,最大的缺点的是不利于SEO,因为内容都被<textarea>包起来,隐藏了,

所以采用的话还是得看业务需求.

现在面临的问题
写页面一般都没问题,不管是PC或者移动端的app,但是在涉及到交互方面
比如之前我遇到的问题是,面对一个交互需求,我不知道如何着手,完全没有思路,没有逻辑,
只能看别人写的或者搜索网上的例子,
现在遇到的问题是:面对一个交互需求,我明白它的实现原理,但是写的时候却卡壳了,写不出来
或者写了许多垃圾代码之后,调试了许久之后,才写出来
举个例子
比如类似一个select单选框,不用<select>标签,因为它自带的样式不好看,
所以采用<div>模拟一个出来,样式,结构很好写
比如一个ul 里面3个li
第一个li显示,第二,三个li隐藏,
然后鼠标移上去,第二,三个显示出来,供用户选择,
在用脚本实现点击选择的时候,
我知道它的原理是
比如点第二个li,就把第二个li放在第一位显示出来,原来的第一个放到第二个li的位置,
就是类似于两两交换位置,
同时需要点击的事件外面定义一个变量,用来保存当前的显示的那个li,
在点击事件里,两两换完位置之后,再更新一下那个保存li的变量,
我知道这个原理,但是我最开始写的时候.却无法下手,
等通过各种写,各种混乱的代码之后,才实现这个需求.