我如何看待DIV+CSS架构(一)
+++ 每搞IT的人都知道B/S系统的DIV+CSS结构,知道它的好。但如果你问,DIV+CSS结构是什么?好在哪里?实际项目应该如何体现或实现?每个人都能和你白伙几句,有些人甚至会滔滔不绝,而往往这些滔滔不绝的人也只是听另一些滔滔不绝的人说的,仅仅是“接收”并“接受”了信息,That is all,就像一张磁盘,也许连磁盘都不如……
+++ 他们究竟对DIV+CSS结构了解多少?我比较讨厌那些狗屁不懂,却又在那夸夸其谈、口若悬河、没事糊弄人、装逼的人……可是我们身边恰恰就有很多这样的人。所以,我希望还没有多少编程经验、热心于编写代码,并希望在这个领域有所作为的你,谦恭地向身边的“高手”求教,对事物抱有一定的审视态度,并认真对待那些只会装逼的“磁盘”人。
+++ 本文及其之后的几篇文章,在不断改进的过程中,演示DIV+CSS结构。这些东西完全是自己的体会,如有不妥之处请指证。下面从一个最最简单的例子开始。
+++ 程序描述
功能很简单,根据用户输入的条件,进行检索并显示检索结果。程序的组成如下:
1) 一个自定义类Oracle.cs。Oracle.cs类位于项目的App_Code里;
2) 一个页面Default.aspx;
3) 在Web.Config文件里加入数据库链接字符串,如下:
<appSettings>
<add key="ConnectString" value="Data Source=orc11;User ID=scott;Password=tiger;Unicode=True;Persist Security Info=false;"/>
</appSettings>
+++ 页面设计
<body>
<form id="form1" runat="server">
<asp:Label ID="lbl_empno" runat="server" Text="员工编号
<asp:TextBox ID="txtc_empno" runat="server"></asp:TextBox></td>
<asp:Button ID="btn_query" runat="server" Text="检索" OnClick="btn_query_Click" />
<asp:GridView ID="gv_result" runat="server"></asp:GridView>
</form>
</body>
++ 说明
1) 页面有四个控件:Label ,TextBox,Button和GirdView。给这它们起好名字,位置无所谓。
+++ 后台代码
添加Page_Load和btn_query_Click事件。根据自定
相关文档:
一、 善用css缩写规则
/*注意上、右、下、左的书写顺序*/
1. 关于边距(4边):
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px (省略的左等于右)
1px 2px (省略的上等于下)
1px & ......
The Lovely CSS Framework is a simple and straight forward way to easily
deploy an XHTML/CSS site.
Based on a simple 960px wide grid system, featuring multiple column layouts,
and various pluggable add-ons.
这个由 Constantinos Demetriadis 创建的项目是一个 CSS 框架,基于 960.gs,还拥有一个插件 ......
这里只把一些我自己还需要改进的地方发上来。
————————————————————————
1.网页不是静态的、绝对的媒体。这意味着内能伸缩变形,用户应该被允许调整自己喜欢的方式, ......
很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章,很不错,综合一下,记录下来。
display:inl ......
<style type="text/css">
.worksbox{width:114px;height:114px;position:relative;}
.worksbox a{border:1px solid #F0F0E8;background-color:#FFF;padding:6px;display:block;}
.worksbox a:hover{border:1px solid #000;background-color:#333;text-decoration: none;}
.worksbox a span{display:none; text-al ......