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. Spring MVC数据绑定（一）

    1.数据绑定介绍 在执行程序时,Spring MVC会根据客户端请求参数的不同,将请求消息中的信息以一定的方式转换并绑定到控制器类的方法参数中.这种将请求消息数据与后台方法参数建立连接的过程就是Spr ...

  2. springcloud 出现unavailable-replicas

    springcloud 出现unavailable-replicas 原因: 1. 部分服务不可用 2. 直接使用了ip地址作为hostname application.properties # 不能 ...

  3. 查看loadrunner代码行号

    运行前报错,如Syntax error on line 133 near ";"那么如何查看代码的行号呢?解决方法:看代码行号时,直接将鼠标在代码的某处单击,在窗体的最下方右侧能看 ...

  4. windows下怎样使用md命令一次建立多级子目录

    在Windows系统中一次只能够创建一个子目录,在命令提示符窗口则可以一次性创建多个子目录,例如如果想在f盘创建多级子目录,则md 23\13\65\45,后面的数字随便都可以.如果想一次性删除多级目 ...

  5. POJ 1597 Function Run Fun

    记忆化搜索. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> ...

  6. mcnp的重复探测器单元计数-fmesh卡的介绍

    第一步:首先前面是cell surface和material等的定义,忽略,然后写上下面的这些抽样信息等.最后写入fmesh卡的信息定义 第二步:计算上述输入卡,得到结果,显然不在outx,x代表p ...

  7. Centos 7 mysql 安装使用记

    某次把美团云1G 1核 centos 7 装到死机,明白了源码编译安装mysql是个大坑,遂绕路到其他大道. 安装命令 wget http://dev.mysql.com/get/mysql-comm ...

  8. React Native 系列(八)

    前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...

  9. NOIP2017 D1T1小凯的疑惑

    这应该是近年来最坑的第一题了. 我第一眼看到这题上来就打表,数据范围告诉我复杂度应该是log级的,然而一个小时后才发现是一个输出结论. 设较小数是a 较大数是b 写出几组可以发现一个规律就是一旦出现连 ...

  10. Java反射机制涉及的类常见方法使用总结

    import java.lang.reflect.Constructor; import java.lang.reflect.*; /*Class:代表一个字节码文件的对象,每当有类被加载进内存,JV ...