Diary（二）——后台主界面搭建（上）

最新推荐文章于 2020-07-03 10:15:44 发布
最新推荐文章于 2020-07-03 10:15:44 发布
阅读量579 收藏 2
点赞数
分类专栏： ● Jsp和Servlet动态网页 ------【日记本系统】 文章标签： Bootstrap 后台主页面 流式布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37084904/article/details/95617020
版权

目录

 

1.Bootstrap的导航栏

2.页面的流式布局（支持响应式）:

3. main.jsp完整代码：

1.Bootstrap的导航栏

首先写一下导航栏:

<!-- 反色的导航条，且固定在顶部 -->
<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
      <!-- 设置容器，内容都写在这里面 -->
        <div class="container">
        <!-- brand是标题 -->
          <a class="brand" href="#">屌丝的日记本</a>
          <!-- nav-collapse是设置响应式的导航条 -->
          <div class="nav-collapse collapse">
          <!-- nav是设置导航标签 -->
            <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>
          <!-- 搜索表单 -->
          <!-- 导航栏内的表单，用navbar-form进行样式化，pull-right是设置居右显示 -->
          <form name="myForm" class="navbar-form pull-right" method="post" action="">
	  		<input class="span2" id="s_title" name="s_title"  type="text" style="margin-top:5px;height:30px;" placeholder="往事如烟...">
	  		<button type="submit" class="btn" onkeydown="if(event.keyCode==13) myForm.submit()"><i class="icon-search"></i>&nbsp;搜索日志</button>
		  </form>
        </div>
      </div>
</div>

效果：

注意：

这里需要导入两个jar包 ，分别是jstl.jar和standard.jar；

 

2.页面的流式布局（支持响应式）:

<!-- 布局采用流式布局容器即row-fluid，且每一行都是12个栅格 -->
<div class="container">
	<div class="row-fluid">
	
		<div class="span9">
			<div class="data_list">
				<div class="data_list_title">
					<img src="${pageContext.request.contextPath}/images/list_icon.png"/>
					日记列表
				</div>
			</div>
		</div>
		
		<div class="span3">
			<div class="data_list">
				<div class="data_list_title">
					<img src="${pageContext.request.contextPath}/images/user_icon.png"/>
					个人中心
				</div>
			</div>
			
			<div class="data_list">
				<div class="data_list_title">
					<img src="${pageContext.request.contextPath}/images/byType_icon.png"/>
					按日志类别
				</div>
			</div>
			
			<div class="data_list">
				<div class="data_list_title">
					<img src="${pageContext.request.contextPath}/images/byDate_icon.png"/>
					按日志日期
				</div>
			</div>
		</div>
		
	</div>
</div>

效果：

 

3. main.jsp完整代码：

main.jsp：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人日记本主页</title>
<link href="${pageContext.request.contextPath}/style/diary.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/bootstrap/js/jQuery.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
<!-- 将布局与导航栏分离开来，避免重叠 -->
<style type="text/css">
	  body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
</style>
</head>
<body>
<!-- 反色的导航条，且固定在顶部 -->
<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
      <!-- 设置容器，内容都写在这里面 -->
        <div class="container">
        <!-- brand是标题 -->
          <a class="brand" href="#">屌丝的日记本</a>
          <!-- nav-collapse是设置响应式的导航条 -->
          <div class="nav-collapse collapse">
          <!-- nav是设置导航标签 -->
            <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>
          <!-- 搜索表单 -->
          <!-- 导航栏内的表单，用navbar-form进行样式化，pull-right是设置居右显示 -->
          <form name="myForm" class="navbar-form pull-right" method="post" action="">
	  		<input class="span2" id="s_title" name="s_title"  type="text" style="margin-top:5px;height:30px;" placeholder="往事如烟...">
	  		<button type="submit" class="btn" onkeydown="if(event.keyCode==13) myForm.submit()"><i class="icon-search"></i>&nbsp;搜索日志</button>
		  </form>
        </div>
      </div>
</div>

<!-- 布局采用流式布局容器即row-fluid，且每一行都是12个栅格 -->
<div class="container">
	<div class="row-fluid">
	
		<div class="span9">
			<div class="data_list">
				<div class="data_list_title">
					<img src="${pageContext.request.contextPath}/images/list_icon.png"/>
					日记列表
				</div>
			</div>
		</div>
		
		<div class="span3">
			<div class="data_list">
				<div class="data_list_title">
					<img src="${pageContext.request.contextPath}/images/user_icon.png"/>
					个人中心
				</div>
			</div>
			
			<div class="data_list">
				<div class="data_list_title">
					<img src="${pageContext.request.contextPath}/images/byType_icon.png"/>
					按日志类别
				</div>
			</div>
			
			<div class="data_list">
				<div class="data_list_title">
					<img src="${pageContext.request.contextPath}/images/byDate_icon.png"/>
					按日志日期
				</div>
			</div>
		</div>
		
	</div>
</div>
</body>
</html>

样式文件diary.css：

.data_list{
	border: 1px solid #E5E5E5;
	padding: 10px;
	background-color: #FDFDFD;
	margin-top: 15px;
}

.data_list .data_list_title{
	font-size: 15px;
	font-weight: bold;
	border-bottom: 1px solid #E5E5E5;
	padding-bottom: 10px;
	padding-top: 5px;
}

.data_list .data_list_title img{
	vertical-align: top;
}

 

 

程序员的时光
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web-页面常见后台布局
09-09
web-页面后台布局,提供简单的布局代码示例，使用display:flex简洁的布局语法实现。目前，display:flex已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
java_diary.rar_Diary
09-20
标题中的"java_diary.rar_Diary"表明这是一个使用Java编程语言实现的日历应用程序，它被压缩在名为"java_diary.rar"的RAR文件中。这个日历程序可能包含了一些基本的日历功能，如查看日期、添加事件、记录日记等。 ...
Diary（二）——后台主界面搭建（下）
程序员的时光
07-13 585
目录 1.mainPage的处理； 2.用户请求过滤功能； 1.mainPage的处理； 这里我们要把主页面的“日志列表”这一块要做处理； 由于每个日志列表的主页面显示的内容不一样，我们可以将日志列表这一块单独拿出来； 我们再写一个MainServlet来接受请求，将所得到的mainPage请求与diaryList相关联起来； package com.ja...
Android APP开发 Diary 设计篇
kevin_xu_v的专栏
01-05 734
看完android开发入门之后，自己就想开发一个简单的APP练手，那肯定这个APP是一个简单的APP，限于能力和人力，所以就想到了diary，现代生活，纸质生活可能会一去不复返，替代的就是电子版，电子书，电子报等等，那自然而然的要有一个电子笔记本取代我们传统的纸质笔记本，而且手机移动终端的便携性，也非常适合在移动终端上开发一个日记本的APP，很方便大众使用。 Diary 顾名思义，就是日记本，当
流式布局管理
sun_Hmtl的博客
09-26 351
刚刚写了一下AWT的方式布局管理器的代码 现在简单上传一下  代码可以用在任何布局管理器上   只要简单的set 一下就可以了 public class FlowLayoutDemo { private Panel panel; private Button bt1,bt2,bt3; public FlowLayoutDemo() {
Bootstrap引入、日期插件引入、ckeditor编辑器引入
qq_34721292的博客
04-20 671
<!-- Bootstrap引入 --> <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="${pageContext.request.contextPath}/bootstrap/css/bootstr...
diary_Diary_Vc_
09-29
标题中的"diary_Diary_Vc_"揭示了这是一个使用Visual C++（简称VC++）编程语言开发的日记本应用程序。这个程序不仅具备基本的日记记录功能，还带有数据库支持，能够帮助用户存储和检索历史日记。"Vc"标签进一步确认...
Diario_Diary_
10-03
- `FrmDiario.frx`是窗体的资源文件，包含了窗体上控件的位置、大小、属性等信息，这些都是不可读的二进制数据。 7. **项目结构**： - 这个项目的结构很可能包括一个主窗体（FrmDiario.frm）作为入口点，用户在此...
xinqingriji.rar_Diary
09-21
此日记本程式内核是JR Diary Ver 020201，我美化了界面，请您要保留我主页的连接，谢谢！ 功能： 1 日记主人修改 2 在线添加 3 在线删除 4 可以设定每页显示日记数 5 可设定日记是否公开 6 可设定是否不经登陆就...
Bug Hunter Diary_Exploit_Diary_assembly_
10-01
《Bug Hunter Diary_Exploit_Diary_assembly_》是一个关于漏洞利用开发的主题，结合了“Exploit Diary”和“assembly”两个关键概念，暗示着本书将深入探讨使用汇编语言进行漏洞挖掘与利用的技术。在IT安全领域，...
web前端-Bootstrop框架
weixin_44142032的博客
03-05 347
Bootstrap的作用 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 什么是响应式布局 响应式布局就是根据分辨率的大小而改变页面的结构内容，提高用户的体验 Bootstrap的内容 简单入门：使用框架必须导入相应的css、js文件 jquery-1.11.2...
bootstrap中外层div盒子的class设置为"container"和设置为"container-fluid"的区别
热门推荐
Java从入门到放弃
05-20 3万+
直接正文 一句话概括：在bootstrap中，规定了每一行都被分为了固定的12个栅栏，每一个栅栏都有自己的宽度。如果你的div用了container的样式，那么它的宽度最大也打不过12个栅栏一共的最大宽度。而，当你的div用了container-fluid的样式，它会无视12个栅栏的规定，根据屏幕自动适应自动填充。(当然，宽度要设置为width:100%)，下面用例子说明。 当&amp;l...
Bootstrap 帮助文档（2）
南瓜不说话
12-08 956
脚手架 Bootstrap建立在12列栅格系统、布局、组件之上。 全局设置 必须使用HTML5文档类型 Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。 lang="en"> ... 排版和链接 Bootstrap 为屏幕、排版和链接设置了基本的全局样
如何引入外部资源文件css,js之类，以引入boostrap文件为例
qq_43766720的博客
04-17 1114
引入外部资源文件 路径分类 1.相对路径：通过相对路径不可以确定唯一资源 *如: ./index. html *特点：不以/开头，以.开头路径 *规则:找到当前资源和目标资源之间的相对位資关系 ./ :当前目录 ../:后退一-级目录 2.绝对路径:通过绝对路径可以确定唯一资源 （推荐使用） *如: http://localhost:63342/Demo/inde...
Tomcat下载
程序员的时光
08-18 3391
目录 1. 打开官网； 2. 下载最新版本Tomcat9; 3.选择.zip格式的下载； 1. 打开官网； http://tomcat.apache.org/ 2. 下载最新版本Tomcat9; 点击左边的Download，点击Tomcat9； 3.选择.zip格式的下载； 注意有zip和exe两种格式的： zip（64-bit W...
eclipse项目中缺包问题
程序员的时光
08-05 3365
今天重新装了tomcat服务器后，出现以下状况，所有的jar包全部缺失 点开一看，各种jar包都不见了； 解决方法： 重新导入jre运行环境的选项！ 第1步： 第2步： 第3步： 第4步： 第5步： 第6步： 第7步： 点击确定就行了！问题解决！ ...
IDEA创建tomcat项目出现错误：not found for the web module解决方案
程序员的时光
07-03 2748
很简单，我们把项目从Tomcat移出来，再重新移进去，重新编译即可！ 就是这里，把项目重新Remove和Add即可解决！！！
Student（3）——查询所有班级信息（上）
程序员的时光
10-08 2242
目录 1.将后台主页完善； 2. easyui-datagrid表格引入； 3.model层，写班级实体； 4. web层，写班级的Servlet； ​​​​​​​ 1.将后台主页完善； main.jsp页面代码： 主要还有一个session权限验证； <%@ page contentType="text/html;charset=UTF-8" languag...
matlab diary
最新发布
08-05
请注意，diary命令只能记录命令行窗口的输入和输出，而不能记录图形窗口的操作或其他界面元素。此外，如果在MATLAB脚本中使用diary命令，则日志记录将包括脚本中的所有输出。 希望这个回答对你有帮助！如果你还有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值