QQ空间说说页面设计 练习

最新推荐文章于 2020-06-18 08:49:00 发布
最新推荐文章于 2020-06-18 08:49:00 发布
阅读量726 收藏 2
点赞数
分类专栏： # web前端开发 大前端 文章标签： qq 
<!doctype html>
<html>
    <head>
       <meta charset="utf8">
       <title>java开发空间大数据说说</title>
       <!--  background-size: cover; css3中的知识根据屏幕自适应 -->
       <!-- font-szie:12px 一定要为偶数-->
       <!--list-style: none; 将li标签前的小圆点干掉-->
       <!-- cursor: pointer;鼠标指针变小手 -->
       <style type="text/css">
          *{margin: 0;padding: 0;}
          body{background: url("images/bg.jpg") no-repeat top center;background-size: cover;font-szie:12px;font-family: "微软雅黑"}

          img{border:none; }
         .qq{width: 600px;height: 165px;background: rgb(252, 247, 246);margin: 100px auto;border-radius: 5px;position: relative;}    
         .qq .q_title{font-size: 14px;padding: 10px 0 10px 20px}
         .qq .q_msg{width: 540px;height: 50px;border:1px solid #D1D1D1;margin: 0 auto;padding: 10px}
         .qq .q_face .q_box{float: left;margin: 18px 0 0 18px; }
         .qq .q_face .q_btn{float: right;width: 82px;height: 30px;background: #ff8140;display: block;text-align: center;line-height: 30px;text-decoration: none;font-size: 14px;color: #FFF;margin: 10px 20px 0 0;border-radius: 3px; }	
        .qq .q_face .q_btn:hover{background: #ff8140;}
        .qq .q_con{width: 365px;height: 180px; background: #FFF;box-shadow: 1px 2px 10px 0px #000;position: absolute;top: 158px;left:26px;display: none;}
         .qq .q_con #q_ul li{list-style: none;float:left;cursor: pointer;margin: 2px;}
       </style>
    </head>
<body>
   <!--qq Start-->
	<div class="qq">
		<p class="q_title">有什么新鲜告诉大家</p>
		<div class="q_msg" contenteditable="true"></div>
		<p class="q_face">
		    <a href="#" class="q_box">
		    	<img src="images/face/88_thumb.gif" alt="qq表情" width="22px" height="22px">
		    </a>
		    <a href="#" class="q_btn">发表</a>
		</p>
		<div class="q_con">
			<ul id="q_ul">
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/angrya_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/bba_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/boboshengmenqi_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/hufen_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/sad_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/angrya_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/bba_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/boboshengmenqi_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/hufen_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/sad_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
                <li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/angrya_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/bba_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/boboshengmenqi_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/hufen_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/sad_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/88_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/angrya_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/bba_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/boboshengmenqi_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/hufen_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/angrya_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/bba_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/boboshengmenqi_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/hufen_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/angrya_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/bba_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/boboshengmenqi_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/hufen_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/angrya_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/bba_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/boboshengmenqi_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/hufen_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/angrya_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/bba_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/boboshengmenqi_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/hufen_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/hufen_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/angrya_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/bba_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/boboshengmenqi_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/hufen_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/angrya_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/bba_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/boboshengmenqi_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/hufen_thumb.gif" alt="表情" width="22px" height="22px"></li>
				<li><img src="images/face/cry.gif" alt="表情" width="22px" height="22px"></li>						
			</ul>
		</div>
	</div>
	<!--End qq -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
	  $(function(){	 
	  	 $(".q_box").click(function(){	
	  	 	$(".q_con").toggle(1000);
	  	 });
	
	  $("#q_ul").find("li").click(function(){
             var img = $(this).find("img").clone();
             $(".q_msg").append(img);
	  	 });
	  });
</script>	

</body>    
</html>

来源: tanZ---Array

素材:链接：http://pan.baidu.com/s/1o6kYq3g 密码：y3bs

怒放de生命2010
关注
专栏目录
jQuery仿QQ空间说说发表评论留言代码
07-28
jQuery仿QQ空间说说发表评论留言代码
给你的Hexo博客添加说说页面
AGNING的博客
04-22 1806
欢迎浏览我的博客：http://www.fezhu.top/ 前言 最近看了许多大佬的博客，终于明白了我到底有多弱????,不过虽然我菜，但是Chinese还是能看懂的????,直接按照教程往下走，感谢把我教会的原文1和原文2 看看效果吧: 这个和QQ空间里面的说说类似，用来记录自己的生活以及心情都挺好的，请忽略内容里面的表情符号????我太菜了，这些原本是要被转成表情的，但说说页面好像不支持，/手动流汗/，...
网站设计：谈谈网页的个性化设计
bjhaowang的专栏
01-21 723
网页个性化的概念:网页的个性化是指网页根据用户直接提供的，或从用户间接获得的信息调整自己的内容&表达方式，以满足各个用户不同的需求。个性化网站设计模式举例:这里可以给大家举例4个模式:第一个模式:一些大型社区或者BLOG 为用户的个人主页或者个人BLOG 提供内容布局自主; 第二个模式:去过当当网这样的网站你应该会记得，你访问过哪些产品，购买这个产品的还看过哪些产品; 第三
上传本地图片（发说说）Demo
weixin_30532987的博客
02-22 82
点此下载 转载于:https://www.cnblogs.com/zzw1994/p/5207724.html
HTML 发表说说 制作方法
u011927449的博客
06-18 336
======================================================================================================= <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0} ul{ .
基于PHP的网页设计练习作业源码
09-23
该项目是基于PHP的网页设计练习作业源码，包含174个文件，包括64个PHP源文件、37个HTML页面文件、15个构建路径文件、15个项目配置文件、9个JPG图片文件、5个JPEG图片文件、4个PNG图片文件、4个CSS样式文件和2个SQL...
基于Java的自我练习项目设计源码
09-22
本项目是基于Java开发的自我练习项目，包含55个文件，其中包括36个Java源代码文件、4个PNG图像文件、3个VM配置文件、2个IML文件、2个Markdown文档文件、2个XML配置文件、1个gitignore文件、1个LICENSE文件和1个TTF...
基于SSM框架的练习项目设计源码
04-04
本设计源码提供了一个基于SSM框架的练习项目。项目包含46个文件，主要使用Java编程语言。文件类型包括22个Java源代码文件、17个XML配置文件、2个GIT忽略文件、1个LICENSE文件、1个Markdown文档、1个Properties配置...
shop _网商网页设计练习_后端设计_worker7t6_gulfuhs_前端_
10-03
在"shop _网商网页设计练习_后端设计_worker7t6_gulfuhs_前端_"这个主题中，我们可以深入探讨一系列与网页设计、后端开发以及前后端交互相关的知识点。这显然是一份针对初学者的实践教程，旨在帮助他们掌握JSP（Java...
城市空间分析GIS应用指南—练习数据
12-06
这个"城市空间分析GIS应用指南—练习数据"压缩包，很可能包含了各种类型的空间数据，如矢量图层（道路、建筑物、行政区划）、栅格图层（卫星影像、地形数据）、属性数据表等。通过这些数据，学习者可以实践上述分析...
HTML 发表说说 制作方法
weixin_30457551的博客
06-25 309
======================================================================================================= <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>&l...
Web网页——留言板功能
热门推荐
漫天撒花的博客
02-22 4万+
本文描述如何在网页上实现一个简单的留言板功能，仅支持文字留言。 开发环境：dreamweaverCC html +jscirpt + php 前置条件：1、一个简单的网站已经搭建完毕，支持用户登录网站。 2、用户已登录网站。 实现步骤： 一、新建留言板网页 1、新建网页：whiteboard.html 留言板（js-div-whiteboard...
Android界面（一）——QQ空间说说界面
柒⑦的博客
04-14 2011
用到的图片 bottom.png addpicture.png <?xml version="1.0" encoding="utf-8"?> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="说点什么吧" ...
简单网页实现
Wonz
03-04 1175
在学习Python爬虫时，接触了一点HTML的知识，于是就跟着教程动手写了一个网页。HTML代码是跟着视频写的，CSS样式直接用的教程里的，暂时还没学CSS。有几点要注意：1.css样式要和html文件放在一个文件夹下，否则要指定到css所在文件，记得把\改成/。2.图片也要和html文件放在一个文件夹下，除背景图，其他要指定大小，即width和height。3.主体部分主要是图片+标题+一句话。...
说说网页设计常用的构思方法
weixin_34060299的博客
04-24 954
网页设计构思方法的运用必须依靠坚实的知识基础，并加以灵活、科学的运用，才能真正发挥作用。下文合肥学码思小编就网页设计中常用构思方法进行探讨。 　　追本溯源、去繁就简 　　一花一世界，一叶一菩提，自然界是人类永恒的灵感之源。大自然是鬼斧神工的设计师。且不说仿生学所产生的那些伟大发明，仅仅从造型角度，自然界就有着我们取之不竭的素材。人类本身就是自然界的一部分，人对自然的认同感是与生俱来的。因此，...
Artitalk说说心情发布页面（个性定制）
cungudafa的博客
05-20 5145
一、前言 嗯，一款在线发布说说的hexo插件，目前有不少小伙伴在使用啦，欣慰。 回馈新老用户，这里给出一些DIY魔改的教程，让你拥有独一无二的说说页面。 前提是你已经配置好了 说说页面，可以正常发布说说，可以参考官网教程https://artitalk.js.org/ 本次魔改，先挑选，再CV复制粘贴，最后hexo clean &&hexo g&&hexo d三连发布一下就ok了哦！ 二、选妃 1.默认 懒人做法，不懂不动不改，默认很好看！ 2.简约派 黑白永恒经典
android编辑框知识点练习 QQ说说发表页面的编写
qq_43654669的博客
11-27 259
android编辑框知识点练习 QQ说说发表页面的编写 - 实现效果 xml文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_par...
基于Java的微信小程序html2wxml转换接口设计源码
09-24
该项目是基于Java的微信小程序html2wxml转换接口设计源码，共包含50个文件，其中包括10个属性配置文件、9个XML配置文件、6个首选项文件、6个Java源文件、3个Shell脚本、2个项目配置文件、2个HTML模板文件、1个类路径配置文件、1个Git忽略配置文件和1个JS类型定义文件。该解决方案利用JFinal、Jsoup和FastJson技术，为微信小程序提供高效的富文本渲染能力。
精品推荐新零售引爆新的品牌增长点完整版）图文.p
最新发布
09-24
【精品推荐】新零售引爆新的品牌增长点完整版）图文.p
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值