一、关于页面设计
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.样式修改完了发现功能不能实现了，改样式的时候应该边改边测试功能，以功能为主；
0 个评论
要回复文章请先登录或注册