校友录项目网站样式设计简要说明。

一、门户网站

1.1 首页轮播图

在 ar-parent\ar-portal\src\main\webapp\WEB-INF\views\portal-main\index.jsp 中有如下代码:

div.carousel中即使首页的轮播图,图片暂不支持后台手动设置,需要存放在 assets/images/school/ 下或assets其它文件夹下面。

图片尺寸建议采用2600x720的。

1.2 导航栏样式

导航栏由两部分组成:

上面的header,下面的是导航菜单(nav),这两部分在index.jsp中通过include引入,分别位于 WEB-INF/views/portal-common/header.jsp 和 WEB-INF/views/portal-common/navmenu.jsp。门户网站主要样式在 assets/css/style.css 中定义。

Header样式

在style.css中搜索 .top_bg,找到如下代码:

1
2
3
4
5
/*-- header_top --*/
.top_bg {
background: #666666;
padding: 2px 0;
}

background就是header的背景色。

在style.css中搜索 .mega_nav,找到如下代码:

1
2
3
4
.mega_nav {
background-color: #f5f5f5;
box-shadow: 0px 6px 5px #CCCBCB;
}

修改background改变Nav整个背景色。Nav中菜单项的颜色在 assets/css/megamenu.css 中定义,找到如下代码:

1
2
3
4
.skyblue li a.color1:hover{
background:#204056;
color: #ffffff;
}

即可修改菜单项hover的样式,菜单项背景色等可以自行探索。

修改后导航栏后整体样式如下(一不小心破相了~):

1.3 表单样式

门户网站表单组件绝大部分使用bootstrap样式:

可根据bootstrap修改按钮等组件样式,本项目参考了一份模板进行设计,整个模板素材存在 ar\ar-tools\model-portal\Bracket1.5\ 下。

表单样式:

按钮样式:

表格及分页器:

门户网站风格和此模板素材基本保持一致,可参考修改。

二、后台管理

后台管理网站样式主要定义在 ar-manage\src\main\webapp\assets\css\admin.css 下。

1.1 首页样式

管理页主题title

在 WEB-INF/views/main/index.jsp 中搜索如下代码,修改此处即可:

1
2
3
4
5
<!-- 导航 -->
<div class="am-topbar-brand">
<strong>信电校友录</strong>
<small>后台管理</small>
</div>

页脚

在 WEB-INF/views/global/footer.jsp 中修改即可:

1
2
3
4
5
6
<footer>
<hr>
<p class="am-padding-left">
CopyRight © 2015 . <a href="#" target="_blank">徐州工程学院信电学院</a>
</p>
</footer>

侧边栏

在 WEB-INF/views/global/sidebar.jsp 中修改即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 公告 bookmark -->
<div class="am-panel am-panel-default admin-sidebar-panel">
<div class="am-panel-bd">
<p>
<span class="am-icon-bookmark"></span> 公告
</p>
<p>时光静好,与君语;细水流年,与君同。—— 信电校友录</p>
</div>
</div>


<!-- 社群 wiki -->
<div class="am-panel am-panel-default admin-sidebar-panel">
<div class="am-panel-bd">
<p>
<span class="am-icon-tag"></span> 社群
</p>
<p>欢迎来到信电校友录后台管理!</p>
</div>
</div>

1.2 表单样式等

后台管理网站整站风格参考一套AmazeUI素材,素材存在 ar\ar-tools\model-admin\ 下,

按钮等组件样式可参考Amaze官网

(完)