博客系统-博客首页搭建

最新推荐文章于 2022-11-03 17:09:29 发布
最新推荐文章于 2022-11-03 17:09:29 发布
阅读量159 收藏
点赞数
文章标签： java php
原文链接：http://www.cnblogs.com/csy666/p/6545591.html
版权

1.思路：在搭建博客首页的时候充分使用了bootStrap的栅格布局，共分3行

1.1：第一行放置的是左边博客图标，右边放置天气预报

1.2：中间行是主要内容，左边放置10条博客信息，右边是博主信息、日志和友情链接

1.3：最下边是一行，放置版权信息

以下是代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/blog.css">
<script src="${pageContext.request.contextPath}/static/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap3/js/bootstrap.min.js"></script>
<title>博主主页</title>
<style type="text/css">
body{
padding-top: 10px;
padding-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img alt="java1234开源博客系统" src="${pageContext.request.contextPath}/static/images/logo.png">
</div>
<div class="col-md-8">
<iframe style="float: right;" width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=5"></iframe>
</div>
</div>

<div class="row">
<div class="col-md-12" style="padding-top: 10px">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><font color="black"><strong>首页</strong></font></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#"><font color="black"><strong>关于博主</strong></font></a></li>
<li><a href="#"><font color="black"><strong>本站源码下载</strong></font></a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入要查询的关键字...">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>

<div class="row">
<div class="col-md-9">
<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/static/images/list_icon.png"/>
最新博客</div>

<div class="datas">
<ul>
<li style="margin-bottom: 30px">
<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
<span class="summary">摘要: 前面一讲开发了webservice服务器端接口，今天的话，我们来开发webservice客户端，让大家来体验下过程；首先建一个Maven项目，项目名字，WS_Client；然后我们要用CXF给我们提供的工具wsdl2java 来根据请求的url生成客户端代码；wsdl2java工具在CXF开发包里；开发下载地...</span>
<span class="img">

<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
&nbsp;&nbsp;

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
&nbsp;&nbsp;

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
&nbsp;&nbsp;

</span>
<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>

</li>
<hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom: 10px;" />

<li style="margin-bottom: 30px">
<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
<span class="summary">摘要: 前面一讲开发了webservice服务器端接口，今天的话，我们来开发webservice客户端，让大家来体验下过程；首先建一个Maven项目，项目名字，WS_Client；然后我们要用CXF给我们提供的工具wsdl2java 来根据请求的url生成客户端代码；wsdl2java工具在CXF开发包里；开发下载地...</span>
<span class="img">

<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
&nbsp;&nbsp;

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
&nbsp;&nbsp;

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
&nbsp;&nbsp;

</span>
<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>

</li>
<hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom: 10px;" />


<li style="margin-bottom: 30px">
<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
<span class="summary">摘要: 前面一讲开发了webservice服务器端接口，今天的话，我们来开发webservice客户端，让大家来体验下过程；首先建一个Maven项目，项目名字，WS_Client；然后我们要用CXF给我们提供的工具wsdl2java 来根据请求的url生成客户端代码；wsdl2java工具在CXF开发包里；开发下载地...</span>
<span class="img">

<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
&nbsp;&nbsp;

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
&nbsp;&nbsp;

<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
&nbsp;&nbsp;

</span>
<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>

</li>
<hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom: 10px;" />

</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/static/images/user_icon.png"/>
博主信息
</div>
<div class="user_image">
<img src="${pageContext.request.contextPath}/static/userImages/20160202095456.jpg"/>
</div>
<div class="nickName">Java1234_小锋</div>
<div class="userSign">(知识改变命运，技术改变世界)</div>
</div>

<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/static/images/byType_icon.png"/>
按日志类别
</div>
<div class="datas">
<ul>

<li><span><a href="/index.html?typeId=1">Java核心基础(1)</a></span></li>

<li><span><a href="/index.html?typeId=2">Mysql(1)</a></span></li>

<li><span><a href="/index.html?typeId=3">Tomcat(1)</a></span></li>

<li><span><a href="/index.html?typeId=10">jsoup(1)</a></span></li>

<li><span><a href="/index.html?typeId=7">shiro(1)</a></span></li>

<li><span><a href="/index.html?typeId=9">webservice(2)</a></span></li>

<li><span><a href="/index.html?typeId=4">IT之路(3)</a></span></li>

<li><span><a href="/index.html?typeId=5">随心生活(2)</a></span></li>

</ul>
</div>
</div>



<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/static/images/byDate_icon.png"/>
按日志日期
</div>
<div class="datas">
<ul>

<li><span><a href="/index.html?releaseDateStr=2016年02月">2016年02月(11)</a></span></li>

<li><span><a href="/index.html?releaseDateStr=2016年01月">2016年01月(1)</a></span></li>

</ul>
</div>
</div>

<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/static/images/link_icon.png"/>
友情链接
</div>
<div class="datas">
<ul>

<li><span><a href="http://www.java1234.com/" target="_blank">Java知识分享网</a></span></li>

<li><span><a href="http://pan.java1234.com/" target="_blank">百度云搜索引擎</a></span></li>

<li><span><a href="http://www.easyicon.net/" target="_blank">小图标下载</a></span></li>

<li><span><a href="http://tieba.baidu.com/f?kw=java" target="_blank">Java贴吧</a></span></li>

<li><span><a href="http://www.uugai.com/" target="_blank">免费logo在线制作</a></span></li>

</ul>
</div>
</div>

</div>
</div>

<div class="row">
<div class="col-md-12" >
<div align="center" style="padding-top: 120px" >
<span style="float: left;">Powered by <a href="http://blog.java1234.com" target="_blank">Java1234</a> V1.0</span>
Copyright © 2012-2016 Java知识分享网 版权所有
</div>
</div>
</div>


</div>
</body>
</html>

转载于:https://www.cnblogs.com/csy666/p/6545591.html

相太阳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【项目实战】个人博客系统(7)——博客首页显示
历乱的日记簿
07-19 326
一、首页显示 1、查询最新文章列表：定义实体类查询首页文章列表信息，并定义接口来关联SQL实现查询功能； 2、查询最新推荐文章： 3、根据关键字搜索博客； 4、统计博客信息（博客总数、访问总数、评论总数、留言总数）【四个接口】 二、实体类定义 1、最新博客列表实体类 public class FirstPageBlog { //博客信息 private Long id; private String title; private String firstPict
博客系统 - 系统简介与首页设计
m0_53450409的博客
11-28 657
用Bootstrap实现手机端的博客导航栏效果。
个人博客系统前台首页展示
小生不才的博客
09-12 1167
1.博客部分 1.1.编辑BlogService /** * 前台系统右侧分类小列表 */ Page<Blog> listBlog(Pageable pageable); List<Blog> listRecommendBlogTop(Integer size); 1.2.编辑BlogServiceImpl @Override public Page<Blog> listBlog(Pageable pageable) { return
博客系统-首页展示相关
weixin_30539835的博客
03-29 106
URL配置 from django.conf.urls import url,include from django.contrib import admin from blogCMS import settings from django.views.static import serve from blog import views from blog import url...
搭建个人博客系统之首页
xiongdan626的博客
07-27 226
前言 找实习的时候，每天都对自己说一句：我很棒！ 这是对自己做的一个个人博客Web项目的整理。不知道内容要写些什么……就直接放源码吧……希望面试的时候问起项目来我都能记得…… <!DOCTYPE html> <html> <!--网页中的 head 标签：它的内容不会在网页中显示，作用是存储网页的一些元数据--> <head> <meta charset="utf-8" /> <!--使用bootstrap的必需操作，加入vi
POETIZE个人博客系统源码 - 最美博客
最新发布
04-26
POETIZE个人博客系统源码 | 最美博客 这是一个 SpringBoot + Vue2 + Vue3 的产物，支持移动端自适应，配有完备的前台和后台管理功能。 网站分两个模块： 博客系统：具有文章，表白墙，图片墙，收藏夹，乐曲，视频...
laravel-bjyblog开源博客系统-PHP
06-26
带表情的ajax无限级评论系统； 队列邮件通知； QQ、微博、github第三方登录； markdown 编辑器； 版权： 项目使用 MIT 协议；免费开源可随意使用； 分支说明： develop: 在此分支上开发新功能 test: 我博客使用此...
Lumos博客系统-其他
06-12
Lumos是基于Spring Boot的轻量级博客，是学习搭建使用Spring Boot的不错选择。 Lumos项目特点： 1、基于 Spring Boot 部署简单。 2、支持主库备库动态切换。 3、支持博客异常邮件提醒。 4、支持发送每天博客方法调...
个人博客系统-前后端,基于hexo搭建
10-19
本文将深入探讨如何使用Hexo框架来搭建这样一个个人博客系统，并强调其自定义模板的特点。 Hexo，一款轻量级的静态博客框架，以其简洁、高效和易于上手的特点，受到了众多用户的喜爱。它基于Node.js，能够快速生成...
多用户博客系统-可部署到服务器-秒搭建
07-06
标题中的“多用户博客系统-可部署到服务器-秒搭建”揭示了这是一个支持多个用户注册并发布博客的在线平台，且具有快速部署到服务器的能力。这个系统可能采用现代Web开发技术构建，使得安装和配置过程尽可能简洁高效...
博客个人主页系统
11-14
PHPWind大型多用户高速博客个人主页系统 PHPWind 推出大型多用户博客(BLOG), 该系统以众多个人日志(主页)为内容基础, 为网站内容管理与发布提供了更好的解决方案! (1) 以 .html 为链接模式架设整个网站, 让站点的内容大量出现在各大搜索引擎 (2) 全面支持 二级域名 比如 我的个人主页 http://yuling.phpwind.net (3) 做为一个可独立运行的系统, 同时可选择性的与论坛会员及文章数据进行完美整合! (4) 完全支持 RSS, 与 WAP 手机浏览, 用句广告词就是: 手机也能博客! (5) 强大的系统管理, 能简便地进行系统管理与用户日志管理! (6) 采用多层设计, 根分类 -- 多级子分类 -- 系统团队博客 -- 个人团队博客 -- 个人主页 -- 个人专辑 (7) 采用phpwind负载核心, 具备流畅的速度与高负载能力! (8) 采用phpwind模版设计思想, 与多语言设计思想! 最大程度地进行扩展与设计!-PHPWind large multi-user system blog WEBSITE PHPWind launched a massive multi-user blog (BLOG), the system to many personal log (Home) as a foundation for Web content management with the release provided a better solution! (1). Html to link model planes the whole site is set up so that the contents of a large number of sites in the major search engines (2) full support for two domain names such as my personal home page http://yuling.phpwind.net (3) as an independent operation of the system, while the option of the Forum members and several articles It is perfect for integration! (4) fully supports the RSS, and WAP mobile browser, with the words sentence : phone can blog! (5), a powerful management system, can easily for systems management and user log management! (6) multiple design-classi
实现一个博客系统(前端页面设计)
seeseeyoua的博客
11-03 412
所以说我们先把第一个的博客列表页中的导航栏和版心左侧的个人信息代码给拷贝过来，并引入CSS对应的代码 2)右侧只有三块部分，标题，博客的日期，还有文章的具体内容 3)当前我们已经实现了博客列表页和博客详情页，同时我们也把博客列表页和博客详情页通过a标签进行了关联(点击a标签之后，就跳转到指定的页面了) 4)但是此时还是出现了问题:点击了第一个博客的查看详情，进入到了第一篇博客的详情页面，再点击第二篇博客的查看详情，看到的还是第一篇的博客的详细页面；显然这是不科学的，这是需要解决的；4.实现博客登录界面。
博客系统（页面设计）
花落因为花开过的博客
07-05 1004
前端博客页面设计
个人博客系统(Vue实现）的主页布局设计
qq_51476492的博客
06-14 7420
Vue主页设计
springboot thymeleaf 太美丽夫 模板 css js 路径问题
qq_25584037的博客
06-07 2670
&lt;link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" th:href=@{/bootstrap/css/bootstrap.min.css}/&gt;&lt;head th:insert="~{common/common :: copy('aaa')}"&gt;引入 common 页面&lt;head  th:fragme...
iframe设置height为100%，scrolling为no，还是出现垂直滚动条
木雷双雄7
03-23 1万+
easyui中点击菜单生成tab选项卡时，iframe设置height为100%，并且scrolling为no，仍然出现了下图的滚动条。 问题原因：iframe为行内元素，空白符被解析。 解决办法： 1、改变父级样式，如font-size: 0; 或者line-height: 0; 2、改变自身样式，如display: block 或者vertical-align: middle
在单独的JS文件里面引用${pageContext.request.contextPath}的绝活，JS文件动态使用项目名称
影梦的博客
09-26 3273
在一般的JSP页面文件里面动态引用项目的根目录是即样的： &lt;script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.js"&gt;&lt;/script&gt; 在jsp页面可以这么玩儿，但是在一个单独的js文件当中就不好使啦！！！ 可以这么玩： 1. 第一步...
【方法】搭建自己的个人博客主页
热门推荐
crazyang的博客
08-30 3万+
2019/11/6 更新 看到了很多精美的Jekyll主题，在这里作为一个收集吧，随时想换就可以换 Minima，效果 看着那么多大牛都有自己的个人博客主页，甚是羡慕，所以我也来假装假装大牛，希望不要被识破。 参考链接，柏荧大神写的是真的详细，我是跟着他的教程手把手搭建的，过程中我也添加了一点自己的心得，本来是想要直接转载的，但现在用我的经历重新编辑分享出来，就写原创咯。 声明这是利用...
SSM博客系统-061921421
08-03
SSM博客系统是一个基于SSM框架开发的博客系统项目，通过对Spring框架的学习和应用，构建了一个完整的博客系统，涵盖了诸多功能模块和技术点。在该项目中，Core和Beans模块提供了Spring最基础的功能，Core模块是核心...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值