1.前端頁面有哪三層構成，分別是什麼？作用是什麼？
1）、結構層：由 HTML 或 XHTML 之類的標記語言負責創建，僅負責語義的表達。解決了頁面“內容是什麼”的問題。
2）、表示層：由CSS負責創建，解決了頁面“如何顯示內容”的問題。
3）、行爲層：由腳本負責。解決了頁面上“內容應該如何對事件作出反應”的問題。
2.用CSS分別單獨定義IE6、7、8的width屬性
IE6識別 * 、_
IE7識別 * 、+
IE8識別 * 、\9,\0
只有IE8識別 \0/
ie9只識別：\9
FF什麼都不識別
width:8px\0; /*ie8*/
+width:7px; /*ie7*/
_width:6px; /*ie6*/
3.正則表達式驗證郵箱合法性
<script type="text/javascript">
function isEmail(str){
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
return reg.test(str);
}
var str = '[email protected]';
document.write(isEmail(str)+'<br />');
var str2 = '[email protected]';
document.write(isEmail(str2)+'<br />');
var str3 = '[email protected]';
document.write(isEmail(str3)+'<br />');
var str4 = '[email protected]';
document.write(isEmail(str4)+'<br />');
var str5 = '[email protected]';
document.write(isEmail(str5)+'<br />');
</script> 4.alert出URL帶的參數值（可以考慮正則表達式）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>test</title>
<Script language="javascript">
//字符串截取
function getURLParam() {
var url = location.search; //獲取url中"?"符後的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request = new Object();
Request = getURLParam();
var email,urls;
email = Request['email'];
urls = Request['urls'];
alert(email+urls);
//正則式方式
function getURLParam2(name) {
var value = location.search.match(new RegExp("[?&]" + name + "=([^&]*)(&?)","i"));
return value ? decodeURIComponent(value[1]) : value;
}
alert(getURLParam2('email'));
alert(getURLParam2('urls'));
</Script>
</head>
<body>
<form>
<input name="email" type="text" value="[email protected]"/>
<input name="urls" type="text" value="http://www.baidu.com/"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>5.add(2)(3)(4)
<script type="text/javascript">
function add(n){
return function(x){
n = n + x;
alert(n);
return arguments.callee;
}
}
add(2)(3)(4);
</script>6.選擇器的特殊性
1000：Style=""行內樣式
0100：ID選擇器
0010：類選擇器、屬性選擇器。僞類選擇器等
0001：標籤名選擇器
7.alert出ul下li的鏈接，並阻止鏈接跳轉
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="test">
<li><a href="http://www.baidu.com" >test1</a></li>
<li><a href="http://www.google.com" >test2</a></li>
<li><a href="http://www.sohu.com" >test3</a></li>
</ul>
</body>
<script src="jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
$("ul").click(function(){
var arr1 = $("ul").find("a");
$.each(arr1, function(i,val){
//alert(i);
alert(val);
});
return false;
});
});
</script>
</html>
8.編碼實現以下佈局
<html>
<head>
<style>
.top{
width:100%;
height:10%;
background:none repeat scroll 0 0 red;
}
.main{
width:100%;
height:80%;
}
.main-left{
width:10%;
height:100%;
background:none repeat scroll 0 0 yellow;
float:left;
}
.main-center{
width:80%;
height:100%;
background:none repeat scroll 0 0 gray;
float:left;
}
.main-right {
height: 100%;
width: 10%;
background: none repeat scroll 0 0 yellow;
float:right;
}
.foot{
width:100%;
height:10%;
background:none repeat scroll 0 0 pink;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main">
<div class="main-left"></div>
<div class="main-center"></div>
<div class="main-right"></div>
</div>
<div class="foot"></div>
</body>
</html>9.編碼實現以下佈局，讓圖片永遠保持垂直居中，並且4列圖片都在同一水平線
<html>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8"/>
<head>
<style>
.service1{
width:33.3333%;
height:100%;
float:left;
}
.service2{
width:33.3333%;
height:100%;
float:left;
float:left;
}
.service3{
width:33.3333%;
height:100%;
float:left;
}
h2{
height:10%;
position:relative;
text-align: center;
}
img{
width:100%;
}
.img{
position:relative;
}
p{
height:25%;
position:relative;
bottom:0;
}
</style>
</head>
<body>
<div class="service1">
<h2>標題1標題1標題1標題1標題1題1標題1標題1標題1標題1標題1標題1標題1標題1標題1標題1標題1標題1標題1</h2>
<div class="img"><img src="a.png"/></div>
<p>描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</p>
</div>
<div class="service2">
<h2>標題1標題1標題1標題1標題1標題1標題1標題1標題1標題1標題1標題1標題1標題1標題1</h2>
<div class="img"><img src="a.png"/></div>
<p>描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</p>
</div>
<div class="service3">
<h2>題1標題1</h2>
<div class="img"><img src="a.png"/></div>
<p>描述描述描述描述描述描描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</p>
</div>
</body>
</html>