一、关于页面设计
1.做完之后发给手机仔细看发现字号太小了,从做好第一个页面开始就要调整好;
2.设计关于表单等的页面时,表单输入的提示文字,例如格式限制提示灯,应该考虑在内。
3.后台已经加上数据之后再摘出来,耗费了一定的时间去还原。以后应该在后台添加数据交互之前就单独保存一份。
二、关于前端样式
1.凡是涉及到图片展示的,就要考虑后台传的图片不是比例正合适的情况,限定特定形状展示时,写在形状内上下左右居中效果;
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图片上下左右居中</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<script>
var iWidth = document.documentElement.clientWidth;
document.getElementsByTagName('html')[0].style.fontSize = iWidth / 20 + 'px';
</script>
<style>
.middle {
width: 16vw;
float: left;
margin-left: 4%;
}
.middle span {
vertical-align: middle;
display: table-cell;
width: 16vw;
height: 16vw;
overflow: hidden;
text-align: center;
/*放圆的logo时加下面三行*/
/*border-radius: -moz-calc(50%);
border-radius: -webkit-calc(50%);
border-radius: 50%;*/
border: 1px solid #e5e5e5;
}
.middle img {
max-width: 16vw;
max-height: 16vw;
vertical-align: middle;
}
</style>
</head>
<body>
<!--在图片外套span是为了方便div浮动,display: table-cell;时不能浮动-->
<div class="middle">
<span>
<img src="10.png" />
</span>
</div>
<div class="middle">
<span>
<img src="20.png" />
</span>
</div>
</body>
</html>
2.凡是涉及带文字列表的,包括价格等小部分文字,都要考虑是否要限定最多显示行数和溢出则变为省略号;
{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; color:#3d4245;}
3.凡是涉及可能要展示英文的,要考虑英文的不自动换行问题;
{word-wrap:break-word; overflow:hidden;/*如果单词超过宽度了,整个单词整体换到下一行*/
word-break:break-all; /*如果单词超过宽度了,整个单词打散,超过的部分换行 */
4.输入地址等较长的内容时不能用只给一行的input标签,容易显示不全,用textarea就好;
5.PC页面不同宽度的自适应,解决了之后导致手机端无法适应,可以直接给固定范围宽度单独写样式即可,如:
@media (min-width:320px) and (max-width:900px) {.类名 { 单独声明的样式}};
6.链接调用
<a onclick="window.location.href='链接地址'"></a>
三、关于后台合作
1.写静态页面的时候链接要全部链上,走通,方便后台浏览做功能。
2.php文件编码格式导致样式出现错误,注意选择UTF-8无BOM编码格式。
四、关于js
1.引用的插件在放到项目代码前就先单独修改好,多测试几次再引入,包括兼容性,比如5s等;以便于引入前就解决;
2.在ecshop里引用js比较特殊,容易丢失效果;引用js时候,要紧挨着效果引用,不能在头部直接引用,并且注意可能需要再次引用jquery。
3.js路径错了导致效果不出来还误以为是js错误,遇到问题可先检查路径有没有错。
4.样式修改完了发现功能不能实现了,改样式的时候应该边改边测试功能,以功能为主;