为程序员设计的简约式模板

为程序员设计的简约式模板

 

当你在写JSP里，是不是常常抱怨那冰冷冷的页面？

是不是常常被网上的长编的网页模板而吓倒？

为什么不做一个简约的模版，而一劳永逸呢？

 

       下面我就为大家介绍怎样做一个合适的模板。先来看一片效果图！

 

 

麻雀虽小，五脏俱全。简单就是美！

从图上可以看到，有背景图（淡灰色），有标题栏(灰色)，有展示面版(白色)。

 

使用简约式模板有以下好处：

1、  可以让程序员减轻些心理负担。清爽简单的样式，总能为你增加几分信心和耐心。

2、  在开发前期可以更快更好地让客户看到预览图。

3、  使用简约式模板，能为后续工作，特别是对美工来说，是一目了然的。

4、  …………

   优点就不一一多说了。做起来也很简单。只需要把下面的代码复制一下就可以了。而你只需要做一点点小修改！

1、  把<div class="STYLE3" id="title">Title</div>中的title改成你需要的标题

2、  把<div id="content">Your Content</div>中的Your Content改成你所需要的内容

3、  如果想居中的话可以为你的<table>加一句align="center"

< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=GBK"   />
         < title > Action Page </ title >
         < style  type ="text/css" > ...
            <!--
            #main {...}{
                background-color: #CCCCCC;
                width: 750px;
                margin-right: auto;
                margin-left: auto;
                padding-bottom: 30px;
                padding-top: 30px;
            }
            #main #content {...}{
                background-position: center;
                background-color: #FFFFFF;
                width: 600px;
                margin-right: auto;
                margin-left: auto;
                vertical-align: text-top;
                text-align: center;
                padding-top: 20px;
                padding-bottom: 20px;
            }
            .STYLE3 {...}{
                width: 600px;
                background-color: #666666;
                margin-right: auto;
                margin-left: auto;
                font-size: xx-large;
                font-weight: bold;
                color: #FFFFFF;
            }
            -->
         </ style >
     </ head >
     < body >
         < div  id ="main" >
             < div  class ="STYLE3"  id ="title" > Title </ div >
             < div  id ="content" >
        Your Content
             </ div >
         </ div >
     </ body >