简单系统后台页面开发分享【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>
相关文章
|
SQL 前端开发 JavaScript
|
3月前
|
前端开发 UED
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
32 0
|
6月前
|
Web App开发 缓存 前端开发
如何优化前端网页加载速度:最佳实践和工具推荐
本文探讨了如何通过采用最佳实践和利用先进的工具来优化前端网页加载速度。从压缩资源到使用CDN,从减少HTTP请求到利用缓存策略,我们将介绍一系列提高网页性能的技术手段。同时,我们还将推荐一些广受好评的工具,帮助开发者更轻松地实施这些优化策略。
|
前端开发
前端代码简洁之路,后台系统之详情页设计
前端业务开发中,为了脱离舒适区,也为了解放重复功能开发的劳动力,会将一些功能进行改造,本期改造千篇一律的详情页。
3996 26
前端代码简洁之路,后台系统之详情页设计
|
前端开发 JavaScript Go
前端哪需要自己设计页面?用现成的不就好了(上)
有时需要做一个页面,不是设计师出身的我们肯定不想花大量的时间去构思如何设计一个漂亮的页面,那么此时有一些好看又免费的模板就再好不过啦,这里给你们推荐18个
769 0
前端哪需要自己设计页面?用现成的不就好了(上)
|
前端开发
网站前端和后台性能优化34
把组件打包进多部分文档中 Pack Components into a Multipart Document
2151 0
|
Web App开发 前端开发 iOS开发
|
JavaScript 前端开发
网站前端和后台性能优化26
开发灵巧的事件处理程序 Develop Smart Event Handlers
1895 0
|
前端开发
网站前端和后台性能优化24
为部件使用没有cookie的域名 Use Cookie-free Domains for Components
1233 0