练习2:制作非缘勿扰页面特效的源代码

Posted 司徒魏源

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了练习2:制作非缘勿扰页面特效的源代码相关的知识,希望对你有一定的参考价值。

 使用 jQuery  的练习 要求如下:

   

使用jQuery 之前记得去下载一个jquery的架包,而我使用的是jquery-3.2.1版本,放在WebRoot包下,可以自己创建一个包.

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <title>制作非缘勿扰页面特效 </title>
 7 <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
 8 <script type="text/javascript">
 9     //创建一个页面加载事件
10     $(function() {
11     //导演字体进行加粗
12     $("[class=\'dy\']").css("fontweight:boid");
13     $("b").css({"color":"blue","fontSize":"36xp"});
14     //添加单击事件
15     $("[alt=\'收藏本片\']").click(function(){
16     //js
17     alert("收藏");
18     });
19     
20 
21     });
22 </script>
23  <style type="text/css">
24  .main{
25      width:500px;
26     }
27 .left{
28     width:200px;
29     float:left;
30 }
31 .right{
32     width:300px;
33     float:left;
34 }
35  </style>
36  
37 
38 </head>
39 <body>
40       <div class=\'main\' >
41          <div class=\'left\' id="ccc">
42             <img src="images/pic.gif" />
43             <br/><br/><br/><br/>
44             <img src="images/col.gif" alt="收藏本片" />
45         </div>
46         <div class=\'right\'>
47             <dl>
48                 <dt><b>非缘勿扰</b></dt>
49                 <dd>
50                 <p>
51                     <strong>主演:</strong><span>苏有朋/秦岚/傅艺伟等</span>
52                 </p>
53                 <p>
54                     <strong class=\'dy\'>导演:</strong><span>赖水清</span>
55                 </p>
56                 <p>
57                     <strong id=\'bq\'>标签:</strong><span><a>苏有朋</a> <a> 国产电视剧</a>  <a>2013</a> <a>连续剧</a></span>
58                 </p>
59                 <p>
60                     <strong>剧情:</strong><span>当代都市,大年女刘林、杨阳都在寻找自己的如意郎君,刘林偶遇陆氏房地产总裁路西诺,两人成了欢喜冤家,遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多 </a></span>
61                 </p>
62                 </dd>
63             </dl>
64             <img src="images/btn.gif"/>
65         </div>
66      </div>
67     
68 </body>
69 </html>

 

以上是关于练习2:制作非缘勿扰页面特效的源代码的主要内容,如果未能解决你的问题,请参考以下文章

php练习-javascript,JQuey制作页面切换

新闻登录页面制作练习

Polo360页面制作练习

Python练习册 第 0013 题: 用 Python 写一个爬图片的程序,爬 这个链接里的日本妹子图片 :-),(http://tieba.baidu.com/p/2166231880)(代码片段

练习2:制作开心庄园页面

python 用于在终端中运行的sublime text 3的简单代码片段制作工具