程序人生系列之新闻发布系统 29-35

1. a 标签

a 标签元素 默认是 行内元素，【在 CSS 中，如果要严格设置某个元素的高度和宽度，必须让它成为块级元素才行！】

  #newscontent a

  {

  background-color:#EFF7FF;

  border:1px solid #428EFF;

  width:70px;

  height:25px;

  display:block; 

  text-align:center;

  line-height:25px;

  margin-left:10px;

  }

  2. 横线 hr

  横线很重要，在不同浏览器中显示不同

  在 IE 中默认是居中显示，评论后面有评论信息（它是向右浮动的），如果没有清除浮动，显示异常，评论信息会在横线下面

  在 FF 中默认是自左向右显示，。。。显示正常

   #reply hr

  {

  width:650px;

  clear:right;

  }

  3. 居中

  添加新闻评论部分由几个控件，其中最重要的是 那个文本框 TextBox，要让他们居中很重要，方法是用 text-align

   .addComment

  {

  width:760px;

  margin-bottom:10px;

  text-align:center;

  }

  4. 第29讲中讲解了 如何制作可变高度的圆角框

  原始大小的图片：高度和宽度都是固定不变的

  制作过程是用 Photoshop 切片工具 将其 切割成 上中下 三部分

  中间部分只要去一点点就可以

  配置方法：

     .round1                         

  {

     width:518px;             

      margin:auto;

     margin-top:160px;

     background-image:url("../images/round1_middle.gif"); 

      background-position:center;                           

      background-repeat:repeat-y;         

  }

.round1 h3

{

     background-image:url("../images/round1_top.gif");

     background-position:top;

     background-repeat:no-repeat;

     padding:20px 30px;         

  }

.round1 #footer

{

     background-image:url("../images/round1_bottom.gif");

     background-position:bottom;

     background-repeat:no-repeat;

     padding:20px;

     padding-left:300px;         

  }

5. padding  和 margin

调整登录框中的各个文本框的距离用 padding

#loginfrm #login p

{

   padding-bottom:10px;

} 

调整登陆框底部版权样式

.round1 #footer

{

     background-image:url("../images/round1_bottom.gif");

     background-position:bottom;

     background-repeat:no-repeat;

     padding:20px;

     padding-left:300px;         

  }

而在设置 页面中的各个不同的模块之间的距离，用的是 margin

【注意】一般在一个小的框架里设置某些元素的位置都是用 padding ，如果不行试试 margin

6.相对定位

position:relative;

top: XX px;

7. span

span 类似 div，起到一个容器的作用

可以用于设置某个特别的元素，例如:

<p>将在<span id="mes">5</span>秒后返回主页</p>

8. 页面计时器

倒计时 的 javascript 代码

<script language="javascript" type="text/javascript">

         var i = 5;

         var intervalid;

         intervalid= setInterval("fun()", 1000);

         function fun() {

             if (i == 0) {

                 window.location.href = "Default.aspx";

                 clearInterval(intervalid);

             }

             document.getElementByIdx_x("mes").innerHTML = i;

             i--;

         }

</script>

9. 五图制图法

很经典！可以制作 可变宽度和高度的圆角框图形

左上，左下，右上，右中，右下

然后就要在 页面中给定五个部分，将它们的背景图片设置成上面的五个切片图

如果没有五个部分，可以人为地给定一些，例如 P 标签，里面什么都没有，只是一个空格都可以

添加新闻类别：

<div id="addCategory" class="round2">

     <h3>添加类别</h3>

      <div class="content"> 

          请输入类别名称：<asp:TextBox ID="txtName" runat="server" Validati ></asp:TextBox>

         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" Validati runat="server" ErrorMessage="请输入类别名称" Text="*" C></asp:RequiredFieldValidator>

          <asp:Button ID="btnAdd" runat="server" Text="添加类别" Validati

              />

         <asp:ValidationSummary ID="ValidationSummary1" runat="server" Validati ShowMessageBox="true" ShowSummary="false"/>

     </div>

     <div class="bottom">

         <p> </p>     

      </div>

</div>

样式代码：[注意点，各个背景图片的位置，repeat方式，以及布局方式（padding），同时还要解决浏览器的兼容性问题 ]

.round2

{

     background-image:url("/Web/images/round2_left_top.gif");

     background-position:top left;

     background-repeat:no-repeat;

}

.round2 h3

{

     background:url("/Web/images/round2_right_top.gif") no-repeat top right;

     padding-left:35px;

     padding-top:12px;

     padding-bottom:30px;

     font-size:16px;

     font-weight:bold;

}

.round2 .content

{

     background:url("/Web/images/round2_right_middle.gif") repeat-y top right;

    margin-top:-1em;

    padding:10px 20px;

}

.round2 .bottom

{

     background:url("/Web/images/round2_left_bottom.gif") no-repeat bottom left;

}

.round2 .bottom p

{

     background:url("/Web/images/round2_right_bottom.gif") no-repeat bottom right;

}

10. 根目录

  <a href="/Web/Default.aspx "><img src="/Web/images/niunanlogo.jpg" alt="logo" /></a>

注意 Web 前面的那个 / ,很重要，它代表网站域名下的根目录，这样子在任何目录下的页面都可以通过这个链接跳转到网站的首页

但是 它又不总是指网站根目录，例如 在 CSS 文件夹中 commonManager.css 文件中 "/Web/images/round2.jpg" 并不会指向实际的那张图片，而是 当前 css文件所在目录下的 Web 文件夹，又因为根本没有这个文件夹所以就不会显示出图片！需要注意一下

11. background-color

网页设计时 为了查看布局效果，最好是用 background-color，而不是用 border 显示出来，因为 border 是有宽度的，影响不小哟！

12. 母版页

默认有两个可变内容区域： 母版页一般都有这两个

   <asp:ContentPlaceHolder id="head" runat="server">

  </asp:ContentPlaceHolder>

   <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

  </asp:ContentPlaceHolder>

  在应用母版页的页面中就是：注意 ContentPlaceHolderID 刚好对应！

  <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

   <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

  </asp:Content>

  如果要进行母版页嵌套，那么就要 添加类似

  <asp:ContentPlaceHolder id="ContentPlaceHolderIdName" runat="server">   </asp:ContentPlaceHolder>

  这样的内容，这样的话 新建页面 就会多一个可变内容区域

  【注意】一个是 ContentPlaceHolder ，一个是 Content