标签：body header 大小 log win width text 小明 utf-8
一、宽高自适应
自适应指的就是指其宽度可以根据浏器窗口的大小自动改变其宽度（随浏览器宽度的改变而改变）,而不会被浏览器遮住。
案例：
<div id="header"></div> <div id="left"></div> <div id="right"></div>
$(document).ready(function() { initLayout(); $(window).resize(function(){ initLayout(); }); }); function initLayout() { $(‘#right‘).width(document.documentElement.clientWidth - $("#left").width()-2); var h = document.documentElement.clientHeight - $("#header").height()-5; $(‘#left‘).height(h); $(‘#right‘).height(h); }
二、first-child 和first-of-type
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <p>11</p> <li>小明</li> <li>小王</li> <li>小张</li> <li>小刘</li> <li>小李</li> <li>小吴</li> <li>小赵</li> </ul> </body> <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> <script type="text/javascript"> //获取到页面中第一个元素 $(‘li:first‘).css(‘color‘,‘aqua‘); //获取袋页面中的最后一个元素 $(‘li:last‘).css(‘color‘,‘coral‘) //获取索引值为3的元素 $(‘li:eq(3)‘).css(‘color‘,‘red‘); //获取索引值为6的元素 $(‘li‘).eq(6).css(‘font-weight‘,‘bold‘) //偶数行元素 $(‘li:even‘).css(‘background‘,‘greenyellow‘) //奇数行元素 $(‘li:odd‘).css(‘background‘,‘pink‘) //获取当前元素的第一个子元素 //获取当前元素的父元素点下面的第一个子元素，如果第一个子元素不是li就停止寻找 $(‘li:first-child‘).css(‘font-size‘,‘32px‘); $(‘li:first-of-type‘).css(‘font-size‘,‘32px‘); </script> </html>
标签：body header 大小 log win width text 小明 utf-8
原文地址：http://www.cnblogs.com/dongzw/p/7203157.html
