jquery-js 美化页面

项目一(使用jQuery美化英雄联盟简介页)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>使用jQuery美化英雄联盟简介页 </title>

<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/2book.js"></script></head>
<body>
 <h1>英雄联盟</h1> 
<p>    《英雄联盟》,简称LOL。</p>
<p id="content">
    由<strong>Riot Games </strong>开发,为3D竞技场战游戏,其
    <span>主创团队由实力强劲的
        <strong>魔兽争霸</strong>
        系列游戏多人<span>即时对战</span>自定义地图开发团队
    </span>...
    <a href="#">更多详情</a>
</p>
<h2>目录</h2>
<ul class="txt_box">
    <li class="current">开发团队</li>
    <li>游戏周边</li>
    <li>游戏介绍</li>
    <li>配置需求</li>
    <li>游戏背景</li>
</ul>
</body>
</html>


js

$(function(){
	$("h1+p").css("background","yellow");
	$("#content span").css("background","#FF3333");
	$("#content>span>span").css("background","#B8B8B8");
	$(".current").css("background","#FF00CC");
	
});

效果

在这里插入图片描述

项目

<!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/3book.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>

js

$(function(){
	$("dt").click(function(){                  		//点击<dt>非缘勿扰</dt> 显示id的颜色
		$("dd span[id]").css({"color":"red","font-size":"15px","font-weight":"bold"});	//dd下的里面的id
	//});
	
	$("dd span[title]").css({"color":"#000000","font-size":"15px","font-weight":"bold"});
		$("dt").click(function()							{//添加点击显示效果
		//$("#label~span").css({"color":"	#00FF00","font-size":"15px","font-weight":"bold"});
	});
	});
});

项目三(隔行变色的商品列表)

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>隔行变色的商品列表</title>
	 <link rel="stylesheet" href="css/product.css">
 	<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
 	<script type="text/javascript" src="js/product.js"></script>
 </head>
 <body>
	<div class="contain">
		<table border="0" width="100%" cellspacing="0">
			<tr class="t-head">
				<th width="50%">商品</th>
				<th width="10%">单价</th>
				<th width="10%">数量</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>
					<img src="images/f1.jpg" width="50" height="50"/>
					<a href="">丹幕妮通勤波点印花毛衣</a>
				</td>
				<td>180.0</td>
				<td>3</td>
				<td><a href="javascript:void(0);" id="del">删除</a></td>
			</tr>
			<tr>
				<td>
					<img src="images/f2.jpg" width="50" height="50"/>
					<a href="">预售太平洋女装连衣裙</a>
				</td>
				<td>765.0</td>
				<td>4</td>
				<td><a href="javascript:void(0);" id="del">删除</a></td>
			</tr>
			<tr>
				<td>
					<img src="images/f3.jpg" width="50" height="50"/>
					<a href="">丹幕妮通勤红色小外套</a>
				</td>
				<td>456.0</td>
				<td>2</td>
				<td><a href="javascript:void(0);" id="del">删除</a></td>
			</tr>
			<tr>
				<td>
					<img src="images/f4.jpg" width="50" height="50"/>
					<a href="">漫巴森秋装新款套头衫</a>
				</td>
				<td>140.0</td>
				<td>1</td>
				<td><a href="javascript:void(0);" id="del">删除</a></td>
			</tr>
		</table>
	</div>
 </body>
</html>

js

$(function(){
	$("table tr:even").css("background","#FFFF33");//双
	$("table tr:odd").css("background","#FFFFFF");
	
});

css


*{padding:0;margin:0;}
.contain{width:100%;margin:0px auto;}

tr{text-align:center;}
th{line-height:45px;background:#0000ff; color: #ffffff;}
td{border-bottom:1px #d7d7d7 solid;}
td,td a{padding:8px 0;color:#666;font-size:14px;}
td img{vertical-align:middle;}
td img,td a{display:inline-block;margin-right:8px;}

结果

在这里插入图片描述

项目四

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全网热播视频</title>
    <link rel="stylesheet" href="css/play.css">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/dianshi.js"></script></head>
<body>
<section id="play">
    <h1>全网热播视频</h1>
    <ul>
        <li><img src="images/flv01.jpg"><p>昊花梦</p><span>1</span></li>
        <li><img src="images/flv02.jpg"><p>好先生</p><span>2</span></li>
        <li>
            <ol>
                <li><span>3</span>三八线<p>加入看单</p></li>
                <li><span>4</span>吉详天宝<p>加入看单</p></li>
                <li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
                <li><span>6</span>仙剑云之凡<p>加入看单</p></li>
                <li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
                <li><span>8</span>琅琊榜<p>加入看单</p></li>
                <li><span>9</span>那年青春我们正好<p>加入看单</p></li>
                <li><span>10</span>乡村受情8(上)<p>加入看单</p></li>
            </ol>
        </li>
    </ul>
</section>
</body>
</html>

js

$(function(){
	$("ul>li:last").css("background","#D3D3D3");
	$("span:lt(3)").css("background","#F0E68C");//小于3,从0开始
	$("span:gt(2)").css("background","#606060");//大于2
	$("span:lt(2)").css("margin-left","20px");
	$("h1:lt(2)").css("margin-left","20px");
	$("img:lt(2)").css("margin-left","20px");
	//$("p").css("display", "block");
	$("ol li").mouseover(function(){
		$(this).find("p").show();
	});
	$("ol li").mouseout(function(){//鼠標移出
		$(this).find("p").hide();
	});
	//添加两个箭头的效果
    $(" ol li:eq(0),ol li:eq(2),ol li:eq(3),ol li:eq(4)").css({
        "background-image": "url(images/orange.jpg)",
        "background-repeat": "no-repeat",
        "background-position": "right -2px"
    });
    $(" ol li:eq(1),ol li:eq(5),ol li:eq(6),ol li:eq(7)").css({
        "background-image": "url(images/green.jpg)",
        "background-repeat": "no-repeat",
        "background-position": "right -2px"
    });
	
});

效果

在这里插入图片描述

鼠标移动到目录那里显示(没调好 有大神指导一下?)

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值