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. Jmeter-----保存到响应文件

    在jmeter中使用保存响应到文件 ------适用于非GUI模式执行脚本时,无法查看报错的信息. 1.添加组件: 2.各个配置项说明: 1.名称:即组件在整个测试计划中的名称显示,建议设置为用意义的 ...

  2. centos 下tomcat 自动启动

    1.修改start.sh文件 vim /usr/local/tomcat8/bin/startup.sh 在文件头增加以下内容: #!/bin/sh # chkconfig: 2345 97 00 # ...

  3. DOM的查找与操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. Linux性能工具

    Brendan Gregg 目前是 Netflix 的高级性能架构师 ,他在那里做大规模计算机性能设计.分析和调优.他是<Systems Performance>等技术书的作者,因在系统管 ...

  5. [实战]MVC5+EF6+MySql企业网盘实战(8)——文件下载、删除

    写在前面 上篇文章通过iframe实现了文件的无刷新上传.这篇我们将实现文件的下载与删除. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySq ...

  6. [实战]MVC5+EF6+MySql企业网盘实战(5)——ajax方式注册

    写在前面 今天贴合到实际的客户需求仔细的想了下,其实在userInfo这个类里面很多字段都不是必须的.有很多的事业单位根本就不能上网,填写的邮箱也是exchange的,个人的详细信息都在ad里面可以取 ...

  7. import xxx from 和 import {xxx} from的区别

    1.vue import FunName from ‘../xxx’ 1.js export defualt function FunName() { return fetch({ url: '/ar ...

  8. oracle创建简单的包

    --规范 create or replace package test_pkg is --test_pkg为包名 procedure showMessage; --声明一个过程 function my ...

  9. Java SHAA加密

    package com.util; import java.security.MessageDigest; /** * 采用SHAA加密 */ public class SHAUtil { /*** ...

  10. 【WPF】Behavior的使用

    如何将一个行为附加到某个元素上呢?我们可以通过自定义一个Behavior! 我们首先看一下IAttachedObject接口,Behavior默认继承之这个接口 // 摘要: // 供可以附加到另一个 ...