特殊页面设计有关问题请问
日期：2014-05-17 浏览次数：20666 次
特殊页面设计问题请教
问题一：如下图一，页面主体部分设定宽为1003px，左右两边设计了颜色向两边渐变，这个该如何做呢，中间部分定了，但两边的宽度是确定不了（为了适应不同的屏幕大小），我该如何做出这个渐变效果呢？
问题二：如下图二，如何用DIV+CSS来实现这些效果呢，老板说了，设计是这样出来的，改了就没有原来的效果了，所以设计是不能改了，后边的QQ，老板说，设计是三角形的，就要出来是三角形的图片按钮，这个该如何实现呢？
------解决方案--------------------
第一个问题，两边部分用单独的图片，直接用img标签吧，反正没有变化内容，img标签可以拉伸收缩图片
第二个问题
方法1.把每个图片上下分作几块，保证每一块都能是矩形就行了，几块的背景图片加起来就组合成正确样式，给几块加上同一个事件函数，也就相当于一个图片按钮了
方法2.坐标判断。直接在容器上加事件函数，获取点击时鼠标坐标位置进行判断，执行相应事件代码
------解决方案--------------------
1，因为你最终的效果从主体渐变到白色，只需要做一张“1003+2*渐变长度”px宽，高度为1px的图片，只需要设置body的背景图片为这张图片，设置background:#fff url(bg.jpg) repeat-y center top就好了
2：设置容器position:relative，里面内容绝对position:absolute绝对定位
------解决方案--------------------
问题一：
1、最外层用宽度100%的三列表格；
2、中间单元格设置宽度1003；
3、左边背景图片居右，纵向重复，背景色白色；
4、右边背景图片居左，纵向重复，背景色白色；
问题二：
用多边形热区+js
------解决方案--------------------
问题一
把左渐变部分 切一个 图 举例：存为 a.jpg，右渐变部分 切一个 图 举例：存为 b.jpg。
页面布局：
问题一：如下图一，页面主体部分设定宽为1003px，左右两边设计了颜色向两边渐变，这个该如何做呢，中间部分定了，但两边的宽度是确定不了（为了适应不同的屏幕大小），我该如何做出这个渐变效果呢？
问题二：如下图二，如何用DIV+CSS来实现这些效果呢，老板说了，设计是这样出来的，改了就没有原来的效果了，所以设计是不能改了，后边的QQ，老板说，设计是三角形的，就要出来是三角形的图片按钮，这个该如何实现呢？
------解决方案--------------------
第一个问题，两边部分用单独的图片，直接用img标签吧，反正没有变化内容，img标签可以拉伸收缩图片
第二个问题
方法1.把每个图片上下分作几块，保证每一块都能是矩形就行了，几块的背景图片加起来就组合成正确样式，给几块加上同一个事件函数，也就相当于一个图片按钮了
方法2.坐标判断。直接在容器上加事件函数，获取点击时鼠标坐标位置进行判断，执行相应事件代码
------解决方案--------------------
1，因为你最终的效果从主体渐变到白色，只需要做一张“1003+2*渐变长度”px宽，高度为1px的图片，只需要设置body的背景图片为这张图片，设置background:#fff url(bg.jpg) repeat-y center top就好了
2：设置容器position:relative，里面内容绝对position:absolute绝对定位
------解决方案--------------------
问题一：
1、最外层用宽度100%的三列表格；
2、中间单元格设置宽度1003；
3、左边背景图片居右，纵向重复，背景色白色；
4、右边背景图片居左，纵向重复，背景色白色；
问题二：
用多边形热区+js
------解决方案--------------------
问题一
把左渐变部分 切一个 图 举例：存为 a.jpg，右渐变部分 切一个 图 举例：存为 b.jpg。
页面布局：
- HTML code
<body>
<div class="wbgL">
<div class="wbgR">
<div class="wrapper">页面内容</div>
</div>
</div>
</body>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
