程序人生系列之新闻发布系统 2935

1. a 标签

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

  #newscontent a

  {

  background-color:#EFF7FF;

  border:1px solid #428EFF;

  70px;

  height:25px;

  display:block; 

  text-align:center;

  line-height:25px;

  margin-left:10px;

  }

  2. 横线 hr

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

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

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

   #reply hr

  {

  650px;

  clear:right;

  }

  3. 居中

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

   .addComment

  {

  760px;

  margin-bottom:10px;

  text-align:center;

  }

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

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

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

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

  配置方法:

     .round1                         

  {

     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

原文地址:https://www.cnblogs.com/yinger/p/2084851.html