简单系统后台页面开发分享【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>
相关文章
|
1天前
|
Web App开发 缓存 前端开发
如何优化前端网页加载速度:最佳实践和工具推荐
本文探讨了如何通过采用最佳实践和利用先进的工具来优化前端网页加载速度。从压缩资源到使用CDN,从减少HTTP请求到利用缓存策略,我们将介绍一系列提高网页性能的技术手段。同时,我们还将推荐一些广受好评的工具,帮助开发者更轻松地实施这些优化策略。
|
11天前
|
搜索推荐 语音技术 UED
【专栏:交互与用户体验篇】网页可访问性设计与无障碍阅读
【4月更文挑战第30天】在数字化时代,网页可访问性设计至关重要,旨在确保所有用户,包括残障人士,都能平等使用互联网。通过遵循法律法规、提升用户体验和社会责任感,可实现无障碍阅读。关键原则包括文本可读性、图像可感知性、音频视频可访问性和交互性设计。实现方法包括遵循无障碍标准、使用语义化HTML、支持辅助技术、进行无障碍测试及提供帮助。这既是法律责任,也是提升用户满意度和社会包容性的必要举措。
|
2月前
|
开发框架 .NET 数据库
留言板系统的设计与实现_kaic
留言板系统的设计与实现_kaic
|
7月前
|
存储 小程序 前端开发
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
32 0
|
12月前
|
前端开发 小程序
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.3 页面样式文件
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.3 页面样式文件
|
小程序 定位技术
餐饮业小程序首页设计
餐饮业小程序首页设计
餐饮业小程序首页设计
|
前端开发
前端代码简洁之路,后台系统之详情页设计
前端业务开发中,为了脱离舒适区,也为了解放重复功能开发的劳动力,会将一些功能进行改造,本期改造千篇一律的详情页。
3657 26
前端代码简洁之路,后台系统之详情页设计
|
前端开发 小程序
前端工作总结105-小程序学习1开始布局页面
前端工作总结105-小程序学习1开始布局页面
78 0
前端工作总结105-小程序学习1开始布局页面
|
前端开发 小程序
前端工作总结106-小程序学习2开始布局页面2
前端工作总结106-小程序学习2开始布局页面2
71 0
前端工作总结106-小程序学习2开始布局页面2
|
前端开发 小程序
前端工作小结85-小程序学习3开始布局页面3
前端工作小结85-小程序学习3开始布局页面3
64 0
前端工作小结85-小程序学习3开始布局页面3