6月底刚结束佳X公司的产品公布,紧接着7月份又接到一份制作产品比较的MiniSite任务。任务说起来也不难,一份excel表,一个xd原型设计。接着就是经理Barabara的讲了一堆(好似没记住)。
项目内容
- 制作两个页面,一个是产品列表,总共13个产品。一个是比较结果页面。
- 两个页面均要对要对应Responsive(响应式设计)
- 产品列表页要求首部要一个整屏banner, banner中间有一个一直居中的标题。点里面的Get Started按钮自动翻篇到下面的列表
- 产品列表部分,每一个产品都有一个compare按钮,单击后产品反转,背景发生改变及Compare按钮的名称改为Selected,并在页面的下面做一个固定的显示几个被选中的提示栏
- 下面的提示栏有一个按钮,单击后会转到比较结果页面,并将选中的产品ID传给比较结果页面
- 比较结果页面,要求使用Ajax技术,根据产品ID,获得产品资料
- 比较结果页面,要求可以手动拖拽页面
- 比较结果页面,要求有帮助功能。及顶部固定提示产品名称栏
7月7日
一天将PC版的展示做了出来,当然功能没有做。本来这里打算用BootStrap, 后来觉得用框架用的太多,好久没自己手写了。索性来了一把手写Responsive
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EOS Compare</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Responsive的关键部分,控制屏幕缩小后的显示比例-->
<meta name="WT.cg_abc" content="">
<meta name="WT.cg_refer" content="">
<!-- 由于没有太多需要打开页面就加载的内容js不放在这里影响速度-->
<link href="css/site.css" rel="stylesheet" /> <!--本人的样式表->
</head>
<body>
*******省略*******
</body>
</html>
这里遇到第一个问题,产品列表页打开后,有一个整屏,内容上下左右居中。
为了保证能够整屏, 我把html, body, section_top, top_banner都设成了100%高度。背景图片要一直居中,所以设置了一个居中背景,之前说的难点上下左右居中,设置了元素的高宽,position设置成absolute后,就简单了。top:0; right=0; bottom:0; left:0; margin:auto; 这回去看看吧,不论在什么情况下这个元素都居中。这里没有太多的难点
HTML
<div class="section_top">
<div class="header">
<div class="h_logo"><img src="img/logo.png" alt="" title=""></div>
<div class="sub_logo"><img src="img/sub_logo.png" alt="" title=""></div>
<div class="mb0"></div>
</div>
<div class="top_banner">
<div class="top_in">
<h1 class="size60 pb20">EOS COMPARE</h1>
<a href="#camera" class="blue_bg button size24">Get started</a>
</div>
</div>
</div>
CSS
body{font:14px/1.2 'RyomCN-sanserif-li', 'Microsoft Yahei', Arial, Helvetica, SimHei, san-serif; color: #333; height: 100%;}
html,body{*background-image:url(#); background-attachment:fixed;} /*background-attachment:fixed 设置这个可以防止absolute做伪fixed时抖动的问题,其实这里没有任何关系*/
a{color: #FFF; text-decoration: none;}
/*INDEX PAGE*/
.contriant{min-height: 100%;}
.header{position:relative; z-index: 1;}
.header .h_logo{float: left; margin: 20px 0 0 30px;}
.header .sub_logo{float: right; margin: 25px 30px 0 0;}
.section_top{width: 100%; min-height: 100%; position: relative; display: block; box-sizing: border-box;}
.top_banner{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/top.jpg) no-repeat center; background-size:cover;} /*做一个一直居中的背景,并随着屏幕的尺寸自动调整*/
.top_banner h1{color: #FFF; font-weight: normal;}
.top_in{height: 140px; text-align: center; width: 1024px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
接下来制作四列产品列表,这里的问题出自于如何做一个统一格式的列表框,不用切割。我的想法就是大家左右上下都设10px的margin,背景是白色居中 + 响应式设计基本没问题。
<div class="camera_list" id="camera">
<div class="col-4 center">
<img class="pb10" src="img/80d.png" alt="eos 80d" />
<img class="pb30" src="img/80d_logo.png" alt="eos 80d" />
<a data-id="1" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/77d.png" alt="eos 77d" />
<img class="pb30" src="img/77d_logo.png" alt="eos 77d" />
<a data-id="2" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/800d.png" alt="eos 800d" />
<img class="pb30" src="img/800d_logo.png" alt="eos 800d" />
<a data-id="3" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/760d.png" alt="eos 760d" />
<img class="pb30" src="img/760d_logo.png" alt="eos 760d" />
<a data-id="4" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/750d.png" alt="eos 750d" />
<img class="pb30" src="img/750d_logo.png" alt="eos 750d" />
<a data-id="5" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/700d.png" alt="eos 700d" />
<img class="pb30" src="img/700d_logo.png" alt="eos 700d" />
<a data-id="6" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/200d.png" alt="eos 200d" />
<img class="pb30" src="img/200d_logo.png" alt="eos 200d" />
<a data-id="7" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/100d.png" alt="eos 100d" />
<img class="pb30" src="img/100d_logo.png" alt="eos 100d" />
<a data-id="8" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/1300d.png" alt="eos 1300d" />
<img class="pb30" src="img/1300d_logo.png" alt="eos 1300d" />
<a data-id="9" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/m5.png" alt="eos m5" />
<img class="pb30" src="img/m5_logo.png" alt="eos m5" />
<a data-id="10" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/m6.png" alt="eos m6" />
<img class="pb30" src="img/m6_logo.png" alt="eos m6" />
<a data-id="11" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/m3.png" alt="eos m3" />
<img class="pb30" src="img/m3_logo.png" alt="eos m3" />
<a data-id="12" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="col-4 center">
<img class="pb10" src="img/m10.png" alt="eos m10" />
<img class="pb30" src="img/m10_logo.png" alt="eos m10" />
<a data-id="13" class="button blue_bg" href="javascript:;">选择</a>
</div>
<div class="mb0 pb40"></div>
</div>
.col-4{width: 236px; height: 260px; margin: 10px; border-radius: 7px; border: 1px solid #CCC; float: left; padding: 0; transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.col-4.gray_bg{transform: rotateY(360deg);}
样式表简单说明 border-radius圆角, transform-style: preserve-3d设置3D旋转,速度定为0.8秒内完成 cubic-bezier自定义过渡效果 rotateY(360deg) Y轴360度旋转