程序人生系列之新闻发布系统 18-28

1. 这次直接跳过了 18-20,讲解了 CSS 知识

2. 居中显示的问题

center已经不被采纳了

  #top,#search,#main,#footer

  {

  margin:10px auto 10px auto; 

  width:760px; 

  }

3. 标准流  和  浮动流

元素如果设置了 float 那么就会脱离标准流

首页图片  niunanlogo   和   tg029logo  并排显示的问题

  #top img

  {

  border-width:0;   

  float:left;           

  }

  后面的元素由于上面元素是浮动的,就会往上挤,而脱离自己原来的位置,所以要清除浮动

   #search

  {

  clear:left;

  background-color:Green;

  }

  除此之外,最好还要设置一下设置为浮动的元素所在的 div ,它的元素如果都是浮动的那么它的高度可能就会变成 0,所以要重新设置它的高度

  在 IE 中没有问题,但是在 FF中会出现问题(div的高度会设置成 0),为了兼容性,添加 高度设置

  #top

  {

  height:120px;

  }

   摘抄:

        什么是普通流? 简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。并且这种过程遵循标准的描述。

   为了从不同角度说明,我采集了一些可能冗长、具体或者晦涩的其他人给出的定义:

   将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素,即为文档流。

       普通流是元素在多数情况下呈现在 web 页面上的方式。所有 HTML 元素都在块框( block boxes,块级元素 )或者行内框( inline boxes,行内元素 )中。

   当浏览器开始渲染 HTML 文档,它从窗口的顶端开始,经过整个文档内容的过程中,分配元素需要的空间。除非文档的尺寸被 CSS 特别的限定,

        否则浏览器垂直扩展文档来容纳全部的内  容。每个新的块级元素渲染为新行。行内元素则按照顺序被水平渲染直到当前行遇到了边界,然后换到下一行垂直渲染。

        这个过程被成为普通文档流。

   可见,把流( flow )理解为流程,完全说的通。普通流即是通常情况下的元素排布和定位流程。

        除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

        可以这样说,就是不用position , float那些东西的,都算是标准流。

        非标准流,可以算做指position , float那些东西,他们脱离了标准流 ,并在标准流输出之后再“定位”到某个地方。

  4. 搜索栏控件代码:

   <asp:RadioButton ID="radTitle" Text="标题" GroupName="condition" Checked="true" runat="server" />

  <asp:RadioButton ID="radContent" Text="内容" GroupName="condition" runat="server" />

  </div>

  <asp:TextBox ID="txtkey" CssClass="txtkey" runat="server"></asp:TextBox>

  <asp:ImageButton ID="ibtnSearch" ImageUrl="~/images/search.gif" runat="server"

  onclick="ibtnSearch_Click" />

① RadioButton:Text  GroupName  Checked

②TextBox:CssClass

③ImageButton:ImageUrl  onclick

5.  文本之类的垂直居中用  line-height

其他控件什么的垂直居中用 vertical-align,非常管用的一句代码

   input

  {

  vertical-align:middle;

  }

  6. 表格

   ①border-collapse   该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框。

值:collapse | separate | inherit

    可用值 值的说明   separate 缺省值。边框分开,不合并。   collapse 边框合并。即如果相邻,则共用同一个边框。    .commonframe table

  {

  width:100%;

  text-align:center;

  border-collapse:collapse;

  }

②padding

.commonframe th,.commonframe td

  {

  padding:5px;   

  }

  7. 问题

  如果 commonfrm 设置了border的宽度,在IE 和 FF 中显示是不同的,所以最后 选择不显示边框宽度

  8.母版页是不能预览的,要预览就必须新建一个页面

  如果不是首先建立母版页,而是后来重构的话,需要注意几点:

  如果模板页中包含一些事件处理机制,那么母版页的后台代码中也要添加相应的代码

  应用了母版页之后,母版页要添加 重新添加 CSS 样式表

  还有,如果页面有用户自定义的控件,还要重新注册!

你可能感兴趣的:(程序人生)