【日记本系统】5–首页展示1

2016-12-16 08:40    474人浏览    标签:,     

首页主要是展示自己写的日记

然后给日志分类,大体的模块样式是这样的。

blob.png

这里的布局主要用到的是Bootstrap框架的布局

blob.png

左边9格右边3格.导航条固定在顶部,并嵌入一个搜索栏

具体看bootstrap官网:http://www.bootcss.com/

首页主要body内容:

index.jsp

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">日记本系统</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#"><i class="icon-home"></i>&nbsp;主页</a></li>
              <li class="active"><a href="#"><i class="icon-pencil"></i>&nbsp;写日记</a></li>
              <li class="active"><a href="#"><i class="icon-book"></i>&nbsp;日记分类管理</a></li>
              <li class="active"><a href="#"><i class="icon-user"></i>&nbsp;个人中心</a></li>
            </ul>
          </div>
          <form name="myForm" class="navbar-form pull-right" method="post" action="main?all=true">
			  <input class="span2" id="s_title" name="s_title"  type="text" style="margin-top:5px;height:30px;" placeholder="搜索内容...">
			  <button type="submit"><i class="icon-search"></i>&nbsp;搜索博客</button>
		  </form>
        </div>
      </div>
</div>
<div class="container">
	<div class="row-fluid">
		<div class="span9">
		</div>
		<div class="span3">
			<div class="data_list">
				<div class="data_list_title">
					<img src="${pageContext.request.contextPath}/style/images/user_icon.png"/>
					个人中心
				</div>
				<div class="user_image">
					<img src="style/images/${currentUser.imageName }"/>
				</div>
				<div class="nickName">${currentUser.nickName }</div>
				<div class="userSign">(${currentUser.mood })</div>
			</div>
			
			<div class="data_list">
				<div class="data_list_title">
					<img src="${pageContext.request.contextPath}/style/images/byType_icon.png"/>
					按日记类别
				</div>
				<div class="datas">
					<ul>
					</ul>
				</div>
			</div>
			
			<div class="data_list">
				<div class="data_list_title">
					<img src="${pageContext.request.contextPath}/style/images/byDate_icon.png"/>
					按日记日期
				</div>
				<div class="datas">
					<ul>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div style="text-align: center">版权所有 :<a href="http://www.javabb.cn">Javabb.cn</a></div>
</body>

index.jsp内容写好了后,直接运行工程项目会出错,修改项目的配置文件把项目的初始化页面改为login.jsp,然后运行。

blob.png

http://localhost:8080/Diary就可以直接跳到登陆页面,然后登陆。

相关文章

留言评论

评论已关闭。