简单系统后台页面开发分享【2020网页综合笔记01】

简介: 简单系统后台页面开发分享【2020网页综合笔记01】

简介 INTRODUCTION

必须要掌握的内容:1.建立本地站点和站点管理 2.标签html head title body p table tr td h a font hr img 3.元素添加与修饰:文本、水平线、特殊字符、图像、flash动画 4.表格布局、合并、拆分 5.框架布局 6.层与时间轴的应用 7.表单的制作 8.css样式的使用

项目结构:

d1c3d27f077cf45577c7ccf9e7ad1a19.png

主页:index.htm

软件设计界面:

4d3bda86d0a42ec58dbaeb468a344ab6.png

源代码分享:

<html>
  <head>
     <!-- 这里实现网页的整体配置  -->
     <title>后台管理系统</title>
     <style>
         #header{
             background-color:blue;
             color:white;
         }
         #logo{
             width:100px;
         }
         #frame1{
             width:100%;
       height:100%;
         }
</style>
     <script>
</script>
  </head>
  <body>
     <div id="header">
        <img src="./image/logo.jpg" id="logo"  alt="logo" />
        <strong><font size="10">XX公司后台管理系统</font></strong>
     </div>
     <div id="bodyer">
        <table width="100%" height="80%">
           <tr>
              <td style="width:150px">
                 <ul>
                    <li><a href="page1.html">职位管理</a></li>
                    <li><a href="page2.html" target="frame1">用户注册</a></li>
                    <li><a href="http://www.baidu.com" target="frame1">访问百度</a></li>
                 </ul>
              </td>
              <td>
                 <iframe name="frame1" src="page1.html" id="frame1"></iframe>
              </td>
           </tr>
        </table>
     </div>
     <div id="footer"></div>
  </body>
</html>

用户注册页:page2.html

源代码:

<html>
  <head>
     <!-- 这里实现网页的整体配置  -->
     <title>注册用户</title>
     <style>
</style>
     <script>
</script>
  </head>
  <body>
    <form name="form1" action="my.php" method="post" >
        <table>
           <tr>
              <td>
                 用户名:
              </td>
              <td>
                 <input type="text" name="username"/>
              </td>
           </tr>
           <tr>
              <td>
                 密码:
              </td>
              <td>
                 <input type="password" name="password"/>
              </td>
           </tr>
           <tr>
              <td>
                 性别:
              </td>
              <td>
                 <input type="radio" name="sex" value="男" checked="checked" /> 男
     <input type="radio" name="sex" value="女" /> 女
              </td>
           </tr>
           <tr>
              <td>
                 爱好:
              </td>
              <td>
                <input type="checkbox" name="hobby" value="唱歌"/> 唱歌
    <input type="checkbox" name="hobby" value="跳舞"/> 跳舞
    <input type="checkbox" name="hobby" value="编程"/> 编程
              </td>
           </tr>
           <tr>
              <td>
                 单位:
              </td>
              <td>
                 <select name="company">
                    <option value="-1">请选择..</option>
                    <option value="职教中心">职教中心</option>
                    <option value="戏剧中心" checked="checked">戏剧中心</option>
                    <option value="游泳中心">游泳中心</option>
                 </select>
              </td>
           </tr>
           <tr>
              <td colspan="2">
                 <input type="submit" name="submit" value="提交"/>
              </td>
           </tr>
        </table>
    </form>
  </body>
</html>
相关文章
|
4月前
|
前端开发 UED
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
41 0
|
7月前
|
数据库
一款挺不错网站维护页面源码
一款挺不错网站维护页面源码,单HTML不需要数据库,上传到你的虚拟机就可以用做维护页面还不错,用处多。。
52 2
一款挺不错网站维护页面源码
|
7月前
|
存储 监控 前端开发
JavaScript手册:公司员工电脑监控软件前端交互的代码设计
在当今信息时代,随着公司对员工电脑活动的监控需求不断增加,前端交互的代码设计变得尤为关键。本手册将深入探讨JavaScript编写的公司员工电脑监控软件监控代码,着重介绍如何设计能够在不引起怀疑的情况下,实现对员工电脑活动的细致监控。
268 2
|
7月前
|
前端开发 测试技术 UED
前端知识(十四)——浅谈用户体验测试的主要功能
前端知识(十四)——浅谈用户体验测试的主要功能
138 0
|
前端开发
前端代码简洁之路,后台系统之详情页设计
前端业务开发中,为了脱离舒适区,也为了解放重复功能开发的劳动力,会将一些功能进行改造,本期改造千篇一律的详情页。
4008 26
前端代码简洁之路,后台系统之详情页设计
|
前端开发 小程序
前端工作总结106-小程序学习2开始布局页面2
前端工作总结106-小程序学习2开始布局页面2
94 0
前端工作总结106-小程序学习2开始布局页面2
|
前端开发 小程序
前端工作总结105-小程序学习1开始布局页面
前端工作总结105-小程序学习1开始布局页面
103 0
前端工作总结105-小程序学习1开始布局页面
|
Web App开发 前端开发 iOS开发
|
前端开发 缓存 iOS开发
网站前端和后台性能优化33
保证组件大小小于25K Keep Components under 25K
1908 0
|
前端开发 缓存
网站前端和后台性能优化32
使用小的可缓存的Favicon.ico Make favicon.ico Small and Cacheable
1903 0
下一篇
DataWorks