<!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'>导演：</span><span title="导演">赖水清</span></dd>
<dd><span id='label'>标签：</span><span>苏有朋</span> 国产电视剧 <span>2013</span> 连续剧 </dd>
<dd><span id="drama">剧情：</span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<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
网友评论