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. Android学习笔记（三） UI布局

    每一个布局都有其适合的方式,另外,这几个布局元素可以相互嵌套应用,做出美观的界面. 一.线性布局(LinearLayout) 线性布局,这个东西,从外框上可以理解为一个div,他首先是一个一个从上往下 ...

  2. anaconda不错的

  3. python操作json数据格式--基础

    非常基础的json库的用法,后续添加数据格式.编码等内容 参考文章 json进阶 Python的json模块提供了一种很简单的方式来编码和解码JSON数据. 其中两个主要的函数是 json.dumps ...

  4. JavaScript学习之事件原理和实践

    1 基本概念 1.1 事件 JavaScript与HTML之间的交互是通过事件实现的. 事件是文档或浏览器窗口中发生的一些特定的交互瞬间,在事件上可以注册处理程序,以便当事件发生时,处理程序中的代码得 ...

  5. LoadRunner 中的 Unique Number 参数类型小结

  6. vue使用路由判断是否登录

    router.beforeEach((to, from, next) => { // console.log('to:' + to.path) if (to.path.startsWith('/ ...

  7. linux——(4)磁盘与文件系统管理

    概念一:linux-ext2文件系统 ext2在分区的时候会分成多个组块(block group)和一个启动扇区(boot sector),每一个组块内又有superblock.File system ...

  8. [BZOJ3514]CodeChef MARCH14 GERALD07加强版(LCT+主席树)

    3514: Codechef MARCH14 GERALD07加强版 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 2177  Solved: 834 ...

  9. BZOJ2754 [SCOI2012]喵星球上的点名 SA+莫队+树状数组

    题面 戳这里 题解 首先先把所有给出的姓名和询问全部接在一起,建出\(height\)数组. 某个串要包含整个询问串,其实就相当于某个串与询问串的\(lcp\)为询问串的长度. 而两个后缀\(Suff ...

  10. WEB架构师成长之路 二

    法宝一:牛人爱惜自己的时间. 时间就是金钱,时间就是生命,时间如同健康一样,如果时间都没有,那成功也就是浮云了.所以牛人总是很爱惜自己的时间,总是在想办法提高自己的做事效率.我突然想了起来,我QQ里有 ...