经典27款后台页面，div+css制作资源-CSDN文库

共1646个文件

gif：1160个

jpg：113个

html：98个

需积分: 9 29 浏览量 2010-09-11 20:21:55 上传评论收藏 4.86MB RAR 举报

在IT行业中，网页设计是至关重要的一个环节，尤其对于后台管理页面来说，其设计既要考虑功能的实用性，又要满足操作的便捷性和界面的美观性。"经典27款后台页面，div+css制作"这个资源集合了27个精心设计的后台管理模板，这些模板都采用了HTML的div元素和CSS样式表进行构建，旨在为学校、企业等各种类型的网站提供高效且视觉吸引力强的后台界面。我们来了解一下`div`元素。在HTML中，`div`（division）是一个通用容器标签，用于对网页内容进行分组，以便更好地布局和应用样式。通过`div`，我们可以将页面划分为多个区域，比如头部、主体、侧边栏等，便于管理和控制页面结构。同时，`div`还可以与其他CSS属性结合，如浮动、定位、边距等，实现更复杂的布局效果。接着，我们谈谈`CSS`（Cascading Style Sheets）。CSS是网页样式设计的重要工具，它允许我们将样式规则与HTML内容分离，从而实现页面的美化和响应式设计。通过设置颜色、字体、布局、动画等样式，我们可以使后台页面看起来既专业又美观。例如，使用CSS可以定义按钮样式、表单布局、菜单结构，以及响应不同屏幕尺寸的自适应设计，确保在各种设备上都能良好显示。这27款后台管理页面设计涵盖了多种常见的后台界面布局和功能模块，如： 1. 登录/注册页面：通常包括输入框、按钮、验证码等元素，设计时需注重安全性与用户体验。 2. 首页概览：展示关键数据指标和快速操作入口，设计上通常采用大图背景、图表展示等元素。 3. 数据表格：用于展示大量信息，可通过排序、筛选、分页等功能提高数据处理效率。 4. 图表展示：利用饼图、柱状图、线图等可视化工具，直观地呈现数据。 5. 设置与配置：包括用户信息管理、权限设置、系统配置等，需确保操作简便且逻辑清晰。 6. 消息通知：提供实时或历史消息的查看和管理，提升沟通效率。 7. 操作日志：记录用户操作，便于追踪问题和审计。 8. 导航菜单：引导用户快速找到所需功能，通常采用多级、折叠式设计。每款设计都可能在色彩搭配、图标选择、交互体验等方面有所创新，为开发者提供了丰富的灵感和参考资料。无论是新手还是经验丰富的开发者，都可以从中学习到如何利用div+css构建高效、美观的后台页面，提升项目的整体品质。在实际应用中，开发人员可以根据项目需求，选择合适的模板进行定制化开发，或者结合现有的前端框架（如Bootstrap、Element UI等）进一步优化和扩展。此外，对于前端开发人员而言，深入理解div+css的原理和技巧，不仅可以提高工作效率，还能提升自身的专业技能，为职业发展打下坚实基础。

资源推荐

资源详情

资源评论

收起资源包目录

经典27款后台页面，div+css制作（1646个子文件）

ScriptResource.axd 254KB

ScriptResource(1).axd 64KB

WebResource(1).axd 21KB

WebResource.axd 21KB

WebResource.axd 20KB

ext-all.css 80KB

globle_v1.css 42KB

newhead.css 23KB

inbox.css 14KB

desktop.css 14KB

style.css 7KB

fox.css 7KB

css1.css 7KB

all.css 7KB

layout.css 6KB

Style.css 5KB

common.css 5KB

css1.css 5KB

skin.css 4KB

jNice.css 4KB

Admin.css 4KB

skin_blue.css 3KB

Manage.css 3KB

css.css 3KB

CssAdmin.css 3KB

style.css 3KB

public.css 3KB

BlueStyle.css 3KB

silverStyle.css 3KB

tab.css 3KB

classicStyle.css 3KB

style.css 2KB

admin.css 2KB

theme4.css 2KB

theme2.css 2KB

theme3.css 2KB

theme1.css 2KB

theme.css 2KB

Copy of theme.css 2KB

public.css 2KB

main.css 2KB

style_left.css 2KB

style.css 2KB

Style.css 2KB

index.css 1KB

css.css 1KB

reset.css 972B

switch.css 861B

left_css.css 804B

top_css.css 629B

right_css.css 597B

ie6.css 523B

transdmin.css 362B

ie-sucks.css 248B

ie7.css 139B

hack.css 0B

Thumbs.db 175KB

Thumbs.db 99KB

Thumbs.db 94KB

Thumbs.db 61KB

Thumbs.db 56KB

Thumbs.db 54KB

Thumbs.db 44KB

Thumbs.db 41KB

Thumbs.db 35KB

Thumbs.db 29KB

Thumbs.db 26KB

Thumbs.db 24KB

Thumbs.db 21KB

Thumbs.db 20KB

Thumbs.db 17KB

Thumbs.db 14KB

Thumbs.db 10KB

Thumbs.db 6KB

desktop.gif 62KB

login_09.gif 49KB

left_bg.gif 43KB

login_08.gif 32KB

dlg-bg.gif 27KB

login_08.gif 25KB

bg_login_panel.gif 25KB

f1.gif 24KB

login_04.gif 23KB

共 1646 条

<!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=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style> <script> var highlightcolor='#c1ebff'; //此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:( var clickcolor='#51b2f6'; function changeto(){ source=event.srcElement; if (source.tagName=="TR"||source.tagName=="TABLE") return; while(source.tagName!="TD") source=source.parentElement; source=source.parentElement; cs = source.children; //alert(cs.length); if (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor) for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=highlightcolor; } } function changeback(){ if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc") return if (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor) //source.style.backgroundColor=originalcolor for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=""; } } function clickto(){ source=event.srcElement; if (source.tagName=="TR"||source.tagName=="TABLE") return; while(source.tagName!="TD") source=source.parentElement; source=source.parentElement; cs = source.children; //alert(cs.length); if (cs[1].style.backgroundColor!=clickcolor&&source.id!="nc") for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=clickcolor; } else for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=""; } } </script> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="30" background="images/tab_05.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="12" height="30"><img src="images/tab_03.gif" width="12" height="30" /></td> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="46%" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="5%"><div align="center"><img src="images/tb.gif" width="16" height="16" /></div></td> <td width="95%" class="STYLE1"><span class="STYLE3">你当前的位置</span>：[业务中心]-[我的邮件]</td> </tr> </table></td> <td width="54%"><table border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <td width="60"><table width="87%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="STYLE1"><div align="center"> <input type="checkbox" name="checkbox62" value="checkbox" /> </div></td> <td class="STYLE1"><div align="center">全选</div></td> </tr> </table></td> <td width="60"><table width="90%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="STYLE1"><div align="center"><img src="images/22.gif" width="14" height="14" /></div></td> <td class="STYLE1"><div align="center">新增</div></td> </tr> </table></td> <td width="60"><table width="90%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="STYLE1"><div align="center"><img src="images/33.gif" width="14" height="14" /></div></td> <td class="STYLE1"><div align="center">修改</div></td> </tr> </table></td> <td width="52"><table width="88%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="STYLE1"><div align="center"><img src="images/11.gif" width="14" height="14" /></div></td> <td class="STYLE1"><div align="center">删除</div></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> <td width="16"><img src="images/tab_07.gif" width="16" height="30" /></td> </tr> </table></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="8" background="images/tab_12.gif"> </td> <td><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6" onmouseover="changeto()" onmouseout="changeback()"> <tr> <td width="3%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"> <input type="checkbox" name="checkbox" value="checkbox" /> </div></td> <td width="3%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">序号</span></div></td> <td width="12%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">接收号码</span></div></td> <td width="14%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">发送时间</span></div></td> <td width="18%" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">邮件地址</span></div></td> <td width="23%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">内容</span></div></td> <td width="15%" height="22" background="images/bg.gif" bgcolor="#FFFFFF" class="STYLE1"><div align="center">基本操作</div></td> </tr> <tr> <td height="20" bgcolor="#FFFFFF"><div align="center"> <input type="checkbox" name="checkbox2" value="checkbox" /> </div></td> <td height="20" bgcolor="#FFFFFF"><div align="center" class="STYLE1"> <div align="center">01</div> </div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">13813916585</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">2007-11-16 15:00:20 </span></div></td> <td bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">tiezhu0902@163.com</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">南京科技股份有限公司…</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE4"><img src="images/edt.gif" width="16" height="16" />编辑   <img src="images/del.gif" width="16" height="16" />删除</span></div></td> </tr> <tr> <td height="20" bgcolor="#FFFFFF"><div align="center"> <input type="checkbox" name="checkbox3" value="checkbox" /> </div></td> <td height="20" bgcolor="#FFFFFF"><div align="center" class="STYLE1"> <div align="center">02</div> </div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">13813916585</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">2007-11-16 15:00:20 </span></div></td> <td bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">tiezhu0902@163.com</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">南京科技股份有限公司…</span></div></td> <td height="20" bgcolor="#FFFFFF"><div ali

评论收藏

内容反馈