标签：
一、div页面布局
一个好的页面布局很重要，这会让你写代码的时候层次分明；
以2列左侧固定右侧自适应宽度为例子：
这是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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>2列左侧固定右侧自适应宽度+头部+尾部</title> <link href="layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header">This is the Header</div> <div id="mainContent"> <div id="sidebar">This is the sidebar</div> <div id="content">2列左侧固定右侧自适应宽度+头部+尾部——</div> </div> <div id="footer">This is the footer<span style="display:none"> </div> </body> </html>
这是css文件：
body { font-family:Verdana; font-size:14px; margin:0;} #container {margin:0 auto; width:100%;} #header { height:100px; background:#9c6; margin-bottom:5px;} #mainContent { height:500px; margin-bottom:5px;} #sidebar { float:left; width:200px; height:500px; background:#cf9;} #content { margin-left:205px !important; margin-left:202px; height:500px; background:#ffa;} #footer { height:60px; background:#9c6;}
在这里要注意float的用法以及margin的调整用法。
二、关于在一个div中用多个超链接或者其他相同元素，但其中一个是图片链接，这样会造成图片与同一行的文字会有不整齐的情况，这里有个小技巧来解决，例子如下：
<div class="header_main">
<!--sub module 1【header_main】：This module contains the registration login as well as the personnel information and other information"--> <div class="listbar"> <a href="javascript:void(0);" id="reg_a">REG</a> <a href="javascript:void(0);" id="member">USER</a> | <a href="javascript:void(0);" id="login_a">LOGING</a> <a href="javascript:void(0);" id="logout">LOGOUT</a> <a href="http://zhidao.baidu.com/shop" title="BAIDU_SHOP"><img src="images/shop.png" align="absmiddle"></a> <a href="javascript:void(0);" id="home" onclick="all_target_a(‘www‘)">BAIDUHOME</a> </div> </div>
在这之中，<img src="images/shop.png" align="absmiddle"> align=“absmiddle” 这个标签就会解决这个问题；
三、在同一个页面跳转到另一个页面，不希望改变其他固定的如菜单导航，这个时候可以使用内嵌框架iframe来实现：
<!-- Module 3 begin --> <div id="mainContent"><!-- Module 3 is mainly used for the need to click on the same page to display an embedded iframe framework --> <div id="content"><iframe id="ifrpage" name="pagename" style="height:800px; width:100%;"></iframe></div> </div> <!-- Module 3 end-->
在其他页面只需通过href的action来调用id或者name就可以，如：
<a href="#" title="个人信息" onclick="javascript:document.getElementById(‘ifrpage‘).src=‘http://www.baidu.com‘">个人信息</a>
其中src可以是action
<a href="#" onclick="javascript:document.getElementById(‘ifrside‘).src=‘list/log_list.jsp‘">日志管理</a>
或者
<a href="http://www.baidu.com" target="pagename" title="查询信息">查询信息</a>
当然href同样可以是action 如：<a href="list/log_list.jsp" target="pagename" title="查询信息">查询信息</a>
四、在超链接a的情况下，如果不想有超链接有下划线，默认的超链接是有下划线的，在这里可以设置text-decoration: none;如果想恢复则设置text-decoration: underline;
还有就是超链接一旦被访问颜色就会变，这样会影响整个页面的美观，这个时候可以这样设置：
a:link { color:black; text-decoration: none; } a:visited { text-decoration: none; } a:hover { color:red; } a:active { text-decoration: none; }
这个表示：超链接默认颜色为黑色black，没有下划线（a:link）,访问过后颜色还是不变，鼠标经过的时候颜色为red红色，活动过后的颜色不变；
五、在使用ul li的时候，想其为作为导航菜单的时候，不希望有点，希望可以在同一行，可以这样设置：
list-style-type:none;这个可以去除点，希望在同一行可以用float：left来实现；
六、补充一点 在内嵌框架iframe内嵌在一个div快中的时候，可能会出现上下滚动条，特别是在宽度在100%的情况下，还是会出现横向滚动条，这样会严重不符合页面的要求，这个时候可以在body的css中设置如：
body{ margin :30px 0 0 0 ; padding : 0; font-size : 12px; font-family : sans-serif; background : #fff; overflow:-Scroll; overflow-x:hidden }
overflow:-Scroll; overflow-x:hidden；这两句可以解决横向出现滚动条，相应的y就是解决纵向的滚动条；
七、在jQuery中有人老是将JavaScript中的取input中的值搞混淆，下面简单说来句：
在JavaScript中通常可以用getelementById(“#id”).value;
在jQuery中通常使用var v=$(‘#searchinput‘).val();来取值；
八、在jQuery中点击一个按钮的时候，希望他跳转到自己所期望的页面可以使用下面这个：
$(‘#search_button‘).click(function(){ // alert("button"); var v=$(‘#searchinput‘).val(); // alert(v); if(v==‘‘){ $(‘#question‘).dialog(‘open‘); }else{ // alert("sdhsdh"); window.location.href=‘http://zhidao.baidu.com/search?lm=0&rn=10&pn=0&fr=search&ie=gbk&word=‘+v; } });
window.location.href="www.baidu.com";这个一不小心就会用到，最好记住；
九，下面简单介绍jQuery UI的日历操作：
/*------------------------日历模块------------------------*/ $(‘#date‘).datepicker({ /*日期基本操作*/ dateFormat : ‘yy-mm-dd‘, showWeek : true, // 显示周 //dayNames : [‘星期日‘，‘星期二‘,‘星期三‘，‘星期四‘,‘星期五‘，‘星期六‘,‘星期一‘], //更改日期长格式，但是这是英文包 不支持 ，如要 请引入中文包 //dayNamesMin :[‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘],//引入短格式 可以 //monthNames : [‘一月‘,‘二月‘,‘三月‘,‘四月‘,‘五月‘,‘六月‘,‘七月‘,‘八月‘,‘九月‘,‘十月‘,‘十一月‘,‘十二月‘], //长格式 提示一般要引用中文包 //altField : ‘#abc‘, //引入到另外一个input中 //altFormat : ‘dd/mm/yy‘, //修改引到的另一个input中的格式 //appendText : ‘calendar‘, //在日历框边加入提示的字段 //weekHeader : ‘周‘, //改成中文显示周,介于Safari浏览器乱码，所以使用英文 //firstDay : 1,//修改是从星期几开始 如：国外是从日，一，二，，，，六 中国是从一，二，，，日 /*日历外观*/ //disabled : ‘true‘, //禁用日历 //numberOfMonths : 3,//默认情况下是显示一个日历 ，这是设置日历显示的个数 //numberOfMonths : [3,2],//数组形式显示日历的个人，3代表显示3行，2代表每行显示2个，也就是6个 showOtherMonths : true, //设置当月没有的日期照样显示出来，但是不可以选择 //selectOtherMonths : true,//设置当月没有的日期照样显示出来，但是可以选择 changeMonth : true,//设置月份下拉框可选 changeYear : true,//设置年份下拉框可选 //isRTL : true,//设置日历由右向左绘制 //autoSize : true,//设置是否自动调整控件大小，以适应当前日历格式的输入 //showOn : ‘button‘,//设置按钮来显示日历触发 //buttonText : ‘CAL‘,//设置按钮文字 showButtonPanel : true,//设置开启按钮面板 closeText : ‘Close‘, //设置关闭按钮文本 currentText : ‘Today‘, //设置获取今日日期的按钮文本 nextText : ‘Next‘,//设置下个月的Alt文本 prevText : ‘Prev‘, //设置上一个月的Alt文本 //navigationAsdateFormat : true,//设置当前可以使用nextText，prevText，closeText，currentText 可以使用format格式 //yearSuffix : ‘Year‘,//在年后加文本 /*日期选择项*/ //日期的限制优先级，min和max最高 maxDate : 0,//设置当前的日期之后不可选择 hideIfNoPrevNext : true,//设置下月的点击按钮不存在 yearRange : ‘1950:2020‘, //设置年份的长度 });
有些还是值得记住的如以下这些经常会使用到：
$(‘#date‘).datepicker({ dateFormat : ‘yy-mm-dd‘, showWeek : true, // show the week showOtherMonths : true, //Set up the month if the it have not array always show it but can not choose changeMonth : true, //Set up in the drop-down box is optional ofthe month changeYear : true, //Set up in the drop-down box is optional ofthe year showButtonPanel : true, //Set up the open button panel closeText : ‘Close‘, //Set the text-button can be close currentText : ‘Today‘, //Set up for today‘s date button text nextText : ‘Next‘, //Set the Alt text of next month prevText : ‘Prev‘, //Set the Alt text of last month maxDate : 0, //Choose after setting the current date hideIfNoPrevNext : true, //Click on the button there is no set next month yearRange : ‘1950:2020‘, //Set the length of the year });
十、关于弹出框dialog的使用最值得学习掌握：dialog是轻量级的，有很好的界面视化，下面简单说两句：
这是js中的初始化弹出框：
//init the login dialog box $(‘#login‘).dialog({ autoOpen : false, modal : false, resizable : false, width : 400, height : 320, buttons : {‘login‘ : function(){ $(this).submit(); }}, });
这是当点击按钮的时候调用dialog：
//when click the login button pop up the login dialog box; $(‘#login_a‘).click(function(){ $(‘#login‘).dialog(‘open‘); });
这是HTML中弹出框的代码内容：
<!--begin the login‘s pop up dialog box --> <form id="login" title="user login"> <table> <tr><td> <label for="user">Account : </label> </td><td> <p> <input type="text" name="login_user" class="text" id="login_user" ></input> <span class="star">*</span> </p></td></tr> <tr><td><label for="pass">Password : </label> </td><td> <p> <input type="password" name="login_pass" class="text" id="login_pass" ></input> <span class="star">*</span> </p></td></tr> </table> <p> <input type="checkbox" name="expires" id="expires" checked="checked"/> <label for="expires">keep a week login on </label> </p> </form> <!--end the login‘s pop up dialog box -->
这是点击按钮：
<div class="header_main"> <!--sub module 1【header_main】：This module contains the registration login as well as the personnel information and other information"--> <div class="listbar"> <a href="javascript:void(0);" id="reg_a">REG</a> <a href="javascript:void(0);" id="member">USER</a> | <a href="javascript:void(0);" id="login_a">LOGING</a> <a href="javascript:void(0);" id="logout">LOGOUT</a> <a href="http://zhidao.baidu.com/shop" title="BAIDU_SHOP"><img src="images/shop.png" align="absmiddle"></a> <a href="javascript:void(0);" id="home" onclick="all_target_a(‘www‘)">BAIDUHOME</a> </div> </div>
css就不赘述了。
标签：
原文地址：http://www.cnblogs.com/jianyeLee/p/4709583.html
