织梦dedecms自定义表单列表CSS美化

发布时间：2019-09-29 阅读次数：53
织梦自定义表单排版不好看，下面是对织梦后台表单重新进行排版，并加上全选功能，整体进行美化排版。
找到后台前端页面模板：dede/templets/diy_list.htm，打开文件，进行全选择，直接用下面的代码替换所有代码，保存即可：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $cfg_soft_lang; ?>">

<title><?php echo $diy->name;?></title>

<link href="css/base.css" rel="stylesheet" type="text/css" />

<style type="text/css">

    body{

    margin: 0;

    background: #e4e4e4;

    padding: 18px;

    }

    .diy_body{

    background-color: #fff;

    border: 1px solid #d7d7d7;

    padding: 28px 8px 8px 30px;

    }

.bodytitle{

border: 0px;

background-image: none;

margin: 0;

}

.bodytitletxt{

   font-size: 20px;

   font-family: Microsoft Yahei;

   font-weight: 700;

   color: #333;

}

.tbtitle1{

width: 98%;

border: 0;

background: #fff;

text-align: center;

margin-top: 20px;

padding-left: 4px;

}

.diy_namelujin{

font-size: 16px;

   color: #393d49;

   font-family: Microsoft Yahei;

   font-weight: bold;

   text-align: left;

}

.diy_yvlan{

        float:right;

        padding-right:8px;

}

.diy_table1{

width: 98%;

text-align: center;

background:#fff;

margin-top: 30px;

border-collapse: collapse;

}

.diy_table1 table{

        

}

.diy_biaoti{

        width: 100%;

   height: 40px;

   border: 1px solid #ececec;

   background: #f7f6f9;

   color: #333;

}

.diy_biaoti td{

        padding: 0 !important;

   line-height: 40px;

   text-align: left;

   font-size: 15px;

   text-indent: 12px;

   font-family: Microsoft Yahei;

   background: rgba(228, 228, 228, 0.24);

}

.diy_biaoge{

height: 38px;

        border-bottom: 1px solid #ececec;

}

.diy_biaoge:hover{

        background: rgba(228, 228, 228, 0.24);

        transition: all 0s;

}

.diy_biaoge td{

font-family: Microsoft Yahei;

   font-size: 13px;

   color: #666;

   text-align: left;

        text-indent: 12px;

}

.diy_footer{

width: 98%;

text-align: center;

border: 0;

background: #fff;

margin-top: 40px;

margin-bottom: 80px;

}

.pagelistbox{

width: 700px;

height: 50px;

margin: 0 auto;

display: block;

}

.pagelistbox span{

color: #666;

font-family: Microsoft Yahei;;

font-size: 15px;

display: block;

float: left;

margin-top: 7px;

}

.pagelistbox .indexPage{

   display: block;

   float: left;

   background: #009688;

   color: #fff;

   font-size: 15px;

   font-family: Microsoft Yahei;

   line-height: 32px;

   border: 1px solid #b4b4b4;

   border-radius: 3px;

   margin: 0 0 0 20px;

   padding: 0px 15px 0px 15px;

}

.pagelistbox .indexPage:hover{

background: #16b6a7;

}

.pagelistbox strong,.pagelistbox .endPage{

   display: block;

   float: left;

   background: #009688;

   color: #fff;

   font-size: 15px;

   font-family: Microsoft Yahei;

   line-height: 32px;

   border: 1px solid #b4b4b4;

   border-radius: 3px;

   margin-left: 5px;

   padding: 0px 15px 0px 15px;

}

.pagelistbox strong:hover{

background: #16b6a7;

}

.pagelistbox .endPage:hover{

background: #16b6a7;

}

.pagelistbox .prePage,.pagelistbox .nextPage,.pagelistbox a{

display: block;

   float: left;

   background: #fff;

   color: #009688;

   font-size: 15px;

   font-family: Microsoft Yahei;

   line-height: 32px;

   border: 1px solid #b4b4b4;

   border-radius: 3px;

   margin-left: 5px;

   padding: 0px 15px 0px 15px;

}

.duy_gongneng{

width: 100%;

   display: block;

   margin-top: 60px;

}

.duy_gongneng td{

margin: 0 auto;

    display: block;

    background: #fff;

    padding-top: 50px;

}

.duy_gongneng input{

width: 120px;

   height: 32px;

   font-family: Microsoft Yahei;

   font-size: 15px;

}

.duy_gongneng .diy_shenhe{

width: 12px;

height: 12px;

font-size: 15px;

color: #666;

text-align: center;

}

.diy_bianji123{

width: 80px;

   height: 32px;

   background: #009688;

   display: block;

   line-height: 32px;

   text-align: center;

   color: #fff;

   border-radius: 3px;

   text-indent: 0px;

}

.diy_bianji123:hover{

background: #16b6a7;

color: #fff;

}

</style>

</head>

<body background='images/allbg.gif'>

<div class="diy_body">

<div class="bodytitle">

<div class="bodytitleleft"></div>

<div class="bodytitletxt"><?php echo $diy->name;?> — — 表单列表</div>

</div>

<form action="diy_list.php" method="post">

<input type="hidden" name="diyid" value="<?php echo $diyid;?>" />

<table cellpadding="1" cellspacing="1" class="tbtitle1">

<tr>

<td height="28">

<div style='float:left'>

<a href='diy_main.php'>

<b class="diy_namelujin">自定义表单管理</b>

</a> 

<b class="diy_namelujin">>>内容列表</b>

</div>

       <div class="diy_yvlan">

           <a href="../plus/diy.php?action=list&diyid=<?php echo $diy->diyid; ?>" target="_blank">

           	<img src='images/gtk-tmp.png' align='left' title='预览' alt='预览' /><u>前台预览</u>

           </a>

       </div>

</td>

</tr>

</table>

<table cellpadding="1" cellspacing="1" class="tbtitle diy_table1">

<?php

 echo '<tr class="diy_biaoti"><td width="50px">ID</td>';

 foreach($fieldlist as $field=>$fielddata)

 {

   echo '<td>'.$fielddata[0].'</td>';

 }

 echo '<td>状态</td><td style="text-align:center">操作</td></tr>';

?>

{dede:datalist}

<?php 

if(!empty($fields)){

$allowhtml = array('htmltext');

$fields['sta'] = $fields['ifcheck'] == 1 ? '已审核' : '未审核';    

echo '<tr class="diy_biaoge"><td width="5%" style="text-align:left"><input type="checkbox" name="id[]" value="'.$fields['id'].'" class="np" /><a href="diy_list.php?action=edit&diyid='.$diy->diyid.'&id='.$fields['id'].'">'.$fields['id'].'</a></td>';

foreach($fieldlist as $field=>$fielddata)

{

if($fielddata[1]=='img'){

$fields[$field] = "<a href='{$fields[$field]}' target='_blank'><img src='images/channeladd.gif' border='0' /> 图片附件</a>\r\n";

}

else if($fielddata[1]=='addon'){

$fields[$field] = "<a href='{$fields[$field]}' target='_blank'><img src='images/channeladd.gif' border='0' /> 其它附件</a>";

}

else{

if(!in_array($fielddata[1],$allowhtml)){

$fields[$field] = htmlspecialchars($fields[$field]);

}

}

echo '<td>'.$fields[$field].'</td>';

   }

echo '<td>'.$fields['sta'].'</td><td width="10%" align="center" style="width: 80px;height: 32px;margin: 0 auto;display: block;"><a class="diy_bianji123" style="color:#fff" href="diy_list.php?action=edit&diyid='.$diy->diyid.'&id='.$fields['id'].'">编辑</a></td>';

echo '</tr>';

} 

else {

echo "<tr><td>暂无记录</td></tr>";

}

?>

{/dede:datalist}

</table>

<table class="diy_footer"  cellpadding="1" cellspacing="1" >

   <tr><td colspan="3">{dede:pagelist listsize=2 /}</td></tr>

<tr class="duy_gongneng">

<td colspan="5" height='36' align="center" bgcolor="#F8FCF1">

<label><input type="button" name="select" onclick="selectAll()" value="全选"/></label>

<label><input type="button" name="select" onclick="selectAll1()" value="取消全选"/></label>

<label style="font-size: 15px;margin-left: 30px;font-family: Microsoft Yahei;"><input type="radio" name="action" value="check" class='np diy_shenhe' />审核</label>

<label style="font-size: 15px;margin-left: 30px;font-family: Microsoft Yahei;"><input type="radio" name="action" value="delete"  class='np diy_shenhe' />删除</label>

  

<input type="submit" name="submit" value="提交" class='np coolbg' />

</td>

</tr>

</table>

</form>

</div>

<script type="text/javascript">

function selectAll(){

   var a = document.getElementsByTagName("input");

for(var i = 0;i<a.length;i++){

   if(a[i].type == "checkbox") a[i].checked = true;

}

}

 function selectAll1(){

var a = document.getElementsByTagName("input");

for(var i = 0;i<a.length;i++){

   if(a[i].type == "checkbox") a[i].checked = false;

   }

}

</script>

</body>

</html>
本文标题：《织梦dedecms自定义表单列表CSS美化》
网址：https://zhangwenbao.com/decdecms-custom-form-list-css-beautification.html
作者：张文保
发布时间：2019-09-29
许可协议：CC BY-NC-SA 4.0