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">
<meta name="author" content="Kong.Yee"/>
<meta name="corporation" content="广州匡兴软件科技有限公司"/>
<meta name="contact" content="791663094或kong.yee@foxmail.com"/>
<meta name="keywords" content="keyword1, keyword2, keyword3"/>
<meta name="description" content="This is my page"/>
<link type="image/x-icon" rel="shortcut icon" href="图片名.ico"/>
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<title>最代码</title>
</head>
<body>
<!-- 固定菜单栏 -->
<div class="div1">
<!-- 居中 -->
<div class="conten">
<div class="zdm">最代码</div>
<div class="as">
<a href="#">首页</a>
<a href="#">分享</a>
<a href="#">问答</a>
<a href="#">话题</a>
<a href="#">动态</a>
<a href="#">博客</a>
<a href="#">购买</a>
</div>
<div class="text">
<input type="text" value="输入内容">
</div>
<div class="as2">
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
</div>
<!-- 欢迎登录最代码 -->
<div class="login">
<div class="loginzdm">欢迎登录最代码</div>
<div class="input">
邮箱：<input type="text"/><br/><br/>
密码：<input type="password"/><br/><br/>
<input type="checkbox">记住密码<br/><br/>
<input type="submit" class="images" value="登录">
<a>忘记密码？</a>
</div>
</div>
<div class="as3">
<a href="#">帮助中心</a>|
<a href="#">联系我们</a>|
<a href="#">友情链接</a>|
<a href="#">网站地图</a>|
<a href="#">分享代码</a>|
<a href="#">订阅问答</a>|
<a href="#">分享源码</a>|
<a href="#">最新问答</a>|
</div>
</body>
</html>
css样式
@CHARSET "UTF-8";
/**
*@公司: 广州匡兴软件科技有限公司
*@作者: Kong.Yee
*@时间: 2014-12-14下午5:44:05
*@联系方式: 791663094或kong.yee@foxmail.com
*@描述: TODO(用一句话描述该文件做什么)
*/
*{
margin: 0;
padding: 0;
}
body{
background-color: #ffffff;
}
.div1{
background-color: #29A7E1;
height: 60px;
width: 100%;
}
/* 固定菜单栏 */
.div1 {
margin: 0px auto;
z-index:100;
_position: relative;
_top:0px;
}
/* 固定菜单栏 */
.div1{
float: left;
display: block;
z-index: 100;
overflow: visible;
position: fixed;
top: 0px;
_position: absolute;
_top: expression_r(documentElement.scrollTop + "px");
}
.conten{
margin: 0 auto;
width: 980px;
height: 56px;
/* border: 1px solid red; */
}
.zdm{
color: #ffffff;
font-size: 30px;
font-weight: bold;
margin-top: 13px;
float: left;
}
.as{
margin-left: 30px;
margin-top: 22px;
float: left;
}
.as a{
color: #ffffff;
font-size: 15px;
font-weight: bold;
text-decoration: none;
}
.text{
float: left;
margin-left: 30px;
margin-top: 22px;
}
.as2{
margin-top: 18px;
float: right;
}
.as2 a{
color: #ffffff;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.login{
width: 1000px;
height: 250px;
border: 1px solid #C0C0C0;
margin: 0 auto;
margin-top: 80px;
background-color: whitesmoke;
}
.loginzdm{
margin-left: 100px;
margin-top: 30px;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #C0C0C0;
width: 800px;
margin-bottom: 20px;
height: 25px;
}
.input{
margin-left: 100px;
margin-top: 20px;
}
.images{
width: 100px;
height: 30px;
background-color: #29A7E1;
text-align: center;
color: #ffffff;
font-size: 16px;
}
.as3{
width: 1000px;
/* border: 1px solid red; */
margin: 0 auto;
margin-top: 15px;
}
.as3 a{
text-decoration: none;
color: #29A7E1;
}
备注
*技术交流与合作：QQ: 791663094；Email：kong.yee@foxmail.com
原文地址：http://blog.csdn.net/kong_yee/article/details/41931491
