1.代码实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>腾讯微博</title>

    <style type="text/css">

    body {

        margin: 0px;

        background: url('imgs/wrapBg.jpg') no-repeat #EBF1F1;

    }

    #logo {

        margin: 30px 0 0 300px;

    }

    #myBody {

        width: 800px;

        height: 200px;

        border: 1px solid #000;

    }

    #myBdLeft {

        width: 590px;

        height: 100%;

        background: #fff;

        float: left;

    }

    #talkBox {

        text-align: left;

        margin: 0 0 0 25px;

    }

    #msgTxt {

        width: 540px;

        height: 80px;

        overflow: hidden;

        font-family: Tahoma, Arial;

        font-size: 14px;

        border: 1px solid gray;

    }

    #talkBox h2 {

        text-align: left;

        padding: 0px;

        margin: 0px;

        font: normal normal normal 18px/29px 'MicroSoft YaHei', SimHei;

    }

    #funBox {

        width: 540px;

    }

    #funBox a {

        color: #000;

        text-decoration: none;

        font-size: 14px;

    }

    .creatNew,

    .atSome,

    .insertFace,

    .uploadPic,

    .uploadVideo {

        background-position: -170px -33px;

        display: inline-block;

        height: 16px;

        padding-left: 18px;

    }

    .countTxt {

        color: #999;

        float: right;

        line-height: 33px;

        margin: 0 15px 0 0;

    }

    .countTxt em {

        font-family: Georgia, Tahoma, Arial;

        font-size: 26px;

        position: relative;

        top: -5px;

        vertical-align: middle;

    }

    .sendBtn {

        float: right;

        margin: 0 20px 0 0;

        padding: 0px;

        background: url(imgs/bg1.png) -117px -165px no-repeat;

        line-height: 33px;

        margin-left: 14px;

        height: 30px;

        width: 112px;

        border: 0px;

        cursor: pointer;

    }

    .sendBtn:hover {

        background: url(imgs/bg1.png) 0px -195px no-repeat;

    }

    #btnCloFri {

        cursor: pointer;

    }

    #myBdRight {

        background: #CCEBF4;

        width: 210px;

        height: 100%;

        float: right;

    }

    .atSomeList {

        position: absolute;

        background-color: #f0f0f0;

        border: 1px solid #a0a0a0;

        width: 60px;

        list-style: none;

    }

    .atSomeList a {

        text-decoration: none;

        color: #c0c0c0;

    }

    .showFace {

        position: absolute;

        background-color: #f0f0f0;

        border: 1px solid #a0a0a0;

        width: 200px;

    }

    </style>

    <!-- <script src="jquery-1.11.3.js" type="text/javascript"></script> -->

    <script src="jquery-1.8.2.min.js"></script>

    <script src="js/06weibo.js" type="text/javascript">

    </script>

</head>

<body>

    <imgs id="logo" src="imgs/b3_100901.png" alt="" />

    <center>

        <div id="myBody">

            <div id="myBdLeft">

                <div id="talkBox">

                    <h2>

                    <a>夏天来了，你懂得......</a></h2>

                    <textarea id="msgTxt"></textarea>

                    <div id="funBox">

                        <a href="javascript:void(0);" class="creatNew">话题</a>

                         <a href="javascript:void(0);" class="atSome">朋友</a>

                         <a href="javascript:void(0);" class="insertFace">表情</a>

                        <a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);" class="uploadVideo">视频</a>

                    </div>

                    <div id="sendBox">

                        <input type="button" class="sendBtn" value="" />

                        <span class="countTxt">还能输入<em>140</em>字</span>

                    </div>

                </div>

            </div>

            <div id="myBdRight">

            </div>

        </div>

    </center>

</body>

</html>

2.实际效果

jquery微博实例的更多相关文章

  1. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  2. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  3. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  4. JQuery: 微博演示

    演示图: 完成图: 微博演示代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  5. jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】

    本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...

  6. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  7. jQuery 验证实例(shopnc二次开发)

    shopnc 商家用户实现添加用户与前台用户分离, jQuery 验证实例 equalTo:等于 <div id="saleRefund" show_id="1&q ...

  8. 一个简单的jQuery插件开发实例

    两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...

  9. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. C++实践积累

    C++ STL vector 如何彻底清空一个vector? 实践证明,vector.clear()并不能把vector容量清空,只会让vector.size()变为零,依然很占内存.那如何让vect ...

  2. Mysql锁的类型与简析

    数据库锁设计的初衷是处理并发问题.作为多用户共享的资源,当出现并发访问的时候,数据库需要合理地控制资源的访问规则.而锁就是用来实现这些访问规则的重要数据结构. 根据加锁的范围,MySQL 里面的锁大致 ...

  3. c++ primer 2 变量和基本类型

    2.1 基本内置类型 基本内置类型是C++“自带”的类型,区别于标准库定义的类型.使用时不需要应用标准库就可以使用,我们可以理解为数字型有下面这些 整形:就是整数或者是没有小数位的数.它包括bool( ...

  4. 在 github 中新建仓库后，如何上传文件到这个仓库里面。

    在 github 中新建仓库后,如何上传文件到这个仓库里面. libin@hglibin MINGW64 /e/github.io (master) $ git remote libin@hglibi ...

  5. Vibrator震动

    今天又学一招: Android手机中的震动由Vibrator实现.设置震动事件,需要知道其震动的时间长短.震动的周期等. 在 Android Vibrator中,震动的时间以毫秒计算(1/1000秒) ...

  6. 转：win32下的堆管理系统

    转:https://bbs.pediy.com/thread-224136.htm 准备刷漏洞战争中的堆溢出部分,但是对于堆的了解较少,在这里记录一下关于堆的学习记录,有错误请各位大大拍砖 参考: & ...

  7. 湖南大学ACM程序设计新生杯大赛（同步赛）H - Yuanyuan Long and His Ballons

    题目描述 Yuanyuan Long is a dragon like this picture?                                     I don’t know, ...

  8. Android之 内容提供器（1）——使用内容提供器访问其它程序共享的数据

    (下面内容是阅读郭霖大神的<第一行代码>总结的) 1 概述 内容提供器是Android实现跨程序共享数据的标准方式. 内容提供器的的使用方法有两种, 一是使用已有的内容提供器对其他程序的数 ...

  9. python 进程间通信(下)

    利用 Value,Array   先说明这个方法并不常用,因为有更灵活的方法 from multiprocessing import Process,Value,Array def f(n,a,not ...

  10. luogu P1965 转圈游戏

    题目描述 n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从0 到 n-1.最初,第 0 号小伙伴在第 0 号位置,第 1 号小伙伴在第 1 号位置,……,依此 ...