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="data: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="data: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="data: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="data: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="data:images/flv01.jpg"><p>昊花梦</p><span>1</span></li><li><img src="data: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"});});

效果

鼠标移动到目录那里显示（没调好有大神指导一下？）

jquery-js 美化页面相关推荐

snowfall.jquery.js实现页面飘花效果
效果图如下:录制gif的时候有点问题,清晰度大家不用在意哈引入第三方js: 大家可以去官网下载,或者点这自取:https://download.csdn.net/download/tt1847348 ...
jquery、js父子页面操作总结
jquery 父.子页面之间页面元素的获取,方法的调用 https://www.cnblogs.com/it-xcn/p/5896231.html 一.jquery 父.子页面之间页面元素的获取,方法 ...
js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
html页面美化代码时间,CSS+JS美化过漂亮的日历控件
CSS+JS美化过漂亮的日历控件 - www.webdm.cn var months = new Array("一", "二", "三",& ...
jquery.nicescroll.js 美化滚动条
1. 引用jquery.js和jquery.nicescroll.js <script type="text/javascript" src="js/jquery. ...
Django实战之美化页面
书接https://blog.csdn.net/weixin_32759777/article/details/104352341 美化是增加样式而已增加themes目录在正式套静态页面之前,先调 ...
HTML下拉菜单去掉点,jQuery点击页面其他部分隐藏下拉菜单功能
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...
chosen.jquery.js 插件的使用和总结
chosen.jquery.js 插件的使用及总结 1. chosen插件简单的介绍: Chosen 是select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.此外,还可 ...
Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...

jquery-js 美化页面

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

js

效果

项目

js

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

js

css

结果

项目四

js

效果

鼠标移动到目录那里显示（没调好有大神指导一下？）

jquery-js 美化页面相关推荐

最新文章

热门文章

jquery-js 美化页面

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

js

效果

项目

js

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

js

css

结果

项目四

js

效果

鼠标移动到目录那里显示（没调好 有大神指导一下？）

jquery-js 美化页面相关推荐

最新文章

热门文章

鼠标移动到目录那里显示（没调好有大神指导一下？）