jQuery+css+div一些值得注意的常用语句
2015-08-07 00:42
495 查看
一、div页面布局
一个好的页面布局很重要，这会让你写代码的时候层次分明；
以2列左侧固定右侧自适应宽度为例子：
这是HTML代码：
这是css文件：
在这里要注意float的用法以及margin的调整用法。
二、关于在一个div中用多个超链接或者其他相同元素，但其中一个是图片链接，这样会造成图片与同一行的文字会有不整齐的情况，这里有个小技巧来解决，例子如下：
在这之中，<img src="images/shop.png" align="absmiddle"> align=“absmiddle” 这个标签就会解决这个问题；
三、在同一个页面跳转到另一个页面，不希望改变其他固定的如菜单导航，这个时候可以使用内嵌框架iframe来实现：
在其他页面只需通过href的action来调用id或者name就可以，如：
其中src可以是action
或者
当然href同样可以是action 如：<a href="list/log_list.jsp" target="pagename" title="查询信息">查询信息</a>
四、在超链接a的情况下，如果不想有超链接有下划线，默认的超链接是有下划线的，在这里可以设置text-decoration: none;如果想恢复则设置text-decoration: underline;
还有就是超链接一旦被访问颜色就会变，这样会影响整个页面的美观，这个时候可以这样设置：
这个表示：超链接默认颜色为黑色black，没有下划线（a:link）,访问过后颜色还是不变，鼠标经过的时候颜色为red红色，活动过后的颜色不变；
五、在使用ul li的时候，想其为作为导航菜单的时候，不希望有点，希望可以在同一行，可以这样设置：
list-style-type:none;这个可以去除点，希望在同一行可以用float：left来实现；
六、补充一点 在内嵌框架iframe内嵌在一个div快中的时候，可能会出现上下滚动条，特别是在宽度在100%的情况下，还是会出现横向滚动条，这样会严重不符合页面的要求，这个时候可以在body的css中设置如：
有些还是值得记住的如以下这些经常会使用到：
十、关于弹出框dialog的使用最值得学习掌握：dialog是轻量级的，有很好的界面视化，下面简单说两句：
这是js中的初始化弹出框：
这是当点击按钮的时候调用dialog：
这是HTML中弹出框的代码内容：
这是点击按钮：
css就不赘述了。
一个好的页面布局很重要，这会让你写代码的时候层次分明；
以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就不赘述了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery实现先淡出再折叠收起的动画效果
- jQuery过滤HTML标签并高亮显示关键字的方法
- jQuery与getJson结合的用法实例
- jQuery实现鼠标经过弹出提示信息的地图热点效果
- jQuery使用animate创建动画用法实例
- jQuery实现仿腾讯视频列表分页效果的方法
- jquery简单实现网页层的展开与收缩效果
- jQuery实现仿百度帖吧头部固定导航效果
- jQuery实现信息提示框(带有圆角框与动画)效果
- jQuery实现高亮显示网页关键词的方法
- jQuery实现网页抖动的菜单抖动效果
- jQuery基于ajax实现星星评论代码
- jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
- jQuery实现时尚漂亮的弹出式对话框实例
- jQuery实现的Div窗口震动效果实例
- JQuery 给元素添加样式，去除样式
- JQuery获取复选框checkbox的值
- jQuery对象和DOM对象的相关知识
- 20150805 （网页定位导航+瀑布流布局+信息排列）JS+JQuery+CSS3效果实现笔记
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox