关于css的样式和jsp、jquery相关问题

前一段时间在做一个网站，我主要负责web前端的工作，做完以后自己遇到了很多问题，于是打算写下来，希望对自己和他人都有帮助

一、css 样式的正确编写和使用

0、css样式的命名规则十分讲究，团队应该创建一套合理大众化的命名规则，比如 top为父元素 那么子元素为top_log或者t_log,而且css样式与内容部分要一对一协商结束和开头的注释，让后台的同学一目了然，方便以后修改。

1、*{margin:0px; paddig:0px;}可以去掉浏览器默认样式，然后自己根据需要设置margin和padding属性，解决不兼容问题。

2、body{font-size:12px;font-family:"微软雅黑"}这是给出现的文字设置默认的字体大小和样式，12px为人眼看到的最舒服的字体大小，注意与pt单位的差距，px只能是偶数18px=9pt。pt可以设置为11.5pt而px不能使用。

3.合适使用line-heigh:设置行高，可以很好的调整文字垂直居中的问题。

4、根据国际标准 img标签的四个属性 src / alt / width/ heigh 缺一不可，alt是搜索引擎抓取图片的关键，宽度和高度必须设置，这样访问速度才会变快，这样就不计算图片自身的宽和高，加快了页面加载速度。图片的处理是页面加载快慢的关键，应该尽量减少与服务器的交互，减少访问服务器的资源。这是网页优化的一种方式，还有字符集的优化，比如：#33ccff 简写成#3cf,只能将重复的简写，加快访问速度。

5、制作一些购物网站的时候，如果需要大量阿里巴巴，或者淘宝天猫上的图片时，可是直接访问阿里巴巴矢量图网站 http://iconfont.cn/，他可以将上面的图片当做文字使用，可以设颜色，大小，居中等样式。
6、对于一些文字标签，如：<a><i><span><textarea>标签，如果要设置宽高、背景颜色，margin等属性，必须进行元素升级，dispaly:block，变成块状元素才有效果。

7、<title>xxxx</title> <meta name="keywords" content="关键字1，关键字2"><meta name="discription" content="详细内容<76字">

Title中是百度搜索的大标题

关键词是搜索引擎的关键字

Content是对这个网站的详细描述

正规的网站，他们都是后台维护可以更改的

给title左侧添加图标

<title>首页</title>
<link rel="shortcut icon" href="../resources/image/front/logo.ico" />

其中图片格式为ico，大小有16x16,32x32两种。中间为图片存放的路径。

html5界面禁止手机缩放功能代码：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

8、当进行一些距离的调试时，必须学会使用浏览器调试，这样更快，而且更有效率，尤其是调试margin，padding的时候

二、jquery与jsp

0、必须学会使用jquery制作动画效果的原理，团队可以使用自己封装好了的动画效果库，这样提高开发效率。

1、必须熟悉w3c官网里面，所有的jquery时间，里面的时间大多数都是使用到，尤其是主要mouseover等几个鼠标时间。ready（）。和load事件，其中注意$("id")append("html代码")，与数据动态关联时，十分重要，他表示追加括号里面的html代码，注意传换单双引号，才能正确使用。

2、必须学会jquey结合ajax进行前段与后端的传值问题

3、熟悉jsp的两种请求post与get.还有一些相应与过滤

4、访问一些图片资源是，使用../回退两级，可以读取一写数据，也可以根据$("").attr("styly","width:33px; ")设置样式

5、一个与ajax结合能传值的方法 ：eval 它的使用方法请访问

http://zhidao.baidu.com/question/33987167

6、

搜索所有段落中的后代 span元素，并将其颜色设置为红色：

$("p")[code].find("span")

.css('color','red');[/code]

find()方法获得当前元素集合中每个元素的后代，通过选择器、jQuery对象或元素来筛选

7、jquery dom 元素方法-toArray()

将 li元素转换为数组，然后输出该数组元素的innerHTML：

$("button").click(function(){

x=[code]$("li").toArray()

for (i=0;i<x.length;i++)

{

alert(x[i].innerHTML);

}

});

8、
Load()事件：

http://www.w3school.com.cn/jquery/ajax_load.asp

9、
document ready与document .load()方法区别

http://wenku.baidu.com/link?url=Bm-hvDw1lNuo9_Ud4RVBQY4WA17xNHQJR9NLHngwsam0TLw4jSJB6CkeUzPrtbmGGSuucTCUI_--lZJYJZ22YLfsRFhETW0uDpd_emaU6xy

在加载页面之前执行的方法

http://www.lifelaf.com/blog/?p=187

10、
关于数据库里面的换行/n 或者、/r/n回车换行。显示在前台页面上都必须使用

String firstDetailed = activity.getDetailed().substring(0, subLength)

.replace(" ","  ").replace("\r\n","<br/>");

String secondDetailed = activity.getDetailed().substring(subLength, length)

.replace(" ","  ").replace("\r\n","<br/>");
替换之后才能使用<p></p>标签，正确的显示出格式，不然就不能读出正确的格式。

11、为了制作出适应不同尺寸电脑的网页，我们必须学会动态设置元素的宽高。http://www.cnblogs.com/xiaopin/archive/2012/03/26/2418152.html

比如：

Javascript:

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

var screen_h= window.screen.height;

var pic_h = screen_h*0.685;

$(".item").css('height',pic_h+'px');

推荐在线图片制作网站
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
实例：

验证码1秒倒计时

<script type="text/javascript">

var time = 60;

var showTime = function(){

time = time - 1;

//$(".check_btn").data(disabled,"disabled");

document.getElementById("check").disabled=true;

document.getElementById('time_btn').value = time+ "秒";

if (time == 0) {

clearInterval(s);//停止计算时间

// alert("时间到");

document.getElementById("check").disabled=false;

time=60;

document.getElementById('time_btn').value = time+ "秒";

}

}

var countDown = function() {

showTime();

s = setInterval("showTime()", 1000);

}

;

</script>