设为首页收藏本站 钱三岛支付
开启辅助访问

源码之家

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: 活动 交友 discuz
源码之家»论坛 › 开发语言 › PHP › [LAMP兄弟连新版原创视频教程].01_网站开发构件概述，视 ...
返回列表 发新帖
查看: 1458|回复: 0
打印 上一主题 下一主题

[LAMP兄弟连新版原创视频教程].01_网站开发构件概述，视频+ppt+源码

[复制链接]
海带丝

41

主题

48

帖子

53

积分

注册会员

Rank: 2

积分
53
跳转到指定楼层
楼主
发表于 2014-1-8 10:45:36 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 海带丝 于 2014-1-8 10:46 编辑

网站软件介绍

B/S软件体系统结构

动态网站介绍

动态网站开发所需要的Web构件

开发选项卡实例

通过实例了解Web构件

源码部分：
  1. card.css
  2. body {
  3.     font-size:12px;
  4. }

  6. #main {
  7.     width:300px;
  8.     height:200px;
  9. }

  11. #main h3 {
  12.     width:80px;
  13.     height:25px;
  14.     background:#ddd;
  15.     float:left;
  16.     margin:0px;
  17.     padding:0px;
  18.     text-align:center;
  19.     line-height:25px;
  20.     font-size:12px;
  21.     margin-right:2px;
  22.     border:2px solid white;
  23. }

  25. a {
  26.     color:white;
  27. }

  29. #main #content {
  30.     background:#888;
  31.     width:300px;
  32.     height:175px;
  33.     float:left;
  34. }

  36. #tit .titin {
  37.     border:2px solid #888;
  38.     background:#888;
  39. }
复制代码
card.js
  1. $(function(){
  2.     $("#content").load("card.php?cid=1");
  3.    
  4.     var dt=null;
  5.     $("#main #tit h3").mouseover(function(){
  6.         var obj=$(this);
  7.         dt=setTimeout(function(){
  8.             obj.addClass("titin").siblings("h3").removeClass("titin");
  9.             $("#content").load(obj.children("a").eq(0).attr("href"));
  10.         }, 300)
  11.    

  13.     }).mouseout(function(){
  14.         clearTimeout(dt);
  15.     });
  16. });
复制代码
card.php
  1. <?php
  2.     $cid=$_GET["cid"];
  3.     $mysqli=new mysqli("localhost", "root", "123456", "card");

  5.     $result=$mysqli->query("select id, title from card where cid={$cid}");

  7.     while($row=$result->fetch_assoc()){
  8.         echo '<ul>';
  9.         echo '<li><a href="con.php?id='.$row["id"].'">'.$row["title"].'</a></li>';
  10.         echo '</ul>';
  11.     }   
复制代码
card.sql
  1. create table card(
  2.     id int,
  3.     cid int,
  4.     title varchar(60)
  5. );

  7. insert into card(id, cid, title) values(1, 1, '1111111111111111111');
  8. insert into card(id, cid, title) values(2, 1, '2222222222222222222');
  9. insert into card(id, cid, title) values(3, 1, '3333333333333333333');
  10. insert into card(id, cid, title) values(4, 2, '444444444444444444');
  11. insert into card(id, cid, title) values(5, 2, '555555555555555555');
  12. insert into card(id, cid, title) values(6, 2, '666666666666666666');
  13. insert into card(id, cid, title) values(7, 3, '7777777777777777');
  14. insert into card(id, cid, title) values(8, 3, '888888888888888888');
  15. insert into card(id, cid, title) values(9, 3, '9999999999999999999999');

复制代码
card.html
  1. <html>
  2.     <head>
  3.         <title>网页选项卡</title>
  4.         <link rel="stylesheet" type="text/css" href="card.css">
  5.         <script src="jquery.js"></script>
  6.         <script src="card.js"></script>
  7.     </head>   

  9.     <body>
  10.         <div id="main">
  11.             <div id="tit">
  12.                 <h3 class="titin"><a href="card.php?cid=1">第一页</a></h3>
  13.                 <h3><a href="card.php?cid=2">第二页</a></h3>
  14.                 <h3><a href="card.php?cid=3">第三页</a></h3>
  15.             </div>   

  17.             <div id="content">


  20.             </div>   
  21.         </div>   
  22.     </body>   
  23. </html>   
复制代码
由于文件过大，不允许上传所以在百度网盘分享了，下载地址在上传文件中，象征性的收费1个金币；


下载地址：




本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|( 鲁ICP备13018729号-5 )   

GMT+8, 2024-5-9 03:56 , Processed in 0.058708 second(s), 24 queries .

www.downcms.com

CopyRight Downcms

快速回复 返回顶部 返回列表