jQuery+css+div一些值得注意的常用语句
一、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:;}
#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="data:images/shop.png" align="absmiddle"></a>
<a href="javascript:void(0);" id="home" onclick="all_target_a('www')">BAIDUHOME</a>
</div>
</div>
在这之中，<img src="data: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 :;
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="data:images/shop.png" align="absmiddle"></a>
<a href="javascript:void(0);" id="home" onclick="all_target_a('www')">BAIDUHOME</a>
</div>
</div>
css就不赘述了。
jQuery+css+div一些值得注意的常用语句的更多相关文章
- 自己用jquery+css+div写的一个弹窗
弹窗支持两种模式,一种是普通信息提示框,调用方法:popup.msgPopup(msg); 另一种是可以加载页面的弹窗,调用方法:popup.pagePopup(url); 效果图: css代码 ;; ...
- CSS+DIV常用命名
常用的符合CSS+DIV规则的命名 页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单: ...
- jquery判断div是否显示或者隐藏
jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...
- 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class，id，type的操作】【jquery选择器】
1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...
- jquery+css实现邮箱自动补全
今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
- jQuery css()选择器使用说明
css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS( ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- jquery css事件编程 尺寸设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- C语言知识总结（3）
数组 数组的特点: 只能存放一种类型的数据,比如int类型的数组.float类型的数组 里面存放的数据称为“元素” 初始化方式 ] = {, , }; ] = {,}; , , }; ] = {[]= ...
- 直播开始：'云榨汁机'诞生记--聊聊JavaScript中的'业务建模'
闭包是JavaScript中的一个重要特性,在之前的博文中,我们说闭包是一个'看似简单,其实很有内涵'的特性.当我们用JavaScript来实现相对复杂的业务建模时,我们可以如何利用'闭包'这个特性呢 ...
- 关于火狐浏览器不支持img onerror的办法
项目中,要使用到缺省图,除了火狐浏览器,其它浏览器都支持img onerror事件.我使用到的解决的办法就是给图片的外层标签加背景,背景图用的就是缺省图. 上代码 <img src=" ...
- ThinkPHP中的视图
ThinkPHP中的视图View 1.什么是视图View 所谓的视图就是用户可视化操作界面. 2.视图View组成 view类(模板引擎类似Smarty) 模板文件(html模板) 3.视图的定义 默 ...
- [sql server] 如何阻止SELECT * 语句
我们每个人都知道是个不好的做法,但有时我们还是要这样做:我们执行SELECT * 语句.这个方法有很多弊端: 你从你的表里返回每个列,甚至后期加的列.想下如果你的查询里将来加上了VARCHAR(MAX ...
- gulp插件
gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程:文件流--文件流--文件流......因为grunt操作会创建临时文件,会有频繁的IO操作,而gulp使 ...
- Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程
这篇文章主要介绍了Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程,需要的朋友可以参考下 准备篇 一.环境说明: 操作系统:Windows Server 201 ...
- Python开发【第一篇】Python基础之反射
反射 反射的作用:反射得作用是提高代码可读行. __import__导入模块和import导入模块的区别: __import__导入模块是通过字符串进行导入. import是常用得导入模块方法. 扩展 ...
- Python脚本控制的WebDriver 常用操作 <十九> 获取测试对象的状态
下面将使用webdriver来模拟测试中观察测试对象的状态的操作 测试用例场景 在web自动化测试中,我们需要获取测试对象的四种状态 是否显示.使用element.is_displayed()方法: ...
- DATE,DATETIME,DATETIME2等日期时间数据类型
日期范围广 0001-01-01 到 9999-12-31.时间范围广 00:00:00 到 23:59:59.9999999. -----------------DATE --只存储日期 selec ...