分享

☆佳作赏析

 春天没来 2014-02-25

   佳 作 赏 析    

 
 
 
 

上面是DLLC1234老师制作的一篇网页中的一个局部,非常精美。下面我做一番简析,以供朋友们参阅。
这幅移动风景画是由8个移动小屏幕组成的。外围的边框以及背景颜色是第一层表格的显示效果。边框线样式:3D脊状;边框线颜色:深绿色;边框线宽度:3px;背景颜色:绿灰色;表格宽度:950px。
第一层表格中设置了css的相对定位样式:居左值与居上值都为0px。这样设置就把表格定位在了正常的位置中,也为下面的8个移动标签中的绝对定位规定了定位参考点是表格的左上角。
第二层表格,宽度: 950px;高度: 251px。
第二层表格中设置了8个移动标签,每个移动标签各自控制一个表格。8个移动标签中的居上值都是3px,宽度都是100px,高度都是240px;居左值分别是:2px,122px,242px,362px,482px,602px,722px,842px。这样设置,就把8个100×240规格的移动屏幕确定了它们各自的位置上。
因为第二层表格的高度是251px,每个移动屏幕的高度都是240px,这两个高度相差11px,就使每个移动屏幕与第一层表格的上下边框线之间都有了一定的空白区域。
因为8个移动屏幕的宽度都是100px,而这8个移动屏幕的居左值之间相差120px,这就使8个移动屏幕之间也有了一定的空白区域。
这样处理,就使8个移动屏幕与第一层表格的上下边框线之间,8个移动屏幕相互之间都有了空白区域,可以显示出下面的背景颜色,制作出了一种类似表格的间距的效果。
8个表格,设置了相差120px的居左值,准确地把它们放置在了自己的位置中。8个表格中,都设置了宽度为5550px的背景图片:http://userimage2.360doc.com/12/0427/05/2904667_201204270513380590.jpg,背景图片平铺起始点的居左值,都相差120px,这就与8个移动屏幕中的居左值相一致。使网页的整个画面,漂亮的风景图在这8个小屏幕中源源不断地滚动着,真是美丽极了!真使人百看而不厌!
由此可见 DLLC1234老师的匠心所居,可见DLLC1234老师驾驭代码的娴熟程度,不能不使人佩服,不能不使人望尘莫及!
朋友,你也想制作自己喜欢的各种各样的五彩缤纷的网页吗?那就认真地学习一点代码知识吧!相信我撰写的《代码入门教程》会使你有所收获的,相信我撰写的 《代码入门教程》会把你领入代码殿堂的门槛的。在学习的过程中,还得多尝试噢!多多制作网页,多多观察自己制作的网页效果,不满意的地方,要多多修改噢!只要勤学习,勤制作,勤观察,勤修改,一定能够真正掌握代码知识,掌握制作技巧,制作出你自己喜欢的漂亮网页来。
在学习代码知识制作网页的过程中,如果你有什么不懂的问题,不同的见解,欢迎你来信询问,欢迎你来信商榷噢!
代码入门教程
我的原创作品
我的精品文章
边框制作与欣赏
百荷音画集锦
精美边框任您选
向您介绍几个音画网站
精美顶图任您选
教您制作图书馆顶图
“春天没来”编撰
2014年2月24日于北京

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 全屏 打印 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多