我主要用了层次选择器和属性选择器
可以随意选择,方便简单为主
大体CSS格式 大家自行构造
网页主体
<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>
script代码
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
$("dl>dt").click(function(){
$("#star,#director,#label,#drama").css({"color":"#FF0099","font-weight":"bold"});
});
$("#director").click(function(){
$("[title='导演']").css("font-weight","bold");
});
$("#label").click(function(){
$("#label+span").css({"background-color":"#E0F8EA","color":"#10A14B","padding-right":"2px","padding-left":"2px","padding-top":"2px","padding-down":"2px"});
$("#label+span+span").css({"background-color":"#E0F8EA","color":"#10A14B","padding-right":"2px","padding-left":"2px","padding-top":"2px","padding-down":"2px"});
});
$("[alt='收藏本片']").click(function(){
alert("收藏成功!");
});
})
</script>
要求
单击标题“非缘勿扰”,元素中有id属性的的文本(主演、导演、标签、剧情)颜色值为#FF0099,字体加粗显示
单击文本“导演”,文字“赖水清”为加粗
单击文本“标签”,它之后的“苏有朋”和“2013”的背景颜色为#E0F8EA,字体颜色为#10 A14B,并且文字与背景颜色上下边缘间距为2px,左右边缘边距为8px
单击图片“收藏”,弹出对话框,显示信息为“您已收藏成功!”