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. Mysql学习之order by的工作原理

    在你开发应用的时候,一定会经常碰到需要根据指定的字段排序来显示结果的需求.假设你要查询城市是“杭州”的所有人名字,并且按照姓名排序返回前 1000 个人的姓名.年龄. 查询语句为: ; 全字段排序 为 ...

  2. Jmeter------将JDBC Request的查询结果作为另一个接口的请求参数

    一.前言 jmeter已配置连接成功数据库,不会的可查看:https://www.cnblogs.com/syw20170419/p/9832402.html 二.需求 将JDBC Request的r ...

  3. 解决 .net HttpClient 调用时出现的 "A task was cancelled" 错误

    近日在系统中集成ElasticClient客户端,自动创建索引.删除索引,发现通过 ElasticClient 的 LowerLevelClient 无法正确返回结果,但是索引已成功创建或删除. 并会 ...

  4. 第三方登陆微博、qq、微信

    源文:http://blog.csdn.net/tivonalh/article/details/60954373 假设是已经申请完成各平台开发者账号. 先来简单的,微博和QQ 微博: 引入微博JS ...

  5. Window 下一台机器配置三个Tomcat实例

    下面我们把配置的详细过程写在下面,以供参考:(此例以配置三个Tomcat为例) 1. 下载apache-tomcat-8.0.63,下载下来的文件为apache-tomcat-8.0.63.zip. ...

  6. git clone https

    git clone 不需要输入密码步骤 1, vim ~/.git-credentials 2, git config --global credential.helper store 3, vim ...

  7. 深度学习应用系列（四）| 使用 TFLite Android构建自己的图像识别App

    深度学习要想落地实践,一个少不了的路径即是朝着智能终端.嵌入式设备等方向发展.但终端设备没有GPU服务器那样的强大性能,那如何使得终端设备应用上深度学习呢? 所幸谷歌已经推出了TFMobile,去年又 ...

  8. python计数器Count

    python计数器Count # -*- coding:utf-8 -*- """ python计数器Counter 需导入模块collections "&qu ...

  9. Elasticsearch 删除索引下的所有数据

    下面是head中操作的截图 #清空索引 POST quality_control/my_type/_delete_by_query?refresh&slices=5&pretty { ...

  10. HDU 1272（并查集）

    小希的迷宫 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...