HTML+CSS基本总结(二)
第二部分：
<a> 标签的target属性：
toc.html如下：
<h3>Table of Contents</h3> <ul> <li><a href="pref.html"当用户第一次选择内容列表中的某个链接时，浏览器将打开一个新的窗口，将它标记为 "view_window"，然后在其中显示希望显示的文档内容。如果用户从这个内容列表中选择另一个链接，且这个 "view_window" 仍处于打开状态，浏览器就会再次将选定的文档载入那个窗口，取代刚才的那些文档。target="view_window">Preface</a></li> <li><a href="chap1.html"target="view_window">Chapter 1</a></li> <li><a href="chap2.html"target="view_window">Chapter 2</a></li> </ul>
在框架中打开窗口
不用打开一个完整的浏览器窗口，使用 target 更通常的方法是在一个 <frameset> 显示中将超链接内容定向到一个或者多个框架中。可以将这个内容列表放入一个带有两个框架的文档的其中一个框架中，并用这个相邻的框架来显示选定的文档：
<frameset cols="100,*">
<frame src="toc.html">
<frame src="pref.html" name="view_frame">
</frameset>
属性值
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
-----------------------------------------------------------------------------
img底部留白问题的解决方案
1、把图片设为块级元素
如：img{display:block;}
2、设置图片的垂直对齐方式如：img{vertical-align:top;}(vartical-align的值可选，text-top，bottom，text-bottom等，视情况而定。)
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
如：img 的父对象是 imgClass ，那么只需给 imgClass 加上一个属性 font-size:0px 即可。但是这个会使父对象里的文字无法正常显示。就算文字部分被子对像括起来，设置子对像文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。
4、改变父对象的属性如果父对象的高宽固定，图片大小随父对象而定，则可以设置父对象：overflow:hidden;
5、设置图片的浮动属性如：img{float:left;}
6、取消图片标签和其父对象的最后一个结束标签间的空格这个实现起来有些困难，我们往往会为了使页面代码层次清晰而加上一些空白缩进。
总的来说，如果不需要实现图片混排的话，用方法1）比较好一点，方法2）也不错；如果要图文混排，用方法5）会好一些，但要记得清除浮动。当然到底用哪种方法，还是视具体情况和各人喜好来定吧。（转自：http://www.lvyestudy.com/web/web0038.aspx）
-----------------------------------------------------------------------------
圆角的实现
border: 5px solid #dedede;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
-----------------------------------------------------------------------------
控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
- 对应的脚本特性为flexWrap。
flex-wrap：nowrap | wrap | wrap-reverse
取值：
-----------------------------------------------------------------------------
限制HTML文本框的输入类型
转自:http://zjjhyxj.blog.163.com/blog/static/115349537201111942640118/
-----------------------------------------------------------------------------
网页经典代码
1. 将彻底屏蔽鼠标右键,无右键菜单
也可以用于网页中Table框架中
<table border oncontextmenu=return(false)><td>no</table>
6.可以在收藏夹中显示出你的图标
7.关闭输入法
8.永远都会带着框架
if (window == top)top.location.href = frames.htm;// --></script>
9.防止被人frame
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
说明：<noscirpt>的用法很广，其中一条就是可以使JS广告失效。
onclick=window.location = 'view-source:'+ target=_blank>http://www.7880.com/test.htm';>
12.如何改变链接的鼠标形状
只需在链接上加上这一代码就行的了
或者跟上面的用CSS写也行
style=cursor:text style=cursor:wait
style=cursor:move style=cursor:help
style=cursor:e-resize
style=cursor:n-resize
style=cursor:nw-resize style=cursor:w-resize
style=cursor:s-resize
style=cursor:se-resize
style=cursor:sw-resize
-----------------------------------------------------------------------------
透明度
filter: alpha(opacity: 50);
opacity: 0.5;
-----------------------------------------------------------------------------
渐变色
background: -webkit-linear-gradient(#FEFEFE, #CCCCCC);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#FEFEFE, #CCCCCC);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#FEFEFE, #CCCCCC);
/* Firefox 3.6 - 15 */
background: linear-gradient(#FEFEFE, #CCCCCC);
/* 标准的语法 */