JavaWeb这三周-FrameSet框架实现新闻后台管理系统

最新推荐文章于 2024-05-17 21:19:38 发布

时光已旧

最新推荐文章于 2024-05-17 21:19:38 发布

阅读量3.1k

点赞数

分类专栏： javaweb 文章标签： css 框架管理 java web

本文链接：https://blog.csdn.net/gydarkfire/article/details/48374899

版权

实验目的：利用frameset框架完成新闻后台管理系统
使用技术类型：frameset、css、form表单提交。
1、新建登录页面login.html:
简单登录表单页面，提交action为index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Style/Login.css" rel="stylesheet" type="text/css" />
<title>主页</title>
</head>

<body>
   <div id="wrapper">
       <form id="form1" name="form1" action="index.html" >
          <div class="login">
             <div>
                 <label for="username">用户名</label>
                 <input type="username" name="username" id="username"  />
             </div>
             <div> 
                 <label for="password">密  码</label>
                 <input type="password" name="password" id="password"  />
             </div>
             <div class="button">
                 <input type="submit" name="Submit" value="登录"  />
                 <input type="reset"  name="Submit" value="重置"  />
             </div>
           </div>
        </form>
    </div>

 </body>
</html>

/* CSS Document */
* {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, "宋体";
    color: #FFFFFF;
    font-size: 12px;
    line-height: 24px;
}
a {
    font-family: Arial, "宋体";
    font-size: 12px;
    color: #FFCC00;
    text-decoration: underline;
    margin-right: 5px;
}
a:hover {
    text-decoration: none;
    color: #FFFFFF;
}
#wrapper {
    background-image: url(../Images/Bj_Login.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    height: 218px;
    width: 670px;
    margin-top: 150px;
    margin-right: auto;
    margin-left: auto;
}
.login {
    height: 140px;
    width: 222px;
    float: right;
    margin-top: 53px;
    margin-right: 11px;
    padding-top: 10px;
    padding-left: 15px;
    display: inline;
}
.login div {
    margin-top: 15px;
    margin-bottom: 15px;
    height: 22px;
}
.login #type {
    font-family: Arial, "宋体";
    font-size: 12px;
}
.login #username {
    border: 1px solid #0F509F;
    width: 160px;
    height: 16px;
}
.login #password {
    border: 1px solid #0F509F;
    width: 160px;
    height: 16px;
}
.login .button {
    padding-left: 55px;
}
.login .button input {
    background-color: #FFA73D;
    height: 20px;
    width: 60px;
    font-family: Arial, "宋体";
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    background-image: url(../Images/Bj_loginButton.gif);
    background-repeat: repeat-x;
    background-position: 0px 0px;
    border: 1px solid #DC6B00;
    line-height: 18px;
}
#link {
    text-align: center;
    height: 16px;
}

2、新建主页顶部页面top.html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Style/Top.css" rel="stylesheet" type="text/css" />
<title>top</title>
</head>

<body>
   <div id="top">
      <div id="time">您好，今天是<span id="date">2015年9月10日&nbsp;星期四</span></div>
      <script type="text/javascript">
             var d=new Date();
             document.getElementById("date").innerHTML=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+" 星期"+"天一二三四五六 ".charAt(d.getDay());
             </script>
   </div>
   <div id="menuBg">
       <div id="name">管理员</div>
       <div id="menu">
             <a href="main.html" target="mainFrame" id="home">首页</a></div>
   </div>

</body>
</html>

Top.css

/* CSS Document */
body {
    background-color: #FFFFFF;
    background-repeat: repeat-x;
    background-position: 999px top;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-image: url(../Images/Bj_top.gif);
}
#top {
    background-color: #FFFFFF;
    background-image: url(../Images/Pic_top_img.gif);
    background-repeat: no-repeat;
    background-position: left top;
    width: 999px;
    height: 76px;
    font-family: Arial, Helvetica, sans-serif, "宋体";
    font-size: 12px;
    color: #000000;
}
#time {
    line-height: 25px;
    text-align: center;
    height: 25px;
    width: 235px;
    font-family: Arial, Helvetica, sans-serif, "宋体";
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 702px;
    margin-right: 0px;
}
#menuBg {
    background-image: url(../Images/Bj_menu.gif);
    background-repeat: repeat-x;
    background-position: left top;
    background-color:

最低0.47元/天解锁文章

时光已旧

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb这三周-FrameSet框架实现新闻后台管理系统

实验目的：利用frameset框架完成新闻后台管理系统使用技术类型：frameset、css、form表单提交。 1、新建登录页面login.html: 简单登录表单页面，提交action为index.html<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="
复制链接

扫一扫