web前端基本用法（二）

一. jQuery滑动效果

<div id="flip">click to slide the panel down orup</div>

<div id="panel">Hello world!</div>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideToggle("slow");

});

});

</script>

二.jQuery元素捕获

<p><a href="http://www.w3cschool.cc"id="w3s">W3Cschool.cc</a></p>

<button>Show href Value</button>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

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

alert($("#w3s").attr("href"));

});

});

</script>

三. HTML标签基础http://www.w3school.com.cn/html/html_head.asp

<...align=“left”...>文本居左

<br\>隔行换行，<br/>隔大行换行

文本格式化：<em>着重文字，<i>斜体字，<small>小号字，<b>粗体文字，<sub>下标字

链接：<...target=“blank”...>在新窗口打开链接

头部元素：<meta>描述文档或定义文档关键词

<base>为页面上所有链接规定默认地址或默认目标

<link>定义文档与外部资源之间的关系

类型属性：type：button，checkbox，file，hidden，image，password，radio，reset，submit，text

四.页面小技巧

1/返回上一页：<aοnclick="javascript:history.back(-1);"/><<返回</a>

2/定义到页面固定位置：

1）在html文档中对锚进行命名，即创建一个书签

<a name=“tips”>基本注意事项– 有用的提示</a>

2）在同一文档中创建指向该锚的链接

<a href=“#tips”>有用的提示</a>

3）也可以在其他页面创建指向该锚的链接

<ahref="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

3/创建电子邮件链接（本地安装邮件客户端程序）：

<ahref="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

4/跳出当前页面的框架：

<a href="/index.html" target="_top">点击跳转！</a>

5/添加无下划线的超链接：style="text-decoration:none"

特殊效果：http://www.w3school.com.cn/cssref/pr_text_text-decoration.asp属性清单

a:link{text-decoration: none;color:blue;} # 给页面所有超链接去下划线

a:active { text-decoration:blink} #定义闪烁文本

a:hover { text-decoration:underline;color: red} #鼠标浮动时红色显示

a:visited { text-decoration: none;color: green} #选中时绿色显示

6/css框模型：margin清除边框区域；border边框周围的填充和内容；padding清除内容周围的区域；content盒子的内容，显示文本图像。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

7/去掉页面显示的特殊符号：gsub，例<%=x.applicantName.gsub('!!!','')%>

8/页面显示内容超过一定长度则用“...”代替：<%=truncate(x.abs,:length=>55)%>

9/某一图片或内容需要内嵌：style= "height:inherit"