html+css qq空间模仿

<strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<style type="text/css">
		*{main: 0px 0px;padding : 0px 0px;}
		.main{width:900px;height:415px;background:#000;margin:10px auto;}
		.title{width:900px;height:40px;background:#333332;
		margin:0px 0px;border:1px solid #FFF;}
		.title a{display:block;color:#ddd;
			line-height:40px;font-size:16px;text-indent:13px;}
		.main .pic{width:900px;height:410px;padding:10px;overflow:hidden;}
		.main .pic ul {display:block;margin-left:20px;width:894px;height:350px;
			/*border:1px solid blue;*/}
		.main .pic ul li{display:block;
			width:210px;height:85px;border-bottom:1px solid #303030;
			border-right:1px solid #303030;float:left;}
		.main .pic .FUL{border-right:none;}
		.main .pic .Last{border-bottom:none;}
		.main .pic ul li img{margin-left:15px;margin-top:10px;float:left;}
		.main .pic ul li span{display:block;
			color:#FFF;line-height:80px;float:left;margin-left:30px;}
		.main .pic ul li:hover{background:#333332;opacity:0.7;}
	</style>
  </head>

  <body>
    <div class="main">
    	<div class="title">
			<a>应用</a>
    	</div>
    	<div class="pic">
    		<ul>
    			<li>
    				<img src="img/1.jpg"/>
    				<span>个人档</span>
    			</li>
    			<li>
    				<img src="img/2.jpg"/>
    				<span>QQ日历</span>
    			</li>
    			<!-- dfsdfsfsdf -->
    			<li >
    				<img src="img/3.jpg"/>
    				<span>日志</span>
    			</li>
    			<li class="FUL">
    				<img src="img/4.jpg"/>
    				<span>投票</span>
    			</li>
    			<!-- dsfdf -->
    			<li>
    				<img src="img/5.jpg"/>
    				<span>分享</span>
    			</li>
    			<li>
    				<img src="img/6.jpg"/>
    				<span>下载</span>
    			</li>
    			<li>
    				<img src="img/6.jpg"/>
    				<span>应用</span>
    			</li>
    			<li class="FUL">
    				<img src="img/4.jpg"/>
    				<span>应用</span>
    			</li>
    			<!-- dfsdfsfsdf -->
    			<li>
    				<img src="img/3.jpg"/>
    				<span>应用</span>
    			</li>
    			<li>
    				<img src="img/4.jpg"/>
    				<span>应用</span>
    			</li>
    			<li>
    				<img src="img/5.jpg"/>
    				<span>应用</span>
    			</li>
    			<li class="FUL">
    				<img src="img/6.jpg"/>
    				<span>应用</span>
    			</li>
    			<li class="Last">
    				<img src="img/6.jpg"/>
    				<span>应用</span>
    			</li>
    		</ul>
    	</div>
    </div>
  </body>
</html>
</strong>

时间: 2024-12-23 16:33:03

html+css qq空间模仿的相关文章

Android 模仿QQ空间风格的 UI

本文内容 环境 演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西. 下载 Demo 环境 Windows 7 64 位 Eclipse ADT V22.6.2,Android 4.4.3 SAMSUNG GT-I9008L,Android OS 2.2.2   演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西.比如, 当点击"加号"时的效果是如何实现的: 当点击"我的空间动态"时的效

Android 模仿QQ空间风格的 UI(转)

本文内容 环境 演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西. 下载 Demo 环境 Windows 7 64 位 Eclipse ADT V22.6.2,Android 4.4.2(API 19) SAMSUNG GT-I9008L,Android OS 2.2.2 演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西.比如, 当点击“加号”时的效果是如何实现的: 当点击“我的空间动态”时的效果是如何实现的:

Android UI设计之&lt;十&gt;自定义ListView,实现QQ空间阻尼下拉刷新和渐变菜单栏效果

转载请注明出处:http://blog.csdn.net/llew2011/article/details/51559694 好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客是在2014年写的:Android UI设计之<七>自定义Dialog,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效

JS时间轴效果(类似于qq空间时间轴效果)

2013-11-04 23:51 by 空智, 4041 阅读, 15 评论, 收藏, 编辑 在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求 研究了下qq空间逻辑(当然JS代码压缩了肯定看不到的),只是当时研究了下他们HTML结构和css结构,所以仿照他们那种逻辑自己也写了一个出来.先来看看是个什么样的吧!如下图所示: 需求分析:左侧是一个时间

自己动手写js分享插件 [支持https] (可以分享QQ空间,微信,新浪微博。。。)

由于百度分享,jiathis 等分享插件在https下均会报错,就萌生了自己动手写一个分享插件的念头,其实实现起来一点都不难,以下代码都已在https网站运行通过,特附上以下代码:还请各位看官不吝赐教: 附上演示效果网址:https://www.aishandian.com/jiekuan_zhishi-979.html 动画实现效果代码 $(document).on("click", ".msb_main", function() { if($(this).has

Html - 仿QQ空间右下角工具浮动块

仿QQ空间右下角工具浮动块 <style type="text/css"> .cy-tp-area>.cy-tp-fixbtn>.cy-tp-text { display: none; margin-top: 15px; text-align: center; text-decoration: none; } .cy-tp-area>.cy-tp-fixbtn { background-color: #fafafa; color: #8c8c8c; } .

高仿QQ空间的登录

一  简单的用定时器模仿了第三方框架MBProgressHUD的蒙版效果 二 模仿了新浪手机客户端消息提醒下拉效果,提醒完后自动隐藏 三 加入了新版本特性,也是模仿新浪的效果,配的是一套七夕的主题 四 简单实现了QQ空间的左边抽屉效果 说明:由于不能上传gif动画效果演示图,也不能上传代码.所以请需要的代码的,请移步至cocoachina论坛 地址:http://www.cocoachina.com/bbs/read.php?tid=321723&page=1&toread=1#tpc 效

实现类似微博、QQ空间等的动态加载

微博.QQ空间等的动态加载方式属于滚屏加载技术,获取当前滚动条位置来触发onscroll()函数,向服务器发起请求,将请求得到的新的数据动态加载在页面上 本文利用该原理实现了动态加载,但不是检测当前滚动条位置来触发函数,而是由按钮事件触发,因此更简单一些. 走过的弯路 1) 将目前读取到的数据库中的位置存放在session中,当要加载更多的时候,去session中获得该值,动态加载后修改session中的值 错误原因:session是有缓存的,如果停留在当前页面,得到的值还是一开始的sessio

QQ空间爬虫最新分享,一天 400 万条数据(附代码地址)

http://mp.weixin.qq.com/s?__biz=MzAxMjUyNDQ5OA==&mid=2653552228&idx=1&sn=e476bf23556406cbce7de65508d79843&chksm=806dd0d9b71a59cf2b062a19309c849a62ba15790898e5e619205f0f5ec84a90025a8cea05e9&mpshare=1&scene=23&srcid=11252MeE6Qu1D