查看“表单和导航”的源代码
←
表单和导航
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
*前置知识点:[[罗汉塔]]、[[图片、列表和导航]] ==表单== *[http://www.w3school.com.cn/tiy/t.asp?f=html_input_src W3C编辑器] ===基本表单=== *[[文件:w8-8.png]] *知识点:[[表单的基本标记]] *源码: <nowiki><form> 请输入关键词: <input type="text" name="fname"> <input type="submit" value="搜索"> </form></nowiki> ===美化表单=== *[[文件:w8-9.png]] *知识点:[[表单的基本标记]]、[[表单的高级标记]] *源码: <nowiki><html> <body> <p> <form action="/example/html/form_action.asp" method="get"> FirstName <input type="text" name="fname" style="height:30px;"/> LastName <input type="text" name="lname" style="height:30px;"/> <input type="image" src="/i/eg_submit.jpg" alt="Submit" style="height:40px;vertical-align:bottom"/> </form> </p> <p>注释:如果 type 属性设置为 image,当用户单击图像时,浏览器将以像素为单位,将鼠标相对于图像边界的偏移量发送到服务器,其中包括从图像左边界开始的水平偏移量,以及从图像上边界开始的垂直偏移量。</p> </body> </html></nowiki> ===多功能表单=== *[[文件:w8-10.png]] *知识点:[[表单的基本标记]]、[[表单的高级标记]] *源码: <nowiki><html> <body> <p> <form action="/example/html/form_action.asp" method="get"> 请搜索关键字: <input type="text" name="fname" style="height:30px;"/> <input type="image" src="/i/eg_submit.jpg" alt="Submit" style="height:40px;vertical-align:bottom"/><br><br> 配送方式:<input type="radio" name="byway" value="jd" checked >京东配送 <input type="radio" name="byway" value="other">其他配送<br><br> 配送区域: <select> <option value="京津冀">京津冀</option> <option value="沪宁杭">沪宁杭</option> <option value="粤港澳">粤港澳</option> <option value="其他">其他</option> </select> </form> </p> </body> </html></nowiki> ===用表格布局=== *[[文件:w8-11.png]] *知识点:[[表单的基本标记]]、[[表单的高级标记]] *源码: <nowiki><html> <body> <form action="/example/html/form_action.asp" method="get"> <table> <tr> <td>请搜索关键字:</td> <td><input type="text" name="fname" style="height:30px;"/> <input type="image" src="/i/eg_submit.jpg" alt="Submit" style="height:40px;vertical-align:bottom"/> </td> </tr> <tr> <td>配送方式:</td> <td><input type="radio" name="byway" value="jd" checked >京东配送 <input type="radio" name="byway" value="other">其他配送 </td> </tr> <tr> <td>配送区域:</td> <td> <select> <option value="京津冀">京津冀</option> <option value="沪宁杭">沪宁杭</option> <option value="粤港澳">粤港澳</option> <option value="其他">其他</option> </select> </td> </tr> </form> </body> </html></nowiki> ==导航== ===超链接=== *横排超链接: *[[文件:W4-25.png]] *竖排超链接: *[[文件:w8-27.png]] *代码: <nowiki><div id="navigation"> <a href="#">Home</a> <a href="#">Contact us</a> <a href="#">Web Dev</a> <a href="#">Web Design</a> <a href="#">Map</a> </div></nowiki> ===水平导航栏=== *[[文件:W4-26.png]] *基本CSS代码: <nowiki>#navigation { width:60%; height:5em; background-color:#1136c1; } #navigation a{ width:16%; float:left; height:4em; color:#FFFFFF; }</nowiki> *优化后的代码: <nowiki><style> #navigation { width:60%; height:5em; background-color:#1136c1; font-weight:bold;/*字体加粗*/ font-size:1em;/*字号*/ text-align:center; /* 这个属性使盒子中的链接居中 */ } #navigation a{ width:16%; float:left; height:4em; color:#FFFFFF; line-height:4em; /* 行高*/ padding:0.5em; /* 内边距 */ text-decoration:none; /*下划线*/ border-left:1em solid #151571; /* 左边的粗边 */ } #navigation a:hover{ /* 鼠标经过时 */ background-color:#002099; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ border-left:12px solid yellow; } </style> </nowiki> ===竖直导航栏=== *[[文件:W4-17.png]] *代码: <nowiki><style> #navigation { width:30%; font-weight:bold; font-size:1em; text-align:center; /* 这个属性使盒子中的链接居中 */ margin:0; padding:0; } #navigation a{ width:100%; display:block; height:4em; line-height:4em; color:#FFFFFF; background-color:#074C97;; padding:5px 5px 5px 0.5em; text-decoration:none; border-left:1em solid #151571; /* 左边的粗边 */ border-right:1px solid #151571; /* 右侧阴影 */ } #navigation a:hover{ /* 鼠标经过时 */ background-color:#002099; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ border-left:1em solid yellow; } </style></nowiki>
返回至
表单和导航
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息