基于jquery DOM写的类似微博发布的效果_Javascript教程-查字典教程网
基于jquery DOM写的类似微博发布的效果
基于jquery DOM写的类似微博发布的效果
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:微博发布jq版/*重置{*/html{color:#000;background:#fff;}body,div,ul,li...

复制代码 代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>微博发布jq版</title>

<meta name="Keywords" content="">

<meta name="Description" content="">

<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>

<style type="text/css">

/*重置{*/

html{color:#000;background:#fff;}

body,div,ul,li,h1,input,button,textarea{padding:0;margin:0;}

img{border:0;}

li{list-style:none;}

/*}重置*/

h1{margin:20px auto 0;font-size:30px;width:200px;text-align:center;color:blue;}

#outer{position:relative;width:400px;margin:auto;margin:20px auto 10px;}

#test1{display:block;width:400px;height:70px;}

.error{background:#f00;width:400px;height:50px;position:absolute;left:1px;top:10px;opacity:0.6;filter:alpha(opacity=60);}

#test2{display:block;margin-left:800px;width:60px;height:30px;font-size:20px;}

.test3{margin:10px auto;width:400px;}

#test3{border:1px #444 solid;width:400px;min-height:300px;_height:300px;padding-bottom:10px;color:blue;float:left;}

.test{border-bottom:1px blue dotted;width:383px;padding:10px 5px 5px 10px;float:left;}

.inf{margin-top:15px;float:right;color:#555;}

.con{margin-left:16px;display:inline;width:304px;float:left;word-break:break-all;}

.bu{margin-left:6px;display:inline;}

.imgs{width:60px;height:60px;float:left;}

.imgInf{width:120px;background:#f0f;color:#fff;position:absolute;z-index:2;left:-65px;top:62px;opacity:0.5;filter:alpha(opacity=50);}

.finish{background:green;width:300px;height:50px;color:#ff0;font-size:30px;text-align:center;line-height:50px;position:absolute;left:50px;top:10px;opacity:0.6;filter:alpha(opacity=60);}

.imgOut{position:relative;}

</style>

</head>

<body>

<h1>微博发布</h1>

<div id="outer">

<textarea id="test1" ></textarea>

</div>

<input type="button" id="test2" value="发布"/>

<div><div id="test3"></div></div>

<script type="text/javascript">

<>

</script>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类