cms-首页搭建

主页面主要有3个部分构成,头部、主体内容部分、尾部

1.头部:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<div class="header_top">
<div class="w960">
<span class="time">Open1111 - 轻松建站赚钱从此开始</span>
<div class="toplinks">
<form target="_blank">
[&nbsp;<a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=5a688c5e4d85eaceb7b0354057daaba281d05191bb182776e5e65e7c46e03299">加入QQ群</a>&nbsp;][&nbsp;<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=527085608&amp;site=qq&amp;menu=yes" target="_blank">广告业务</a>&nbsp;]
&nbsp;<input type="text" id="bdcsMain" class="search"/>&nbsp;<input type="submit" value="搜索"/>
</form>
</div>

</div>
</div>

<div class="header">
<div class="w960">
<div class="title">
<a href="${pageContext.request.contextPath}/index.jsp"><img src="${pageContext.request.contextPath}/static/images/logo.jpg"></a>
</div>

</div>
</div>

 

foot.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class="footer">
<div class="copyright">Copyright © 2012-2016 有限公司 版权所有 联系站长:<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1002222344&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1002222344:51" alt="联系站长" title="联系站长"/></a> </div>
<div class="beian">备案号:<a href='http://www.miibeian.gov.cn/' target="_blank">苏ICP备16023210号-1</a></div>
</div>

menu.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>


<div class="menu">
<div class="w960 m960">
<ul>
<li class="first"><a href="/index.jsp" >首页</a></li>

<li><a href="/arcType/1.html">Java基础</a></li>

<li><a href="/arcType/2.html">网页基础</a></li>

<li><a href="/arcType/4.html">Java建站</a></li>

<li><a href="/arcType/5.html">Java爬虫</a></li>

<li><a href="/arcType/6.html">网站SEO</a></li>

<li><a href="/arcType/7.html">广告联盟</a></li>
</ul>
</div>
</div>

 

index.jsp

<%@ 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">
<title>Open1111官方网站 -网络科技有限公司</title>
<META NAME="Author" CONTENT="1234">
<meta name="keywords" content="Java内容管理系统,JavaCMS,Java开源,Java爬虫,JavaSEO,Java CMS" />
<meta name="description" content="Open1111专注于研发Java建站,Java爬虫,JavaSEO教程.传授广大学员用Java技术来实现互联网资源的搬运,整合汇聚互联网资源建站,顺便获取一些搬运费补贴家用." />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/open1111.css">
<script src="${pageContext.request.contextPath}/static/js/jQuery.js"></script>
</head>
<body>
<jsp:include page="/common/head.jsp"></jsp:include>
<jsp:include page="/common/menu.jsp"></jsp:include>
<jsp:include page="/common/foot.jsp"></jsp:include>
</body>
</html>

 

open111.css

body{
padding: 0px;
margin: 0px;
font:12px Verdana,Arial,Tahoma;
line-height: 25px;
}

.w960{
width: 960px;
margin: 0px auto;
overflow: hidden;
}

.header_top{
height: 25px !important;
border-bottom:1px solid #DBDBDB;
background: url(../images/header_top.png) repeat-x;
}

.tile{
float: left;
padding-left: 10px;
}


.toplinks{
float: right;
}

.toplinks .input{
margin-bottom: 2px;
}

.toplinks a{
color: #256EB1;
text-decoration: none;
}


.header{
margin-top: 10px;
}

.title{
float: left;
}


.menu{
margin-top: 10px;
}

.m960{
background: green;
height: 32px;
}

.menu ul{
margin:0px;
padding:0px;
height: 25px;
list-style: none;
}

.menu ul li{
font: 14px/1.5 "Microsoft YaHei","微软雅黑","Microsoft JhengHei","宋体";
float: left;
height: 22px;
margin-right: 10px;
margin-left: -3px;
padding-left: 20px;
padding-top: 5px;
}

.menu ul li a{
color: #FFF;
height: 22px;
text-decoration: none;
display: inline-block;
position: relative;
}

.menu ul li.first{
padding-left: 40px;
}


.footer{
margin-top: 20px;
margin-bottom: 40px;
}

.copyright{
text-align: center;
}

.beian{
text-align: center;
}

.beian a{
text-decoration: none;
color: gray;
}

    

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值