前台札记

最新推荐文章于 2019-02-24 23:39:11 发布

微笑____

最新推荐文章于 2019-02-24 23:39:11 发布

阅读量529

点赞数

分类专栏： extra

本文链接：https://blog.csdn.net/henicolas/article/details/8121422

版权

extra 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

二级联动菜单：
1.省份城市联动：将所有省份和城市写入js的数组当中。省份发生变化后动态构造城市下拉列表的option。城市option数据从预定义的数组当中获取。

2.组织机构二级或多级联动：
组织机构通常要进行动态维护（添加，删除，修改），所以组织机构数据都是存放在数据库中。多级联动的实现要借助AJAX，访问数据库来实现。当选择某一级的下拉列表项，要将选中项发送给服务器做查询操作，服务器返回选中项的下一级的组织机构数据给客户端页面，客户端页面再将这些返回的数据动态构造出下一级的下拉列表的option。

一、使用STYLE属性：将STYLE属性直接加在个别的元件标签里。
<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
例如：
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>
这种用法的优点是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签：将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">

</STYLE>
例如：
<STYLE TYPE="text/css">

</STYLE>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签：将样式规则写在.css的样式档案中，再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

四、使用@import引入：跟LINK用法很像，但必　放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css">

</STYLE>
例如：
<STYLE TYPE="text/css">

</STYLE>
要注意的是，行末的分号是绝对不可少的！

防止输入非法字符：

<HTML>
<HEAD>
<SCRIPT language="JavaScript"  >
function  clearText( )
{
   if (document.myform.card.value=="输入您的会员帐号")
      document.myform.card.value="" ;
}
function check( )
{
  var a=document.myform.card.value;
  if (a.substr(0,2)!="10" || isNaN(a))
  {
    alert("格式错误，请重新输入") ;
	//再次获得焦点，即鼠标光标回到卡号文本框
	document.myform.card.focus(); 
	//选中帐号框中的文本内容，提示重新输入
	document.myform.card.select();
  }
	
}
function compute( )
{
   document.myform.tot.value=
document.myform.price.value * document.myform.number.value;
}
function checkPostalCode() { 
if( event.keyCode < 45 || event.keyCode >57 ) { 
event.returnValue = false; 
} 
}
</SCRIPT>

<META http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>
<STYLE type="text/css">
<!--
input {
	
	font-size: 15px;
	border: 1px solid;	
}
body {
	background-color: #8AD3FF;
}
 
-->
</STYLE>
 <BODY>
<FORM name="myform" >
  <TABLE width="391" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#A1EA90">
    <TR>
      <TD colspan="2"><IMG src="logo.gif" width="387" height="40"></TD>
    </TR>
    <TR>
      <TD width="193" rowspan="6"><IMG src="gg.jpg" width="162" height="162"></TD>
      <TD>帐号：
      <INPUT name ="card" type = text id="card" onFocus="clearText( )" onBlur="check( )" value="输入您的会员帐号" size="15"></TD>
    </TR>
    <TR>
      <TD><hr></TD>
    </TR>
    <TR>
      <TD width="219">单价：
      <INPUT name ="price" type = text id="price" value="25.00" size="10" readonly>
      ￥</TD>
    </TR>
    <TR>
      <TD>数量：
      <INPUT name ="number" type = text id="number" size="10" οnkeyup="compute( )" οnkeypress="checkPostalCode()">
      个</TD>
    </TR>
    <TR>
      <TD>总价：
        <INPUT name ="tot" type = text id="tot"  value="0.00" size="10" >￥</TD>
    </TR>
    <TR>
      <TD><DIV align="center">
        <INPUT name="buy" type="button" id="buy" value="我 要 买" >
      </DIV></TD>
    </TR>
  </TABLE>
 </FORM> 
</BODY>
</HTML>

二级自动弹出菜单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>二级菜单</title>
    <script type="text/javascript">
        function Lmenu(value) {
            switch (value) {
                case "新品":
                    submenu.innerHTML = "<a href='#'>商品展示</a>|<a href='#'>销售排行榜</a>|<a href='#'>商品查询</a>";
                    break;
                case "购物":
                    submenu.innerHTML = "<a href='#'>添加商品</a>|<a href='#'>移出指定商品</a>|<a href='#'>清空购物车</a>|<a href='#'>查询购物车</a>|<a href='#'>填写订单信息</a>";
                    break;
                case "会员":
                    submenu.innerHTML = "<a href='#'>注册会员</a>|<a href='#'>修改会员</a>|<a href='#'>账户查询</a>";
                    break;
            }
        }
    
    </script>
</head>
<body>

<table width="761" height="20" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="67" align="center" ><a href="#">首 页</a></td>
<td width="75" align="center"><a href="#" οnmοusemοve="Lmenu('新品')">新品上架</a></td>
<td width="75" align="center"><a href="#" οnmοusemοve="Lmenu('购物')">购物车</a></td>
<td width="74" align="center"><a href="#" οnmοusemοve="Lmenu('会员')">会员中心</a></td>
<td width="61" align="center"><a href="#" >在线帮助</a></td>
</tr>
</table>
<div id="submenu" >
 
</div>


</body>
</html>

target属性
_blank -- 在新窗口中打开链接 _parent -- 在父窗体中打开链接 _self -- 在当前窗体打开链接,此为默认值 _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) 一个对应的框架页的名称 -- 在对应框架页中打开

微笑____

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前台札记

二级联动菜单：1.省份城市联动：将所有省份和城市写入js的数组当中。省份发生变化后动态构造城市下拉列表的option。城市option数据从预定义的数组当中获取。2.组织机构二级或多级联动：组织机构通常要进行动态维护（添加，删除，修改），所以组织机构数据都是存放在数据库中。多级联动的实现要借助AJAX，访问数据库来实现。当选择某一级的下拉列表项，要将选中项发送给服务器做查询操作，服
复制链接

扫一扫