前端页面的小窍门——不定期更新

1. 将div居于页面中央

.center-in-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0, -50%);
}

2. div内容居中

text-align:center（内容居中）或

margin:0 auto

3. input输入框预留文字

1. <input type="text" name="user" id="username" placeholder="请输入用户"  />
2. <input type="password" name="pw" id="password" value="" placeholder="请输入密码"/>
3. <?php echo $ckcode; ?>
4. <input type="submit" name="submit" id="submit" value="登 录" data-theme="b" />
5. </form>

4. table获取行列索引

$("#history tr td").click(function(){
var tdidx = $(this).index();
         var tridx = $(this).closest('tr').index();  
})

5. 设置竖排字体和字间距

    -webkit-writing-mode: vertical-rl;
    text-align: center;
    line-height: 140px;
    letter-spacing: 8px;

6. 字体样式

样式一：
 
body {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color: #000000;
    background: #f2e7ca url(images/templatemo_body.jpg) top center no-repeat;
 
}
样式二：
body {
        background:#2f373a;
        font-family:Arial,Helvetica,sans-serif;font-size:100%;
        line-height:1em;color:#4e4e4e;
        min-width:920px;
        border-top:10px solid #0c0e0e
      }
                     
样式三：
body  {
       font-family:Arial,Helvetica,sans-serif;
       font-size:1em;
       vertical-align:middle;
       font-weight:normal
      }      
样式四：
body 
{
      margin:0px;
      padding:0px;
      background-color:#E7EAEB;
      font-family:"微软雅黑","黑体","宋体";
      font-size:12px;
      height:36px;
            
}
样式五：
body 
{    
      font: .8em Arial, Tahoma, Verdana;
      background: #fff url(../images/bg.gif) repeat-x; 
      color: #777;
 }
样式六：
body 
{     
      width:auto; margin-top:12px; 
      float:right; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:11px; 
      color:#999999;
      line-height:25px;
      letter-spacing:1px
}
样式七：
body
{
      width:auto;
      margin-left:1px;
      float:left;
      font-family:Arial, Helvetica, sans-serif; 
      font-size:13px;
      color:#5f5f5f;
      line-height:35px;
      text-transform:uppercase
}
样式八：
body {background: #e1e5e8;font-family: "Georgia", Tahoma, Sans-Serif;font-size: 12px;line-height: 18px;color: #888;
}
样式九：
body
{
        width:130px; height:20px;
        background:url(images/servicesbg.gif) 0 0 repeat-x #68EF00; 
        color:#317400;
        font:18px/14px Georgia, "Times New Roman", Times, serif;
        margin:34px 0 0 37px;
}
样式十：
body
{
       display:block; 
       width:94px;
       height:20px; 
       background: url(images/serviceslink1bg.gif) 0 72% no-repeat #6DFD00; 
       color:#01699F; 
       font:13px/20px Georgia, "Times New Roman", Times, serif; text-decoration:none;
}
样式十一：
body {margin: 0;padding: 0;line-height: 1.5em;font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px;color: #33322e;background: #39443D url(images/templatemo_body_bg.jpg) repeat-x;
/*    background: #47443c url(images/templatemo_body_bg_2.jpg) repeat-x;    */
}
样式十二：
body {margin: 0;padding: 0;line-height: 1.5em;font-family: Tahoma, Geneva, sans-serif;font-size: 12px;color: #6f6f6f;
    background: #2ac5c0 url(images/templatemo_body_top.jpg) repeat-x;
}
样式十三：
body {margin: 0;padding: 0;line-height: 1.5em;font-family: Verdana, Geneva, sans-serif;font-size: 11px;color: #ffffff;background: #005b7f;
}
样式十四：
body {margin: 0;padding: 0;line-height: 1.7em;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-size: 12px;color: #333333;
    background: #000000 url(images/templatemo_main_bg.jpg) repeat-y center;
}
样式十五：
body {margin: 0;padding: 0;line-height: 1.7em;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #707b84;background: #3e464d;
}
样式十六：
body {margin: 0;padding: 0;line-height: 1.7em;letter-spacing: 1px;font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px;color: #333;
    background: #e1d1d6 url(images/templatemo_body.png) repeat-x top;
}
样式十七：
body {margin: 0;padding: 0;line-height: 1.7em;letter-spacing: 1px;font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px;color: #333;
    background: #e1d1d6 url(images/templatemo_body.png) repeat-x top;
}
样式十八：
body
{
        background:url(images/bg.gif) repeat #000000;
        padding:0; font-family:arial, sans-serif; font-size:12px;
        margin:0px auto auto auto;
        color:#36322b;
}
样式十九：
body
{
         margin:0px; 
         padding:0px;
         background:url(images/mainbg.gif) 0 0 repeat-x #F6F4E4; 
         color:#6B6854;
         font:14px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
样式二十：
body
 
{
         font-family:Georgia;
         font-family:Arial;
}