<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
? ? <title>制作非緣勿擾頁面特效 </title>
<link rel="stylesheet" href="css/style.css">
? ? <script type="text/javascript" src="js/jquery-1.12.4.js"></script>\
? ? <script type="text/javascript" src="js/Untitled-1.js"></script>
</head>
<body>
<div class='main' >
? ? <div class='left'>
? ? ? ? <img src="images/pic.gif" />
? ? ? ? ? ? <br/><br/>
? ? ? ? ? ? <img src="images/col.gif" alt="收藏本片"/>
? ? ? ? </div>
? ? ? ? <div class='right'>
? ? ? ? <dl>
? ? ? ? ? ? <dt>非緣勿擾</dt>
? ? ? ? ? ? <dd><span id="star">主演：</span>蘇有朋/秦嵐/傅藝偉等</dd>
<dd><span id='director'>導(dǎo)演：</span><span title="導(dǎo)演">賴水清</span></dd>
<dd><span id='label'>標(biāo)簽：</span><span>蘇有朋</span>? 國產(chǎn)電視劇? <span>2013</span>? 連續(xù)劇 </dd>
<dd><span id="drama">劇情：</span>當(dāng)代都市，大年女劉林、楊陽都在尋找自己的如意郎君，劉林偶遇陸氏房地產(chǎn)總裁路西諾，兩人成了歡喜冤家，遭到暗戀西諾的丁娟的嫉恨。。。<a href="#">點擊了解更多 </a></dd>
? ? ? ? ? ? </dl>
? ? ? ? ? ? <img src="images/btn.gif"/>
? ? ? ? </div>
? ? </div>
</body>
</html>
body,div,p,dl,dt,dd{padding: 0; margin: 0;}
body{font-size: 12px; line-height: 28px; font-family: "微軟雅黑";}
.main{
? ? width:500px;
? ? margin: 0 auto;
}
.left{
? ? width:160px;
? ? float:left;
}
.main dt{font-weight: bold; font-size: 14px; line-height: 35px;}
.right{
? ? width:340px;
? ? float:left;
}
$(document).ready(function(){
$("dt").click(function(){
$("dd span[id]").css({
? "color":"#FF0099",
? "font-weight":"bold"
});
$("#director").click(function(){
? ? ? $("span[title]").css({
"font-weight":"bold"
});
});
$("#label").click(function(){
$("#label~span").css({
? ? "color":"#10a14b",
"background-color":"#E0F8EA",
"padding-top":"2px",
"padding-bottom":"2px",
"padding-left":"8px",
"padding-right":"8px"
});
});
$("img[alt]").click(function(){
$(this).css(
alert('您已收藏成功！')
);
});
});
});
jQuery
