简单系统后台页面开发分享【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样式的使用
项目结构：
主页：index.htm
软件设计界面：
源代码分享：
<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>联系作者：刘金玉
长按关注公众号
编程创造城市官网：https://bcczcs.com
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-11-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读