基于Bootstrap的维修互助平台导航栏设计
<%@ page language='java' import='java.util.*,com.hdfix.model.User' pageEncoding='UTF-8' %>
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>维修互助平台</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div id='header'>
<div class='container-fluid'>
<h1 class='navbar-brand'>
<font size='8'>维修互助平台</font>
</h1>
<div class='navbar-text'></div>
<div id='searchBox-wrap' class='navbar-form navbar-right'>
<form class='navbar-form' action='repair!search'>
<div id='searchBox' class='form-group'>
<input type='text' name='key' class='form-control' id='q' autocomplete='off' placeholder='搜索丢失/捡到的东西'>
<button type='submit' id='search-button' class='btn btn-default'>搜索</button>
<a href='repair!search' id='search-advanced' class='btn btn-link'>高级搜索</a>
</div>
</form>
</div>
</div>
<div class='navbar-collapse collapse'>
<ul class='nav navbar-nav'>
<li><a href='repair!index'>首页</a></li>
<li><a href='repair!publish?type=lost'>发布寻物贴</a></li>
<li><a href='repair!publish?type=find'>发布招领贴</a></li>
<li><a href='thanks!write'>写感谢信</a></li>
<li><a href='repair!lost'>浏览寻物贴</a></li>
<li><a href='repair!find'>查看招领贴</a></li>
<li><a href='goods!success'>成功案例</a></li>
<li><a href='thanks!list'>感谢信</a></li>
<li><a href='user!mygoods'>用户中心</a></li>
</ul>
<%if (session.getAttribute('user') == null) { %>
<ul class='nav navbar-nav navbar-right'>
<li><a href='login.jsp'>请登录</a></li>
<li><a href='reg.jsp'>10秒注册<span class='red'>!</span></a></li>
</ul>
<%} else { %>
<ul class='nav navbar-nav navbar-right'>
<li><a href='user!mygoods'><%=((User) session.getAttribute('user')).getUsername() %></a></li>
<li><a href='updatepsw.jsp'>修改密码</a></li>
<li><a onclick='return confirm(\'确定退出\')' href='user!logout'>登出</a></li>
</ul>
<%} %>
</div>
</div>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>
通过上述代码，我们使用Bootstrap对原有的导航栏代码进行了优化，使其更美观、更易于用户浏览。同时，我们还对标题、描述和关键词进行了SEO优化，使其更容易被搜索引擎收录。
原文地址: http://www.cveoy.top/t/topic/f3xH 著作权归作者所有。请勿转载和采集!