一步一步做项目（23）制作主页

布局
主页
/includes/beginning.jsp
/includes/topFront.jsp
masthead.jsp
portfolio.jsp
about.jsp
contact.jsp
portfolioModal.jsp
/includes/footer.jsp
/includes/copyright.jsp
Messages.properties
css

在前面一步一步做项目（22）制作后台管理界面的基础上进行，有了前面管理的各种基本信息，这里就可以对用户推送了。

布局

系统基本布局采用响应式处理，分栏展示不同主题，各主题内容可以根据需要进行组织，其基本形式如下图所示：
注：这里的基本样式参照bootstrap的开源项目。

主页

主页放在homepage目录中，分成各个部分，分别是引入的css、js库，头版，作品集，关于，联系，脚注，版权等部分，其代码如下所示：

<%@ page language="java" contentType="text/html; charset=utf-8"
  pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<jsp:include page="../includes/beginning.jsp" flush="true" />
</head>
<body id="page-top">
  <jsp:include page="../includes/topFront.jsp" flush="true" />
  <jsp:include page="masthead.jsp" flush="true" />
  <jsp:include page="portfolio.jsp" flush="true" />
  <jsp:include page="about.jsp" flush="true" />
  <jsp:include page="contact.jsp" flush="true" />
  <jsp:include page="portfolioModal.jsp" flush="true" />
  <jsp:include page="../includes/scrollToTop.jsp" flush="true" />
  <jsp:include page="../includes/footer.jsp" flush="true" />
  <jsp:include page="../includes/copyright.jsp" flush="true" />

  <script type="text/javascript"
    src="${pageContext.request.contextPath}/js/curie/jqBootstrapValidation.js"></script>
  <script type="text/javascript"
    src="${pageContext.request.contextPath}/js/curie/contact.js"></script>
  <script type="text/javascript"
    src="${pageContext.request.contextPath}/js/curie/freelancer.js"></script>
</body>
</html>

/includes/beginning.jsp

主要作用是引入的css、js库，用来放在所有前台页面的前面，其代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 引入 Bootstrap -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/js/bootstrap-4.3.1/css/bootstrap.min.css"></link>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/glyphicon.css"></link>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/bootstrap-4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/bootstrap-4.3.1/dependencies/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/bootstrap-4.3.1/dependencies/popper-1.14.7.min.js"></script>
<!-- 引入DataTables -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/js/datatables.min.css"></link>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/datatables.min.js"></script>
<!-- 引入fontawesome图标库 -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/js/fontawesome-free-5.10.2-web/css/all.min.css"></link>
<!-- 引入datetimepicker -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"></link>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<!-- 自己编写的清空表单数据的js函数 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/cleanMyForm.js"></script>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/curie.css"></link>

/includes/topFront.jsp

顶部的菜单栏，采用nav navbar标记来进行布局处理，其代码如下所示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
  String help = java.util.ResourceBundle.getBundle("Messages")
          .getString("Navigation.help");
%>
<%
  String toggleLeft = java.util.ResourceBundle.getBundle("Messages")
          .getString("Navigation.toggle.left");
%>
<!-- .navbar -->
<nav
  class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top"
  id="mainNav">
  <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="https://blog.csdn.net/ZhangCurie"><i
    class="fa fa-home"></i>&nbsp;<s:text name="Application.logoAdmin" /></a>
    <button
      class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded"
      type="button" data-toggle="collapse"
      data-target="#navbarResponsive" aria-controls="navbarResponsive"
      aria-expanded="false" aria-label="Toggle navigation">
      Menu <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item mx-0 mx-lg-1"><a
          class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
          href="${pageContext.request.contextPath}/admin/examinee/index"><i class="fa fa-user"></i> <s:text
              name="Navigation.left.examinee" /></a></li>
        <li class="nav-item mx-0 mx-lg-1"><a
          class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
          href="${pageContext.request.contextPath}/admin/countyDistrict/index"><i class="fa fa-id-card"></i> <s:text
              name="Navigation.left.countyDistrict" /></a></li>
        <li class="nav-item mx-0 mx-lg-1"><a
          class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
          href="${pageContext.request.contextPath}/admin/discipline/index"><i class="fa fa-id-card"></i> <s:text
              name="Navigation.left.countyDistrict" /></a></li>
      </ul>
      <!-- .navbar-right -->
      <ul class="nav navbar-nav navbar-right" style="float: right;">
        <li>
          <div class="btn-group">
            <a data-toggle="modal" data-original-title="<%=help%>"
              data-placement="bottom" class="btn btn-success btn-sm"
              href="#helpModal"> <i class="fa fa-question"></i>
            </a> <a data-toggle="modal" data-original-title="<%=help%>"
              data-placement="bottom" class="btn btn-warning btn-sm"
              href="#helpModal"> <i class="fa fa-question"></i>
            </a>&nbsp;
          </div>
        </li>
        <li>
          <div class="btn-group">
            <a data-placement="bottom"
              data-original-title="<%=toggleLeft%>"
              data-toggle="tooltip" class="btn btn-primary btn-sm"
              id="menu-toggle"> <i class="fa fa-bars"></i>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- /.navbar -->

注：里面有键值串，换成对应的文本即可，也可以在Messages.properties中定义，下面会给出其定义的。

masthead.jsp

这是头版，主要突出显示关键信息，其代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!-- Masthead -->
<header class="masthead bg-primary text-white text-center">
  <div class="container d-flex align-items-center flex-column">

    <!-- MastheadAvatarImage -->
    <img class="masthead-avatar mb-5"
      src="${pageContext.request.contextPath}/img/avataaars.svg" alt="">

    <!-- MastheadHeading -->
    <h1 class="masthead-heading text-uppercase mb-0">
      <s:text name="Homepage.masthead.title" />
    </h1>

    <!-- IconDivider -->
    <div class="divider-custom divider-light">
      <div class="divider-custom-line"></div>
      <div class="divider-custom-icon">
        <i class="fas fa-star"></i>
      </div>
      <div class="divider-custom-line"></div>
    </div>

    <!-- MastheadSubheading -->
    <p class="masthead-subheading font-weight-light mb-0">
      <s:text name="Homepage.masthead.text" />
    </p>

  </div>
</header>

portfolio.jsp

略

about.jsp

略

contact.jsp

略

portfolioModal.jsp

模态框的显示，很容易实现，将helpModal改造一下即可，略

/includes/footer.jsp

页面底部信息，代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
	String copyright = java.util.ResourceBundle.getBundle("Messages").getString("Footer.copyright");
%>
<!-- Footer -->
<footer class="footer text-center border-top border-white">
	<div class="container">
		<div class="row">

			<!-- Footer1 -->
			<div class="col-lg-4 mb-5 mb-lg-0">
				<h4 class="text-uppercase mb-4">
					<s:text name="Footer.section.1.heading" />
				</h4>
				<p class="lead mb-0">
					<s:text name="Footer.section.1.content" />
				</p>
			</div>

			<!-- Footer2 -->
			<div class="col-lg-4 mb-5 mb-lg-0">
				<h4 class="text-uppercase mb-4">
					<s:text name="Footer.section.2.heading" />
				</h4>
				<a class="btn btn-outline-light btn-social mx-1" href="#"> <i
					class="fab fa-fw fa-facebook-f"></i>
				</a> <a class="btn btn-outline-light btn-social mx-1" href="#"> <i
					class="fab fa-fw fa-twitter"></i>
				</a> <a class="btn btn-outline-light btn-social mx-1" href="#"> <i
					class="fab fa-fw fa-linkedin-in"></i>
				</a> <a class="btn btn-outline-light btn-social mx-1" href="#"> <i
					class="fab fa-fw fa-dribbble"></i>
				</a>
			</div>

			<!-- Footer3 -->
			<div class="col-lg-4">
				<h4 class="text-uppercase mb-4">
					<s:text name="Footer.section.3.heading" />
				</h4>
				<p class="lead mb-0">
					<s:text name="Footer.section.3.content" />
				</p>
			</div>

		</div>
	</div>
</footer>

/includes/copyright.jsp

版权信息，代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String copyright = java.util.ResourceBundle.getBundle("Messages").getString("Footer.copyright");
%>
<!-- Copyright -->
<section class="copyright py-4 text-center text-white">
	<div class="container">
		<small><%=copyright%></small>
	</div>
</section>

Messages.properties

代码中的键值对，需要在Messages.properties中定义，代码如下所示：

#################### application ######################
# change
Application.name=
Application.package=cn.lut.curiezhang
Application.path.package=cn/lut/curiezhang/
Application.path.java=src/main/java/
Application.path.resources=src/main/resources/
Application.path.webapp=src/main/webapp/
# change
Application.logo=Curie
Application.null=NULL
Application.type.0=\u6574\u4E2A\u5E73\u53F0
Application.type.1=\u5B66\u751F
Application.type.2=\u9662\u6821
Application.type.3=\u8003\u70B9
Application.type.4=\u7BA1\u7406\u673A\u6784
Application.type.others=\u5176\u4ED6
# change logo
Application.logoAdmin=Curie
# change layout width
Layout.leftNavigation=250px
Layout.indexOperation.1=60px
Layout.indexOperation.3=210px
# login
Application.sessionName=userSession
Application.loginTime=loginTime
# session interval (minutes)
Application.sessionStudentInterval=10
Application.sessionAdminInterval=60
# image validation code length
Application.image.codeLength=4
#################### /application ######################
#################### homepage ######################
Homepage.masthead.title=\u5F00\u59CBCurieMIS
Homepage.masthead.heading=\u6B22\u8FCE\u4F7F\u7528CurieMIS\u7CFB\u7EDF
Homepage.masthead.subheading=\u7CFB\u7EDF\u529F\u80FD\u5F3A\u5927\u3001\u754C\u9762\u53CB\u597D
Homepage.masthead.text=\u7CFB\u7EDF\u529F\u80FD\u5F3A\u5927\u3001\u754C\u9762\u53CB\u597D
Homepage.portfolio.title=\u4F5C\u54C1\u96C6
Homepage.portfolio.modal.1.title=Java\u7F16\u7A0B
Homepage.portfolio.modal.1.text=\u975E\u5E38\u6D41\u884C\u7684\u7A0B\u5E8F\u8BBE\u8BA1\u8BED\u8A00
Homepage.portfolio.modal.2.title=JavaScript\u7F16\u7A0B
Homepage.portfolio.modal.2.text=\u975E\u5E38\u6D41\u884C\u7684\u7A0B\u5E8F\u8BBE\u8BA1\u8BED\u8A00
Homepage.portfolio.modal.3.title=Python\u7F16\u7A0B
Homepage.portfolio.modal.3.text=\u975E\u5E38\u6D41\u884C\u7684\u7A0B\u5E8F\u8BBE\u8BA1\u8BED\u8A00
Homepage.portfolio.modal.4.title=C++\u7F16\u7A0B
Homepage.portfolio.modal.4.text=\u975E\u5E38\u6D41\u884C\u7684\u7A0B\u5E8F\u8BBE\u8BA1\u8BED\u8A00
Homepage.portfolio.modal.5.title=C#\u7F16\u7A0B
Homepage.portfolio.modal.5.text=\u975E\u5E38\u6D41\u884C\u7684\u7A0B\u5E8F\u8BBE\u8BA1\u8BED\u8A00
Homepage.portfolio.modal.6.title=SQL\u7F16\u7A0B
Homepage.portfolio.modal.6.text=\u975E\u5E38\u6D41\u884C\u7684\u7A0B\u5E8F\u8BBE\u8BA1\u8BED\u8A00
Homepage.about.title=\u5173\u4E8E
Homepage.about.text.1=\u6211\u5728\u9662\u6821\u5DE5\u4F5C
Homepage.about.text.2=\u4E3B\u8981\u7814\u7A76\u8F6F\u4EF6\u5F00\u53D1\u6280\u672F
Homepage.contact.title=\u8054\u7CFB\u6211
Homepage.contact.name=\u59D3\u540D
Homepage.contact.email=\u7535\u5B50\u90AE\u4EF6
Homepage.contact.phone=\u7535\u8BDD
Homepage.contact.message=\u7559\u8A00
Homepage.contact.name.prompt=\u59D3\u540D
Homepage.contact.email.prompt=\u7535\u5B50\u90AE\u4EF6
Homepage.contact.phone.prompt=\u7535\u8BDD
Homepage.contact.message.prompt=\u7559\u8A00
Homepage.contact.name.validationRequiredMessage=\u8BF7\u8F93\u5165\u59D3\u540D
Homepage.contact.email.validationRequiredMessage=\u8BF7\u8F93\u5165\u7535\u5B50\u90AE\u4EF6
Homepage.contact.phone.validationRequiredMessage=\u8BF7\u8F93\u5165\u7535\u8BDD\u53F7\u7801
Homepage.contact.message.validationRequiredMessage=\u8BF7\u7559\u8A00
#################### /homepage ######################
#################### admin.top ######################
# change
Application.logoAdmin=Curie
Navigation.toggle=\u5BFC\u822A\u5207\u6362
Navigation.fullScreen=\u5168\u5C4F
Navigation.help=\u5E2E\u52A9
Navigation.logout=\u6CE8\u9500
Navigation.toggle.left=\u663E\u793A / \u9690\u85CF\u5DE6\u8FB9\u680F
Navigation.toggle.right=\u663E\u793A / \u9690\u85CF\u53F3\u8FB9\u680F
Navigation.search.prompt=\u5373\u65F6\u641C\u7D22 \u30FB\u30FB\u30FB
#################### /admin.top ######################
#################### admin ######################
# change
Admin.page.title=\u7BA1\u7406\u9875\u9762
#################### /admin ######################
#################### navigation ######################
# change
Navigation.application.homepage=CodeGenerator4SSH
Navigation.application.href=/cg4ssh/
# change
Navigation.admin.homepage=\u540E\u53F0\u7BA1\u7406
Navigation.admin.href=/cg4ssh/admin/index
Navigation.help=\u5E2E\u52A9
### cg4ssh.navigation.left ###
Navigation.left.users=\u7BA1\u7406\u7528\u6237\u4FE1\u606F
Navigation.left.discipline=\u7BA1\u7406\u79D1\u76EE\u4FE1\u606F
Navigation.left.countyDistrict=\u7BA1\u7406\u53BF\u533A\u4FE1\u606F
Navigation.left.examinee=\u7BA1\u7406\u8003\u751F\u4FE1\u606F
Navigation.left.userLog=\u7BA1\u7406\u7528\u6237\u65E5\u5FD7
Navigation.left.log=\u7BA1\u7406\u7528\u6237\u65E5\u5FD7
Navigation.left.log.ALL=\u5168\u90E8\u65E5\u5FD7
Navigation.left.log.login=\u767B\u5F55\u65E5\u5FD7
Navigation.left.log.delete=\u5220\u9664\u65E5\u5FD7
Navigation.left.log.update=\u4FEE\u6539\u65E5\u5FD7
Navigation.left.log.insert=\u6DFB\u52A0\u65E5\u5FD7
Navigation.left.title.0=
Navigation.left.title.1=
Navigation.left.title.2=
Navigation.left.title.3=
Navigation.left.title.4=
### /cg4ssh.navigation.left ###
#################### /navigation ######################
#################### footer ######################
# change
Footer.copyright=2019 &copy; \u5F20\u805A\u793C
Footer.section.1.heading=\u8054\u7CFB
Footer.section.1.content=\u5170\u5DDE\u7406\u5DE5\u5927\u5B66\u8BA1\u7B97\u673A\u4E0E\u901A\u4FE1\u5B66\u9662<br/>730050<br/>2222222
Footer.section.2.heading=\u793E\u4EA4
Footer.section.2.content=
Footer.section.3.heading=\u5173\u4E8E
Footer.section.3.content=\u8FD9\u662F\u4E00\u4E2A\u57FA\u4E8ESSH\u6846\u67B6\u96C6\u6210\u6280\u672F\u7684\u4FE1\u606F\u7BA1\u7406\u7CFB\u7EDF\u751F\u6210\u5668\uFF0C\u53EF\u4EE5\u5F88\u65B9\u4FBF\u5730\u751F\u6210\u8981\u5904\u7406\u7684\u4FE1\u606F\uFF0C\u81EA\u52A8\u521B\u5EFA\u5185\u5BB9\uFF01
#################### /footer ######################
#################### DataTables ######################
DataTables.title.operate=\u64CD\u4F5C
DataTables.title.browse=\u6D4F\u89C8
DataTables.title.modify=\u4FEE\u6539
DataTables.title.delete=\u5220\u9664
#################### /DataTables ######################
#################### button ######################
Button.help.close=\u5173\u95ED
Button.delete=\u5220\u9664
Button.cancel=\u53D6\u6D88
Button.close=\u5173\u95ED
Button.freeDownload=\u514D\u8D39\u4E0B\u8F7D
Button.send=\u53D1\u9001
#################### /button ######################

css

将前台页面用到的设置放在curie.css中，代码如下：

:root { -
  -blue: #007bff; -
  -indigo: #6610f2; -
  -purple: #6f42c1; -
  -pink: #e83e8c; -
  -red: #dc3545; -
  -orange: #fd7e14; -
  -yellow: #ffc107; -
  -green: #28a745; -
  -teal: #1abc9c; -
  -cyan: #17a2b8; -
  -white: #fff; -
  -gray: #6c757d; -
  -gray-dark: #343a40; -
  -primary: #1abc9c; -
  -secondary: #2c3e50; -
  -success: #28a745; -
  -info: #17a2b8; -
  -warning: #ffc107; -
  -danger: #dc3545; -
  -light: #f8f9fa; -
  -dark: #343a40; -
  -breakpoint-xs: 0; -
  -breakpoint-sm: 576px; -
  -breakpoint-md: 768px; -
  -breakpoint-lg: 992px; -
  -breakpoint-xl: 1200px; -
  -font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji"; -
  -font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

.footer {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: #2c3e50;
  color: #fff;
}

.copyright {
  background-color: #1a252f;
}

.btn-xl {
  padding: 1rem 1.75rem;
  font-size: 1.25rem;
}

.btn-social {
  border-radius: 100%;
  display: inline-flex;
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.25rem;
  justify-content: center;
  align-items: center;
}

/* contactSection */
.floating-label-form-group {
  position: relative;
  border-bottom: 1px solid #e9ecef;
}

.floating-label-form-group input, .floating-label-form-group textarea {
  font-size: 1.5em;
  position: relative;
  z-index: 1;
  padding-right: 0;
  padding-left: 0;
  resize: none;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none !important;
}

.floating-label-form-group label {
  font-size: 0.85em;
  line-height: 1.764705882em;
  position: relative;
  z-index: 0;
  top: 2em;
  display: block;
  margin: 0;
  transition: top 0.3s ease, opacity 0.3s ease;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
}

.floating-label-form-group
:not
 
(
:first-child
 
)
{
padding-left
:
 
14
px
;

  
border-left
:
 
1
px
 
solid
 
#e9ecef
;


}
.floating-label-form-group-with-value label {
  top: 0;
  opacity: 1;
}

.floating-label-form-group-with-focus label {
  color: #1abc9c;
}

form .row:first-child .floating-label-form-group {
  border-top: 1px solid #e9ecef;
}
/* /contactSection */

/* portfolioSection */
.portfolio {
  margin-bottom: -30px;
}

.portfolio .portfolio-item {
  cursor: pointer;
  position: relative;
  display: block;
  max-width: 25rem;
  margin-bottom: 30px;
  border-radius: 0.5rem;
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-item-caption {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  background-color: rgba(26, 188, 156, 0.9);
}

.portfolio .portfolio-item .portfolio-item-caption:hover {
  opacity: 1;
}

.portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content
  {
  font-size: 1.5rem;
}

.portfolio-modal .portfolio-modal-title {
  font-size: 2.25rem;
  line-height: 2rem;
}

@media ( min-width : 992px) {
  .portfolio-modal .portfolio-modal-title {
    font-size: 3rem;
    line-height: 2.5rem;
  }
}

.portfolio-modal .close {
  position: absolute;
  z-index: 1;
  right: 1.5rem;
  top: 1rem;
  font-size: 3rem;
  line-height: 3rem;
  color: #1abc9c;
  opacity: 1;
}
/* portfolioSection */

/* scrollToTop */
.scroll-to-top {
  z-index: 1042;
  right: 1rem;
  bottom: 1rem;
  display: none;
}

.scroll-to-top a {
  width: 3.5rem;
  height: 3.5rem;
  background-color: rgba(33, 37, 41, 0.5);
  line-height: 3.1rem;
}
/* /scrollToTop */

/* mainNavigation */
#mainNav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  font-weight: 700;
}

#mainNav .navbar-brand {
  color: #fff;
}

#mainNav .navbar-nav {
  margin-top: 1rem;
}

#mainNav .navbar-nav li.nav-item a.nav-link {
  color: #fff;
}

#mainNav .navbar-nav li.nav-item a.nav-link:hover {
  color: #1abc9c;
}

#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus
  {
  color: #fff;
}

#mainNav .navbar-nav li.nav-item a.nav-link.active {
  color: #1abc9c;
}

#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.8rem;
}

@media ( min-width : 992px) {
  #mainNav {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    transition: padding-top 0.3s, padding-bottom 0.3s;
  }
  #mainNav .navbar-brand {
    font-size: 1.75em;
    transition: font-size 0.3s;
  }
  #mainNav .navbar-nav {
    margin-top: 0;
  }
  #mainNav .navbar-nav>li.nav-item>a.nav-link.active {
    color: #fff;
    background: #1abc9c;
  }
  #mainNav .navbar-nav>li.nav-item>a.nav-link.active:active, #mainNav .navbar-nav>li.nav-item>a.nav-link.active:focus,
    #mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover {
    color: #fff;
    background: #1abc9c;
  }
  #mainNav.navbar-shrink {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.5em;
  }
}
/* /mainNavigation */

/* mastheadSection */
.masthead {
  padding-top: calc(6rem + 74px);
  padding-bottom: 6rem;
}

.masthead .masthead-heading {
  font-size: 2.75rem;
  line-height: 2.75rem;
}

.masthead .masthead-subheading {
  font-size: 1.25rem;
}

.masthead .masthead-avatar {
  width: 15rem;
}

@media ( min-width : 992px) {
  .masthead {
    padding-top: calc(6rem + 104px);
    padding-bottom: 6rem;
  }
  .masthead .masthead-heading {
    font-size: 4rem;
    line-height: 3.5rem;
  }
  .masthead .masthead-subheading {
    font-size: 1.5rem;
  }
}
/* /mastheadSection */

/* dividerCustom */
.divider-custom {
  margin: 1.25rem 0 1.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.divider-custom .divider-custom-line {
  width: 100%;
  max-width: 7rem;
  height: 0.25rem;
  background-color: #2c3e50;
  border-radius: 1rem;
  border-color: #2c3e50 !important;
}

.divider-custom .divider-custom-line:first-child {
  margin-right: 1rem;
}

.divider-custom .divider-custom-line:last-child {
  margin-left: 1rem;
}

.divider-custom .divider-custom-icon {
  color: #2c3e50 !important;
  font-size: 2rem;
}

.divider-custom.divider-light .divider-custom-line {
  background-color: #fff;
}

.divider-custom.divider-light .divider-custom-icon {
  color: #fff !important;
}
/* /dividerCustom */

/* pageSection */
.page-section {
  padding: 6rem 0;
}

.page-section .page-section-heading {
  font-size: 2.25rem;
  line-height: 2rem;
}

@media ( min-width : 992px) {
  .page-section .page-section-heading {
    font-size: 3rem;
    line-height: 2.5rem;
  }
}
/* /pageSection */

/* backgroundColor */
.bg-primary {
  background-color: #1abc9c !important;
}

a.bg-primary:hover, a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus
  {
  background-color: #148f77 !important;
}

.bg-secondary {
  background-color: #2c3e50 !important;
}

a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover,
  button.bg-secondary:focus {
  background-color: #1a252f !important;
}

.bg-success {
  background-color: #28a745 !important;
}

a.bg-success:hover, a.bg-success:focus, button.bg-success:hover, button.bg-success:focus
  {
  background-color: #1e7e34 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

a.bg-info:hover, a.bg-info:focus, button.bg-info:hover, button.bg-info:focus
  {
  background-color: #117a8b !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

a.bg-warning:hover, a.bg-warning:focus, button.bg-warning:hover, button.bg-warning:focus
  {
  background-color: #d39e00 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

a.bg-danger:hover, a.bg-danger:focus, button.bg-danger:hover, button.bg-danger:focus
  {
  background-color: #bd2130 !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

a.bg-light:hover, a.bg-light:focus, button.bg-light:hover, button.bg-light:focus
  {
  background-color: #dae0e5 !important;
}

.bg-dark {
  background-color: #343a40 !important;
}

a.bg-dark:hover, a.bg-dark:focus, button.bg-dark:hover, button.bg-dark:focus
  {
  background-color: #1d2124 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}
/* /backgroundColor */

这样，关于如何制作主页就基本完成了，当然，其他的细节需要自己去补充，没有太大的影响，但是，会影响界面完整度。
你也可以从网上找一个模板，改造以匹配你的项目即可，这样很方便，但要很好地匹配也并不容易，需要花时间去调整，同样很麻烦的。

ZhangCurie

发布了42 篇原创文章 · 获赞 15 · 访问量 5857

私信关注

一步一步做项目（23）制作主页

一步一步做项目（23）制作主页

布局

主页

/includes/beginning.jsp

/includes/topFront.jsp

masthead.jsp

portfolio.jsp

about.jsp

contact.jsp

portfolioModal.jsp

/includes/footer.jsp

/includes/copyright.jsp

Messages.properties

css

猜你喜欢