javaweb实验-构建网站主页
效果展示
1.css样式
点击查看代码
@charset "utf-8";
body{
width:1100px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.div_01{
background-color:Lime;
border:2px solid #888888;
}
.div_02{
text-align:right;
background-color:Aquamarine;
}
.div_03{
text-align:left;
font-size:30pt;
font-weight:bold;
text-align:center;
background-color:Aquamarine;
}
.div_04{
padding-top:20px;
text-align:center;
background-color:Aquamarine;
}
.div_04 a:link{
font-size:15pt;
font-family:宋体;
text-align:left;
text-decoration:underline;
TEXT-DECORATION:none;
}
.div_02 a{
font-size:15pt;
color:red;
font-family:宋体;
text-decoration:underline;
TEXT-DECORATION:none;
font-weight:bold;
}
.div_05{
float:left;
width:190px;
height:510px;
border:solid #eeeee;
margin-top:10px;
line-height:30px;
background-color:LavenderBlush;
}
.div_05_01{
width:180px;
height:30px;
background-color:LavenderBlush;
left:50%;
top:50%;
margin-left:5px;
margin-top:5px;
color: Violet;
font-weight:bold;
}
.div_05 li{
list-style-image:url();
margin-bottom:2px;
}
.div_05_02{
border:1px solid;
margin-left:5px;
margin-right:5px;
margin-bottom:10px;
background-color:Thistle;
}
.div_06{
float:left;
margin-top:10px;
margin-left:28px;
width:650px;
background-color: PaleGoldenrod;
}
.div_06_01{
background-color:LimeGreen;
}
.div_06_02{
background-color:LimeGreen;
}
.div_07{
float:right;
width:190px;
height:510px;
border:solid #dddd;
background-color: PaleGreen;
margin-top:-198px;
}
.div_07_01{
width:180px;
height:25px;
background-color: PaleGreen;
left:50%;
top:50%;
margin-left:5px;
margin-top:5px;
color: DarkSlateGray;
font-weight:bold;
padding-top:5px;
}
.div_07 li{
list-style-image:url();
margin-bottom;2px;
}
.div_07_02{
border:1px solid #bbbb;
margin-left:5px;
margin-right:5px;
margin-bottom:20px;
padding-bottom:20px;
background-color: PaleGreen;
}
.div_07_03{
display:inline-block;
vertical-align:top;
font-size:18pt;
line-height:20px;
}
.div_07_04{
text-align:left;
font-size:10pt;
font-family:cursive;
line-height:22pt;
background-color: PaleGoldenrod;
}
.div_08{
background-color:LimeGreen;
border:2px solid #8888;
width:1100px;
margin-top:509px;
}
.div_08 a{
font-family:宋体;
text-align:left;
text-decoration:underline;
TEXT-DECORATION:none;
}
2.主页
点击查看代码
<%@ 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>Insert title here</title>
<link type="text/css" rel="styleSheet" href="lmy-css.css">
</head>
<body>
<jsp:include page="lmy-zc.jsp"/>
<div class="div_05">
<div class="div_05_01">公司资讯</div>
<div class="div_05_02">
<ul>
<li><a href="https://www.taobao.com/">公司新闻</a></li>
<li><a href="https://www.taobao.com/">同行新闻</a></li>
<li><a href="https://www.taobao.com/">国内新闻</a></li>
</ul>
</div>
<div class="div_05_01">企业风采</div>
<div class="div_05_02">
<ul>
<li><a href="https://www.taobao.com/">新款服装</a></li>
<li><a href="https://www.taobao.com/">同行服装</a></li>
<li><a href="https://www.taobao.com/">国内服装</a></li>
</ul>
</div>
<div class="div_05_01">服装链接</div>
<div class="div_05_02">
<ul>
<li><a href="https://www.taobao.com/">淘宝网</a></li>
<li><a href="https://www.jd.com/">京东网</a></li>
<li><a href="http://www.grfyw.com/xianyu/">咸鱼网</a></li>
</ul>
</div>
</div>
<div class="div_06">
<div class="div_06_01">最新资讯
<a href="lmy-gengduo.jsp">更多>></a></div>
<%
for(int i=1;i<6;i++){
%> <br><a href="https://www.taobao.com/">新版服装<%=i %>.....................................................2022-<%= i+1 %>-<%= i+2 %></a></br><%
}
%>
</div>
<br/>
<div class="div_06">
<div class="div_06_01">最新资讯
<a href="lmy-gengduo.jsp">更多>></a></div>
<%
for(int i=1;i<6;i++){
%> <br><a href="https://www.taobao.com/">新版服装<%=i %>.....................................................2022-<%= i+1 %>-<%= i+2 %></a><br><%
}
%>
</div>
<div class="div_07">
<div class="div_07_01">在线交流</div>
<div class="div_07_02">
<ul>
<li><a href="http://localhost:8080/lmy-sy1/lmy-lianxi.jsp">在线咨询</a></li>
<li><a href="http://localhost:8080/lmy-sy1/lmy-lianxi.jsp">监督投诉</a></li>
<li><a href="http://localhost:8080/lmy-sy1/lmy-lianxi.jsp">给我留言</a></li>
</ul>
</div>
<br/>
<div class="div_07_03">
<b>联系我们</b>
</div>
<br/><br/>
<jsp:include page="lmy-lianxi.jsp"/>
<a href="lmy-lianxi.jsp">[更多联系]</a>
</div>
<jsp:include page="lmy-wy.jsp"/>
</body>
</html/>
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">
<title>Insert title here</title>
<link type="text/css" rel="styleSheet" href="lmy-css.css">
</head>
<body>
<div class="container text-center">
<form action="/loginServlet" >
<h2>登录界面</h2>
<p>
<input type="text"placeholder="账号" required autofocus>
</p>
<p>
<input type="password" placeholder="密码" required>
</p>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
4.管理员页面
点击查看代码
<%@ 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>Insert title here</title>
<link type="text/css" rel="styleSheet" href="lmy-css.css">
</head>
<body>
<div class="container text-center">
<form action="/loginServlet" >
<h2>登录界面</h2>
<p>
<input type="text"placeholder="管理员账号" required autofocus>
</p>
<p>
<input type="password" placeholder="管理员密码" required>
</p>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
5.尾页
点击查看代码
<%@ 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>Insert title here</title>
</head>
<body>
<div class="div_08">
公司版本权利所有，并保留所有权利。<a href="lmy-gly.jsp">[管理员入口]</a>
<br/>公司地址：福建省福州市连江县福州理工学院324宿舍
</div>
</body>
</html>
6.热线电话
点击查看代码
<%@ 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>Insert title here</title>
</head>
<body>
<div class="div_07_04">
客服电话：123456<br/>客服qq:654321<br/>电子邮箱：
654321@qq.com。<br/>
全国统一热线：0731-12345678<br/>如有问题请直接咨询客服。
<br/>邮箱回复时间为一个工作日内。<br/>
</div>
</body>
</html>
7.注册页面1.1
点击查看代码
<%@ 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>Insert title here</title>
</head>
<body>
<div class="div_01">
<div class="div_02">
您好，欢迎光临本公司网站，<a href="lmy-dl.jsp">[请登陆]</a>,新用户！<a href="lmy-zhuche.jsp">[免费注册]</a>
</div>
<div class="div_03"><img src="D:/桌面/代码/QQ图片20220314174358.png"></img></div>
<div class="div_04">
<a href="https://www.taobao.com/">首页</a> | <a href="https://www.taobao.com/">公司新闻</a>
| <a href="https://www.taobao.com/">服装展示</a> | <a href="https://www.taobao.com/">在线咨询</a>
| <a href="https://www.taobao.com/">监督投诉</a> | <a href="https://www.baidu.com/">员工之窗</a>
| <a href="https://www.taobao.com/">联系我们</a>
</div>
</div>
</body>
</html>
8.注册页面1.2
点击查看代码
<%@ 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>Insert title here</title>
</head>
<body>
<h2>注册界面</h2>
<form id="form1" action="UserRegister" method="post">
<p>
新账号：<input type="text">
</p>
<p>
新密码 ：<input type="password">
</p>
<input value="注册" type="submit" name="submit">
</form>
</body>
</html>
浙公网安备 33010602011771号