Web前端-html页面-01（锚点、表单、个人简历）
来源：互联网 发布：淘宝店卖零食 编辑：程序博客网 时间：2024/04/29 19:18
Web前端学习中-01
先来几张图镇楼!
1.锚点链接 
2.单选框图片背景更换 
3.嵌套表格 
4.HTML版个人简历 
5.表单输入框 
6.邮箱注册表单
代码部分：
1.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <!--连接外部样式表--> <!--<link rel="stylesheet" type="text/css" href="css/Demo1.css" />--> <style type="text/css"> #div-max{ margin:0 auto; width: 961px; } #div-top { margin:0 auto; width: 961px; height: 58px; line-height: 58px; position: fixed; background-color: #960500; } #div-top a{ width: 961px; height: 58px; line-height: 58px; color: white; font-weight: bold; font-size: 20px; margin-left: 100px; text-decoration: none; } #div-img{ width: 961px; height: 58px; margin:0 auto; clear: both; padding-top: 62px; padding-bottom: 18px; margin-left: auto; } #div-img1{ width: 961px; height: 58px; margin:0 auto; margin-left: auto; margin-bottom: auto; clear: both; } #div-bei{ width: 961px; margin:10 auto; margin-left: auto; clear: both; } #div-img2{ width: 961px; height: 58px; margin:0 auto; margin-top: auto; margin-left: auto; clear: both; } #div-content{ width: 961px; height: auto; margin:0 auto; } .content-left{ float: left; width: 616px; /*margin-right: 3px;*/ } .content-right{ float: right; width: 345px; } </style> </head> <body bgcolor="" > <div id="div-max"> <div id="div-top"> <a href="#record-time">紀錄時刻</a> <a href="#record-win">冠軍時刻</a> <a href="#record-bad">悲情時刻</a> <a href="#record-data">數據時刻</a> <a href="#tips">球迷心聲</a> </div> <div id="div-img"></a><img src="img/1234.jpg" width="961"/></div> <div id="div-content"> <div class="content-left"><a name="record-win"></a><img src="img/01.jpg" width="616"/></div> <div class="content-right"><a name="record-data"></a><img src="img/02.jpg" width="342"/></div> </div> <br /> <div id="div-img1"></a><img src="img/1234.jpg" width="961"/></div> <br /> <div id="div-bei"><a name="record-bad"></a>悲情时刻，悲情时刻，悲情时刻，悲情时刻，悲情时刻，悲情时刻</div> <br /> <div id="div-img2"><a name="record-time"></a><img src="img/1234.jpg" width="961px"/></div> </div> </body></html>2.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div-max{ margin: 0 auto; } .nic{ width:298px; height: 35px; background-image: url(img/nic.jpg); border: 0; } .sex{ opacity:0; filter:Alpha(opacity=0) } .public_sex{ width: 40px; height: 20px; float: left; } #man{ background:url(img/man.jpg) no-repeat left center; } #woman{ background:url(img/woman.jpg) no-repeat left center; } #sp1{ font-size: 12.8px; color: darkgrey; } #div-sub{ background-color:#5DB348 ; color: white; font-size: 20px; width: 250px; height: 46px; } a{ text-decoration: none; } </style> <script type="text/javascript"> function showCheck(num){ if (num==1){ var man=document.getElementById("man"); man.style.backgroundImage="url(img/man.jpg)" var man=document.getElementById("woman"); man.style.backgroundImage="url(img/woman.jpg)" }else{ var man=document.getElementById("man"); man.style.backgroundImage="url(img/woman.jpg)" var man=document.getElementById("woman"); man.style.backgroundImage="url(img/man.jpg)" } } </script> </head><body><div id="div-max"> <table cellpadding="5" cellspacing="0" width="427"> <div id=div-top> <th>注册账号</th> </div> <tr> <td width="68">昵稱</td> <td><input type="text" class="nic"/></td> </tr> <tr> <td>密碼</td> <td><input type="password" class="nic"/></td> </tr> <tr> <td>確認密碼</td> <td><input type="password" class="nic"/></td> </tr> <tr> <td>性別</td> <td><div class="public_sex" id="man" onclick="showCheck(1)"><input type="radio" class="sex" />男</div> <div class="public_sex" id="woman" onclick="showCheck(2)"><input type="radio" class="sex" />女</div></td> </tr> <tr> <td>手機号码</td> <td><input type="password" class="nic"/></td> </tr> <tr> <td></td> <td><div id="div-samll"><span id="sp1">可通过该手机号码快速找回密码</span><br /> <span id="sp1">中国大陆地区以外手机号码 <a id="div-a" href="#">点击这里</a></span> </div></td> </tr> <tr><td align="center" colspan="2"><input type="submit" id="div-sub" size="50" style="border-radius: 4px;" value="立即注冊"/></td></tr> <tr> <td></td> <td><input type="checkbox" checked="checked" style="border-radius: 8px;"/> <span id="sp1">同时开通QQ空间</span> <br /> <input type="checkbox" checked="checked" style="border-radius: 8px;"/> <span id="sp1">我已阅读并同意相关服务条款和相关政策</span></td> </tr> </table> <!--<iframe src="frame/new_list.html" border="0"></iframe>--></div></body></html>3.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head><body> <table border="1" bgcolor="black"> <tr bgcolor="white"> <td width="152" height="82">1</td> <td rowspan="2" height="163" width="103">2</td> <td width="155" height="82"> <table border="1" bgcolor="#0166FF"> <tr> <td width="80">a</td> <td rowspan="2" width="80">b</td> <td width="80">c</td> </tr> <tr> <td>d</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td> <td>i</td> </tr> </table> </td> </tr> <tr bgcolor="white"> <td><table border="1" bgcolor="#65CC00" align="center"> <tr> <td width="41">A</td> <td colspan="2" width="75">B</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> </tr> </table></td> <td>6</td> </tr> <tr bgcolor="white"> <td>7</td> <td>8</td> <td>9</td> </tr> </table></body></html>4.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style type="text/css"> #sp{ font-weight: bolder; } p{ text-indent: 2em; } .u2{ list-style: none; margin-top: 5px; margin-left: -30px; } .u1{ margin-top: -100px; margin-left: -15px; } #div-green{ background-color: #99CCFF; width: 100%; } </style> </head><body> <table border="0" cellpadding="0" cellspacing="2" bgcolor="#99CCFF"> <tr bgcolor="white"> <td colspan="3"><div id="div-green"><span id="sp">个人概况</span></div></td> </tr> <tr bgcolor="white"> <td width="272" height="125"> <table cellpadding="3"> <tr><td>姓名：</td><td>张三</td></tr> <tr><td>性别：</td><td>男</td></tr> <tr><td>籍贯：</td><td>山东.滨州</td></tr> <tr><td>生日：</td><td>1989-01-09</td></tr> </table> </td> <td width="315" height="125"> <table cellpadding="3"> <tr><td>毕业院校：</td><td>上海经贸大学</td></tr> <tr><td>所学专业：</td><td>法学.国际经济法</td></tr> <tr><td>毕业时间：</td><td>2012-06</td></tr> <tr><td>政治面貌：</td><td>中共党员</td></tr> </table> </td> <td width="100" height="125" align="center">照片</td> </tr> <tr bgcolor="white"> <td colspan="3"><div id="div-green"><span id="sp">联系方式</span></div></td> </tr> <tr bgcolor="white"> <td height="43">手机：13188888888</td> <td colspan="2">邮箱：2013aaa@163.com</td> </tr> <tr bgcolor="white"> <td colspan="3"><div id="div-green"><span id="sp">自我评价</span></div></td> </tr> <tr bgcolor="white"> <td colspan="3"><p>出身贫寒，诚实守信，稳重成熟，吃苦耐劳，性格开朗，善于学习，待人热情，热爱运动。有很强的事业心、进取心，对待工作积极热情，一丝不苟。具有高度的责任感和敬业精神，团队协作意识强。学习上勤奋刻苦，积极向上，成绩优秀。乐于助人，在老师同学之间取得了很好的人际关系</p></td> </tr> <tr bgcolor="white"> <td colspan="1"><div id="div-green"><span id="sp">专业技能证书</span></div></td> <td colspan="2"><div id="div-green"><span id="sp">所获荣誉证书</span></div></td> </tr> <tr bgcolor="white"> <td colspan="1"> <ul class="u1"> <li type="disc">2010年9月大学英语四级，</li> <li type="square">2010年6月大学英语六级，</li> <li type="square">2010年9月全国计算机一级，</li> <li type="square">2010年12月上海市计算机一级，</li> </ul> </td> <td colspan="2" width="405"> <ul class="u2"> <li >2010-2011 年度上海政法学院品学兼优奖学金</li> <li >2008-2009，2009-2010年度上海政法学院社会活动奖学金，</li> <li >2008-2009，2009-2010,2010-2011年度国家励志奖学金，</li> <li >2009年7月“情系国防，爱我中华”演讲比赛一等奖， </li> <li >2009年11月 “东丽杯”上海国际马拉松赛高校团体二等奖，</li> <li >2010年11月 上海市司法局世博先锋优秀党员，</li> <li >2010年12月“中国2010年上海世博会优秀志愿者”。</li> </ul> </td> </tr> <tr bgcolor="white"> <td colspan="3"><div id="div-green"><span id="sp">实习及在校经历</span></div></td> </tr> <tr bgcolor="white"> <td colspan="3"> <ul class="u2"> <li >★2008年9月——2010年6月 教务处学生助理（勤工俭学岗位）。</li> <li >★2009年9月——2012年6月 上海政法学院国际法商系0843班团支书</li> <li >★2008年10月——2008年12月 上海洛基英语兼职讲师</li> <li >★2010年4月——2010年10月 上海世博会城市志愿者上海政法学院外建站站长。</li> <li >★2011年7月——2011年8月 山东省滨州市阳信县公安局暑期实习</li> <li >★2011年8月——2011年9月 接受上海众合教育司法考试培训班培训</li> </ul> </td> </tr> <tr bgcolor="white"> <td colspan="3"><div id="div-green"><span id="sp">求职宣言</span></div></td> </tr> <tr bgcolor="white"> <td colspan="3">努力不一定成功，但不努力就一定不成功！</span></td> </tr> </table> <br /><br /><br /></body></html>5.
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div-max{ margin: 0 auto; } #div-left{ width: 659px; float: left; } #div-right{ margin-top: -30px; margin-left: -150px; width: 130px; float: left; } input,textarea{ border: #6795B4 1px solid; style="border-radius: 4px;" /*border-bottom-left-radius: 5px;*/ } </style> <script type="text/javascript"> function showPwd(){ var obj=document.getElementById("pw"); obj.type="text"; } function hiddenpwd(){ var obj=document.getElementById("pw"); obj.type="password"; } </script> </head> <body> <div id="div-max"><div id="div-left"> <form enctype="multipart/form-data"> <table border="0" cellspacing="0" cellpadding="5"> <tr> <td>名字：</td> <td><input type="text" name="username" /></td> </tr> <tr> <td>姓氏：</td> <td><input type="text" name="username" /></td> </tr> <tr> <td>登錄名：</td> <td><input type="text" name="username" />(可包含a-z、0-9和下划线)</td> </tr> <tr> <td>密码：</td> <td><input type="password" name="password" id="pw" onfocus="showPwd()" onblur="hiddenpwd()"/>(至少包含6个字符)</td> </tr> <tr> <td>再次重新输入：</td> <td><input type="password" name="repassword" /></td> </tr> <tr> <td>电子邮箱：</td> <td><input type="email" name="email" />(必須包含@字符)</td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="sex" value="男"/>男<img src="img/man.png" /> <input type="radio" name="sex" value="女"/>女<img src="img/woman.png" /> </td> </tr> <tr> <td>头像：</td> <td><input type="file" name="repassword" /></td> </tr> <tr> <td>爱好：</td> <td> <input type="checkbox" name="sports" value="sports" checked="checked"/>运动 <input type="checkbox" name="chatting" value="chatting"/>聊天 <input type="checkbox" name="playgame" value="playgame"/>玩游戏 </td> </tr> <tr> <td>出生日期</td> <td> <input type="text" name="data" value="yyyy"/>年 <select> <option>[请选择月份]</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>月 <input type="text" size="3" value="dd"/>日 </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" value="提交"/> <input type="reset" value="重填"/> </td> </tr> </table> </form></div><div id="div-right"> <table> <tr><td><h3><img src="img/yuedu.png" />阅读淘宝网服务协议</h3></td></tr> <tr> <td colspan="4"><textarea cols="30" rows="10">歡迎...</textarea></td> </tr> </table></div></div> </body></html>6.
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div-max{ margin: 0 auto; } #sp{ color: red; } #sp1{ margin-top: -10px; font-size: 12.8px; color: darkgrey; } #sp2{ color: #003399; font-size: 12.8px; } #div-samll{ margin-top: -20px; } #div-sub{ background-color:#5DB348 ; color: white; font-size: 20px; /*font-family: "agency fb";*/ width: 130px; height: 46px; } #div-yan{ margin-left: -144px; /*margin-top: -20px;*/ } </style> </head><body> <div id="div-max"> <form enctype="multipart/form-data"> <table border="0" cellspacing="2" cellpadding="12"> <tr> <td><span id="sp">*</span>郵件地址</td> <td><input type="text" name="username" style="border-radius: 4px;" size="35" placeholder="建議用手機號注冊"/> @<select size="1" style="border-radius: 4px;"> <option>163.com</option> <option>QQ.com</option> </select></td> </tr> <tr><td></td> <td><div id="div-samll"><span id="sp1">6~8個字符，可使用字母、數字、下劃綫、蓄意字符開頭</span></div></td> </tr> <tr> <td><span id="sp">*</span>密码</td> <td><input type="password" size="51.5" style="border-radius: 4px;" name="password" id="pw" onfocus="showPwd()" onblur="hiddenpwd()"/></td> </tr> <tr><td></td> <td><div id="div-samll"><span id="sp1">6~16個字符，區分大小寫</span></div></td> </tr> <tr> <td><span id="sp">*</span>確認密碼</td> <td><input type="email" size="51.5" style="border-radius: 4px;" name="email" /></td> </tr> <tr><td></td> <td><div id="div-samll"><span id="sp1">請再次填寫密碼</span></div></td> </tr> <tr> <td><span id="sp">*</span>驗證碼</td> <td> <input type="text" size="31.5" style="border-radius: 4px;" name="sex" /> </td> <td><div id="div-yan"><img src="img/yanzheng.png" /></div></td> </tr> <tr><td></td> <td><div id="div-samll"><span id="sp1">請填寫圖片中的字符，不區分大小寫</span> <br /><br /> <input type="checkbox" checked="checked" style="border-radius: 8px;"/> <span id="sp1">同意</span><span id="sp2">"服務條款"</span><span id="sp1">和</span><span id="sp2">"隱私權相關政策"</span> </div> </td> </tr> <tr> <td align="center" colspan="2"><input type="submit" id="div-sub" size="50" style="border-radius: 4px;" value="立即注冊"/></td> </tr> </table> </form> </div></body></html>先上这些个基础，练练手， 愿与诸君共勉。
1 0
- Web前端-html页面-01（锚点、表单、个人简历）
- Android程序员学WEB前端(2)-HTML(2)-锚点链接列表表单-Sublime
- html web页面锚点的设置
- Web前端-html页面-网易注册表单，美化及时验证效果
- [Web前端]梳理-DOM.19. HTML表单
- web前端－HTML表单－015
- web前端之HTML中a标签锚点
- HTML前端网页制作web页面入门
- C#--Get获取Web前端页面Html
- web前端表单（重点）
- WEB前端开发学习----3.HTML表单form标签
- Web前端教程-02.06.HTML表单和php环境搭建
- WEB前端 | HTML基础——(5)表格和表单
- web前端html文件之间做表单数据传输和处理
- WEB前端听课笔记——HTML之表单
- web前端（html、css）
- 前端-html表单
- 个人简历页面
- MAC OSX 如何安装homebrew
- XML文档解析器---demo4j
- android知识点总结
- Magical GCD ----思维题
- 关于hbase应用的一些看法
- Web前端-html页面-01（锚点、表单、个人简历）
- Zynq-7000烧写FPGA逻辑单元PL Image
- 安卓4.4源码编译错误汇总
- php 图片添加水印
- POJ刷题指南
- 20个IntelliJ IDEA重构功能
- hive基本用法实例
- Android使用ContentProvider实现多进程通信
- IOS使用Jenkins进行持续集成
