Question

HTML实现如图所示效果，如何实现，求源码或设计思路

Answer 1

日历元素在很多网站上都有涉及，而客官给出的这个日历设计页面也是非常经典的一种。

代码比较长，喜欢偷懒的本喵就给个设计思路吧。

1. html

   设据一个总的包裹的块级元素，左右分栏，用内部来实现中间的空行。

   左边是一个<h>元素，右边可以用table来实现。

   当然，div也可以做到。

2. css

   蓝绿色的边框线用border:soild 1px 然后设置上下显示便可。

   由于数值一样，上下设置内补然后让文字居中。

   逐渐缩小的文字效果，用px可能不是很理想，用em设置百分比效果会很好。

   记住在最大的包裹层加上clearfix然后用浮动对其高度和宽度图片中已经给出。

3. js

   如果只是展示性页面，不用加什么js，如果是要实现拖动，加入鼠标监听。

   设置中间层的元素为可拖动 - 上下的元素根据中央元素的浮动来移动，但是千万不要也设置拖动。

   限制拖动范围为单列，拖动结束以后归位再改变文字来达到效果最为方便，不容易造成dom混乱，也利于时间监听。

基本就是这样了…希望有帮到你喵……

追问

js部分能不能给个小例子，我可以加分

Answer 2

效果是把鼠标放到右边的某一行上面，左边就显示相应的日期吗？

追问

左边滚动选择，右边显示