js实现新浪微博首页效果


Posted in Javascript onOctober 16, 2015

我们先来看下效果图

js实现新浪微博首页效果

CSS

* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #eee; }
#t_sina { width: 390px; padding: 10px; background: #fff; margin: 50px auto 0; font-size: 12px; border: 1px solid #ccc; }
#t_sina h2 { padding: 10px 0 10px 10px; border-bottom: 1px solid #ebebeb; color: #333; font-size: 14px; }
#content { width: 390px; height: 345px; overflow: hidden; }
#content ul { width: 390px; }
#content li { width: 390px; padding: 10px 0; overflow: hidden; border-bottom: 1px dotted #9f9f9f; }
#content .pic { float: left; width: 50px; height: 50px; }
#content .pic a { display: block; width: 50px; height: 50px; background: #eee; }
#content .pic a:hover { background: #00FFFF; }
#content p { float: right; width: 315px; margin-right: 10px; display: inline; line-height: 16px; color: #666; }
#content p a { color: #6eafd5; font-family: arial; text-decoration: none; }
#content p a:hover { text-decoration: underline; }
#content p span { color: #999; }
#t_sina dt { font-size: 14px; height: 40px; line-height: 40px; }
#t_sina dd { padding-bottom: 5px; color: #666; }
#t_sina .text { width: 320px; height: 20px; line-height: 20px; font-size: 12px; font-family: arial; color: #666; position: relative; left: 20px; }
#t_sina textarea { width: 320px; height: 80px; line-height: 20px; overflow: auto; font-size: 12px; font-family: arial; color: #666; position: relative; left: 20px; }
#t_sina .btn { position: relative; left: 55px; width: 120px; height: 30px; }

JS

<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="t_sina.js"></script>

HTML

<div id="t_sina">

 <h2>大家正在说</h2>
 
 <div id="content">
  <ul>
   <li>
    <div class="pic"><a href="###"></a></div>
    <p><a href="#">夜话燕子</a>:今晚,我是一个超级大的电灯泡,探照灯级别的。现在我终于消失了,一个人在江边走走也不错诶。<br /><span>3分钟前</span></p>
   </li>
   <li>
    <div class="pic"><a href="###"></a></div>
    <p><a href="#">xinshangzeyu_2xr</a>:我来自甚地?去甚地?是甚?原形是甚?是你甚?出生为甚?--十岁。。。<br /><span>3分钟前</span></p>
   </li>
   <li>
    <div class="pic"><a href="###"></a></div>
    <p><a href="#">左手单刀</a>:哎,我这算幸运么?值个破班吧居然能遇见这么罕见的状况!所以电话都断了!全都告警!还查不出故障!好吧,就这么一直没电话吧,真安静啊。。。<br /><span>3分钟前</span></p>
   </li>
   <li>
    <div class="pic"><a href="###"></a></div>
    <p><a href="#">斜风细雨时思念蔓延</a>:原单位领导因为在我临行时不经然冒出了三个类母亲字句,为此付出了些许代价。我始终认为该同学智商很高,希望他可以把原单位带好~他应该也会带好,只是希望随着时间的推移他会重用所应重用的人,莫被弄臣迷了双眼~3分钟前<br /><span>3分钟前</span></p>
   </li>
   <li>
    <div class="pic"><a href="###"></a></div>
    <p><a href="#">粘得不得了</a>:奖学金还不够塞牙缝。。我的和众人的<br /><span>3分钟前</span></p>
   </li>
  </ul>
 </div>
 
 <dl>
  <dt>-发布微博-</dt>
  <dd>姓名:<input id='btn_name' class="text" type="text" /></dd>
  <dd>内容:<textarea id='btn_msg'></textarea></dd>
  <dd><input class="btn" id="btn_submit" type="button" value="提交" /></dd>
 </dl>

</div>

<ul id="tmp_container" style="height:0px; overflow:hidden;"></ul>
Javascript 相关文章推荐
javascript测试题练习代码
Oct 10 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
Vue实现附件上传功能
May 28 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
JS模拟Dialog弹出浮动框效果代码
Oct 16 #Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 #Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 #Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 #Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 #Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 #Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 #Javascript
You might like
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
python numpy存取文件的方式
2020/04/01 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Python 解析xml文件的示例
2020/09/29 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
投标单位介绍信
2014/01/09 职场文书
初一英语教学反思
2014/01/11 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
标准单位租车协议书
2014/09/23 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python