仿新浪部分静态页面展示

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <link href="css/demo.css" rel="stylesheet" />
 7 </head>
 8 <body>
 9     <div id="dnews">
10         <div id="dhead"><a href="#" target="_blank" >汽车/在线购车</a></div>
11         <div id="news">
12             <div id="newspic"><a href="#"><img src="img/1.jpg" /></a></div>
13             <div id="newstitle"><a href="#">选贵的也要选对的 热销豪华中型SUV推荐</a></div>
14         </div>
15         <ul id="tabs">
16             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
17             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
18             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
19             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
20             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
21             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
22             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
23         </ul>
24     </div>
25 </body>
26 </html>
 1 a{
 2     text-decoration:none;
 3 }
 4 #dnews{
 5     width:320px;
 6     height:264px;
 7
 8 }
 9 #dhead{
10     width:320px;
11     height:30px;
12     padding-left:10px;
13     box-sizing:border-box;
14     line-height:30px;
15     background-color:rgba(76,255,0,0.1);
16 }
17 #dnews #dhead a:hover{
18     color:blue;
19 }
20 #news{
21     width:320px;
22     height:70px;
23     margin-top:10px;
24 }
25 #news #newspic{
26     float:left;
27     width: 36%;
28 }
29 #news #newstitle{
30       width: 64%;
31     /* padding-left: 10px; */
32     font-size: 16px;
33     /* margin-left: 5px; */
34     /* padding-left: 4px; */
35     float: left;
36 }
37 #news #newstitle a:hover{
38     color:blue;
39 }
40 #tabs{
41     list-style-type:none;
42     color:black;
43     font-size:14px;
44     line-height:20px;
45     float:left;
46     margin: 0px  -40px;
47
48 }
49 #tabs .tab a:hover{
50     color:red;
51 }
52 .tab{
53     background-image:url(../img/2.png);
54     background-repeat:no-repeat;
55     padding-left:20px;
56     background-position-y:center;
57 }
时间: 2024-08-16 15:41:16

仿新浪部分静态页面展示的相关文章

仿新浪首页、主题、详情页,纯html静态页面

仿新浪首页.主题.详情页,纯html静态页面,下载地址: http://download.csdn.net/detail/sweetsuzyhyf/8085535

Node.js静态页面展示例子2

例程下载:https://files.cnblogs.com/files/xiandedanteng/nodejsStaticHtmlSample.rar 页面效果: Html页面代码(注意用文本编辑器如Editplus3保存文件时要指定编码为UTF-8,否则容易出现乱码): <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="

android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)

首先我们还是看一些示例:(网易,新浪,百度) 显示效果都不错,可是手感就不一样了,百度最棒,网易还行,新浪就操作很不好,这里我说的是滑动切换图片.自己可以测试一下.不得不说牛叉的公司确实有哦牛叉的道理. 下面我简单的介绍下实现方法:其实就是listview addHeaderView.只不过这个view是一个可以切换图片的view,至于这个view怎么做,就要根据自己的喜爱了,实现有多种方法,下面我简单介绍一下. 第一种:ViewFlipper+GestureDetector 主布局就是一个li

【转】Android android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)

首先我们还是看一些示例:(网易,新浪,百度)      下面我简单的介绍下实现方法:其实就是listview addHeaderView.只不过这个view是一个可以切换图片的view,至于这个view怎么做,就要根据自己的喜爱了,实现有多种方法,下面我简单介绍一下. 第一种:ViewFlipper+GestureDetector 主布局就是一个listview,这里就不介绍了,我介绍下切换图片布局head_iamge.xml 1 <span style="font-size:12px;&

Android仿新浪新闻SlidingMenu界面的实现 .

先看看原图: 如图所示,这种侧滑效果以另一种方式替代了原先tab导航的那种用户体验方式 给人耳目一新的感觉,现已被广大知名应用所效仿,如新浪新闻,网易新闻,人人网等 那么这种效果该如何实现呢?那就需要用到一个开源库SlidingMenu Github地址:https://github.com/jfeinstein10/SlidingMenu 里面包含了demo示例,相关效果图如下: 同时该库又依赖另一个开源库ActionBarSherkLock ,有关该库的介绍,请看此博文http://blog

仿新浪下拉菜单

要求 仿新浪网,鼠标移入显示下拉菜单,鼠标移出隐藏下拉菜单,具体表现如下图: 代码 <ul> <li id="top">微博</li> <li class="hide">私信</li> <li class="hide">评论</li> <li class="hide">@我</li> </ul> <sc

高仿新浪点击图片放大(可以拖动,动态缩小放大,以及再次点击图片消失和保存图片的功能)

有图有真相: 最近在做项目的时候用到了点击图片放大效果,于是就开始实现,本以为挺简单的,实现起来还是遇到不少的小问题啊: 第一:只实现点击图片放大,再次点击消失,这个好实现: 第二:只实现图片可以拖动,而且可以动态缩小放大,这个也好实现: 第三:第一 和第二同步实现就出现问题了: 具体的问题是: (1)setOnClickListener 和 setOnTouchListener 同时设置的时候,若是setOnTouchListener的返回值为true,则不会再执行setOnClickList

新浪新闻客户端源码

高仿新浪新闻客户端,实现了大部分功能以及界面部分,自动获取新闻信息数据.定位当前位置获取气象信息数据并展示,有兴趣的可以看看. 下载地址:http://www.devstore.cn/code/info/1014.html 运行截图:    

门户级UGC系统的技术进化路线——新浪新闻评论系统的架构演进和经验总结(转)

add by zhj:先收藏了 摘要:评论系统是所有门户网站的核心标准服务组件之一.本文作者曾负责新浪网评论系统多年,这套系统不仅服务于门户新闻业务,还包括调查.投票等产品,经历了从单机到多机再到集群,从简单到复杂再回归简单的过程. 评论系统,或者称为跟帖.留言板,是所有门户网站的核心标准服务组件之一.与论坛.博客等其他互联网UGC系统相比,评论系统虽然从产品功能角度衡量相对简单,但因为需要能够在突发热点新闻事件时,在没有任何预警和准备的前提下支撑住短短几分钟内上百倍甚至更高的访问量暴涨,而评论