奔跑的小熊爷爷 奔跑的小熊爷爷
关注数: 180 粉丝数: 44 发帖数: 133 关注贴吧数: 51
为什么我做的效果是这么的丑?谁帮我变美一些呢 代码安排上 .sw_close{ line-height:30px; height:30px; width:67.5px; color:#ffffff; background-color:#ededed; font-size:15px; font-weight:bold; font-family:Arial; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537), color-stop(1, &is_video_topic=0">#f24537), color-stop(1, #</a>c62d1f)); background:-moz-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0">#f24537 5%, #</a></a></a></a></a>c62d1f 100%); background:-o-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0">#f24537 5%, #</a></a></a></a></a>c62d1f 100%); background:-ms-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0">#f24537 5%, #</a></a></a></a></a>c62d1f 100%); background:linear-gradient(to bottom, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0">#f24537 5%, #</a></a></a></a></a>c62d1f 100%); background:-webkit-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0">#f24537 5%, #</a></a></a></a></a>c62d1f 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='<a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537&#039;, endColorstr=&#039;&is_video_topic=0">#f24537&#039;, endColorstr=&#039;#</a>c62d1f',GradientType=0); border:1px solid #d02718; -webkit-border-top-right-radius:6px; -moz-border-radius-topright:6px; border-top-right-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-bottomright:6px; border-bottom-right-radius:6px; -moz-box-shadow: inset 0px 1px 0px 0px #f5978e; -webkit-box-shadow: inset 0px 1px 0px 0px #f5978e; box-shadow: inset 0px 1px 0px 0px #f5978e; text-align:center; display:inline-block; text-decoration:none; margin-left: -6px; } .sw_close:hover{ background-color:#f5f5f5; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #c62d1f), color-stop(1, #f24537)); background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%); background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%); background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%); background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%); background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0); } .sw_open{ line-height:30px; height:30px; width:67.5px; color:#ffffff; background-color:#ededed; font-size:15px; font-weight:bold; font-family:Arial; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #5df237), color-stop(1, #2bc61f)); background:-moz-linear-gradient(top, #5df237 5%, #2bc61f 100%); background:-o-linear-gradient(top, #5df237 5%, #2bc61f 100%); background:-ms-linear-gradient(top, #5df237 5%, #2bc61f 100%); background:linear-gradient(to bottom, #5df237 5%, #2bc61f 100%); background:-webkit-linear-gradient(top, #5df237 5%, #2bc61f 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5df237', endColorstr='#2bc61f',GradientType=0); border:1px solid #37d018; -webkit-border-top-left-radius:6px; -moz-border-radius-topleft:6px; border-top-left-radius:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; border-bottom-left-radius:6px; -moz-box-shadow: inset 0px 1px 0px 0px #93f58e; -webkit-box-shadow: inset 0px 1px 0px 0px #93f58e; box-shadow: inset 0px 1px 0px 0px #93f58e; text-align:center; display:inline-block; text-decoration:none; } .sw_open:hover{ background-color:#f5f5f5; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f), color-stop(1, &is_video_topic=0">#2bc61f), color-stop(1, #</a>5df237)); background:-moz-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0">#2bc61f 5%, #</a></a>5df237 100%); background:-o-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0">#2bc61f 5%, #</a></a>5df237 100%); background:-ms-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0">#2bc61f 5%, #</a></a>5df237 100%); background:linear-gradient(to bottom, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0">#2bc61f 5%, #</a></a>5df237 100%); background:-webkit-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0">#2bc61f 5%, #</a></a>5df237 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2bc61f', endColorstr='#5df237',GradientType=0); } .curtain_stop{ line-height:30px; height:30px; width:45px; color:#ffffff; background-color:#ededed; font-size:15px; font-weight:bold; font-family:Arial; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537), color-stop(1, &is_video_topic=0">#f24537), color-stop(1, #</a>c62d1f)); background:-moz-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0">#f24537 5%, #</a></a></a></a></a>c62d1f 100%); background:-o-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0">#f24537 5%, #</a></a></a></a></a>c62d1f 100%); background:-ms-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0">#f24537 5%, #</a></a></a></a></a>c62d1f 100%); background:linear-gradient(to bottom, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0">#f24537 5%, #</a></a></a></a></a>c62d1f 100%); background:-webkit-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537 5%, &is_video_topic=0">#f24537 5%, #</a></a></a></a></a>c62d1f 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='<a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=f24537&#039;, endColorstr=&#039;&is_video_topic=0">#f24537&#039;, endColorstr=&#039;#</a>c62d1f',GradientType=0); border:1px solid #d02718; -moz-box-shadow: inset 0px 1px 0px 0px #f5978e; -webkit-box-shadow: inset 0px 1px 0px 0px #f5978e; box-shadow: inset 0px 1px 0px 0px #f5978e; text-align:center; display:inline-block; text-decoration:none; margin-left: -5px; margin-right: -5px; } .curtain_stop:hover{ background-color:#f5f5f5; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #c62d1f), color-stop(1, #f24537)); background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%); background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%); background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%); background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%); background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0); } .curtain_up{ line-height:30px; height:30px; width:45px; color:#ffffff; background-color:#ededed; font-size:15px; font-weight:bold; font-family:Arial; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #5df237), color-stop(1, #2bc61f)); background:-moz-linear-gradient(top, #5df237 5%, #2bc61f 100%); background:-o-linear-gradient(top, #5df237 5%, #2bc61f 100%); background:-ms-linear-gradient(top, #5df237 5%, #2bc61f 100%); background:linear-gradient(to bottom, #5df237 5%, #2bc61f 100%); background:-webkit-linear-gradient(top, #5df237 5%, #2bc61f 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5df237', endColorstr='#2bc61f',GradientType=0); border:1px solid #37d018; -webkit-border-top-left-radius:6px; -moz-border-radius-topleft:6px; border-top-left-radius:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; border-bottom-left-radius:6px; -moz-box-shadow: inset 0px 1px 0px 0px #93f58e; -webkit-box-shadow: inset 0px 1px 0px 0px #93f58e; box-shadow: inset 0px 1px 0px 0px #93f58e; text-align:center; display:inline-block; text-decoration:none; } .curtain_up:hover{ background-color:#f5f5f5; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f), color-stop(1, &is_video_topic=0">#2bc61f), color-stop(1, #</a>5df237)); background:-moz-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0">#2bc61f 5%, #</a></a>5df237 100%); background:-o-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0">#2bc61f 5%, #</a></a>5df237 100%); background:-ms-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0">#2bc61f 5%, #</a></a>5df237 100%); background:linear-gradient(to bottom, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0">#2bc61f 5%, #</a></a>5df237 100%); background:-webkit-linear-gradient(top, <a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0"><a href="http://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=0&topic_name=2bc61f 5%, &is_video_topic=0">#2bc61f 5%, #</a></a>5df237 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2bc61f', endColorstr='#5df237',GradientType=0); } .curtain_down{ line-height:30px; height:30px; width:45px; color:#ffffff; background-color:#ededed; font-size:15px; font-weight:bold; font-family:Arial; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #37bbf2), color-stop(1, #1f52c6)); background:-moz-linear-gradient(top, #37bbf2 5%, #1f52c6 100%); background:-o-linear-gradient(top, #37bbf2 5%, #1f52c6 100%); background:-ms-linear-gradient(top, #37bbf2 5%, #1f52c6 100%); background:linear-gradient(to bottom, #37bbf2 5%, #1f52c6 100%); background:-webkit-linear-gradient(top, #37bbf2 5%, #1f52c6 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#37bbf2', endColorstr='#1f52c6',GradientType=0); border:1px solid #185ad0; -webkit-border-top-right-radius:6px; -moz-border-radius-topright:6px; border-top-right-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-bottomright:6px; border-bottom-right-radius:6px; -moz-box-shadow: inset 0px 1px 0px 0px #8e9df5; -webkit-box-shadow: inset 0px 1px 0px 0px #8e9df5; box-shadow: inset 0px 1px 0px 0px #8e9df5; text-align:center; display:inline-block; text-decoration:none; } .curtain_down:hover{ background-color:#f5f5f5; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #1f52c6), color-stop(1, #37bbf2)); background:-moz-linear-gradient(top, #1f52c6 5%, #37bbf2 100%); background:-o-linear-gradient(top, #1f52c6 5%, #37bbf2 100%); background:-ms-linear-gradient(top, #1f52c6 5%, #37bbf2 100%); background:linear-gradient(to bottom, #1f52c6 5%, #37bbf2 100%); background:-webkit-linear-gradient(top, #1f52c6 5%, #37bbf2 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f52c6', endColorstr='#37bbf2',GradientType=0); } .button{ line-height:30px; height:30px; width:80px; color:#ffffff; background-color:#ededed; font-size:15px; font-weight:bold; font-family:Arial; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #79bbff), color-stop(1, #378de5)); background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%); background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%); background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%); background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%); background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0); border:1px solid #84bbf3; -webkit-border-top-left-radius:6px; -moz-border-radius-topleft:6px; border-top-left-radius:6px; -webkit-border-top-right-radius:6px; -moz-border-radius-topright:6px; border-top-right-radius:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-bottomright:6px; border-bottom-right-radius:6px; -moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7; -webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7; box-shadow: inset 0px 1px 0px 0px #bbdaf7; text-align:center; display:inline-block; text-decoration:none; } .button:hover{ background-color:#f5f5f5; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #378de5), color-stop(1, #79bbff)); background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%); background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%); background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%); background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%); background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0); } .stat_stop,.stat_close{ width: 30px; height: 30px; background: red; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; padding-left: 20px; } .stat_open,.stat_up{ width: 30px; height: 30px; background: limegreen; border-radius: 50%; -moz-border-radius: 20px; -webkit-border-radius: 20px; padding-left: 20px; } .stat_offline{ width: 30px; height: 30px; background: dimgray; border-radius: 50%; -moz-border-radius: 20px; -webkit-border-radius: 20px; padding-left: 20px; } .stat_down{ width: 30px; height: 30px; background: royalblue; text-align: justify; text-justify:inter-word; border-radius: 50%; -moz-border-radius: 20px; -webkit-border-radius: 20px; padding-left: 20px; } .sensor_name{ margin:0px; padding:0px; font-family:"微软雅黑","黑体","宋体"; font-size:15px; height:36px; font-weight: bold; margin:0 auto; } .sensor{ width:125px; text-align: center; display: inline-block; } .status{ width:10px; text-align: center; display: inline-block; margin-right: 5px; } .action{ width:150px; text-align: center; display: inline-block; } .line{ display:block; margin-top: 20px; } #top { width: 300px; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: royalblue; } #top li { float: left; } #top li a { display: block; color: white; font-weight: bold; text-align: center; padding: 14px 16px; text-decoration: none; } #top li a:hover { background-color: limegreen; } .mybody { width:300px; position: absolute;left:0; top:0; right:0; bottom: 0; margin: auto; } .control { width: 300px; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: lightgrey; }   http://tieba.baidu.com/mo/q/checkurl?url=https%3A%2F%2Fapps.bdimg.com%2Flibs%2Fjquery%2F2.1.4%2Fjquery.min.js&urlrefer=87741ee9860332525fd18a224e9072dc"></script> <script > function add_top(group_id,group_name) { top_html = "" top_thml = `<li><a href="javascript:;" group=${group_id}>${group_name}</a></li>` $("#top").append(top_thml) } function add_line(sensor_name,status,type,sensor_id) { action_html = "" if(type == "switch") { action_html= ` <a href='#' onclick="Farm.Button(this, '/device/update',${sensor_id},'open')" class='sw_open'>打开</a> <a href='#' onclick="Farm.Button(this, '/device/update',${sensor_id},'close')" class='sw_close'>关闭</a> ` } else if(type == "curtain") { action_html= ` <a href='#' onclick="Farm.Button(this, '/device/update',${sensor_id},'up')" class='curtain_up'>升</a> <a href='#' onclick="Farm.Button(this, '/device/update',${sensor_id},'stop')" class='curtain_stop'>停</a> <a href='#' onclick="Farm.Button(this, '/device/update',${sensor_id},'down')" class='curtain_down'>降</a> ` } var public_content= `<div class="line"> <ttt class="sensor"> <ttt class="sensor_name">${sensor_name}</ttt> </ttt> <ttt class="status"> <ttt class="stat_${status}"></ttt> </ttt> <ttt class="action"> ${action_html} </ttt> </div>` $(".control").append(public_content) } //alert("clear") //alert("clear") //add_line("老铁6666","offline","curtain",5) $("body").ready(function(){ //$()不带参数默认是document Farm.Load() Farm.Top() }); Farm = { Load : function() { var self = this; var data ={} data.group = current_group $.ajax({ url:"/get_controler", type:'get', data:data, timeout:5000, success:function(data){ if (data) { $('.line').remove();//删除所有按钮 for(var c=0;c<data.length;c++) { add_line(data[c].sensor_name,data[c].status,data[c].type,data[c].sensor_id) $(".control").parent().css("height",""); } self.CreateLoop(); } } }); } ,Top:function(){ $.ajax({ url:"/get_group", type:'get', data:{}, timeout:5000, success:function(data){ if (data) { for(var ttop = 0;ttop<data.length;ttop++) { add_top(data[ttop].id,data[ttop].name)//添加到导航栏 $(".navMain").parent().css("height",""); } for(var i=0;i<js("top").length;i++)//设置点击事件 { js("top")[i].onclick=function(){ delBackgroundColor(); this.style.background = "limegreen"; this.style.color = "#fff"; current_group = this.getElementsByTagName("a")[0].getAttribute("group") Farm.Load()//点击后立刻刷新 } } if(current_group == -1)//第一次自动选成第一个 { js("top")[0].click() } Farm.Load() } } }) } ,CreateLoop : function() { if (!this.loop) { this.loop = setInterval("Farm.Load()", 2000); } } ,Button : function(obj, url, id, action) { var self = this; var e = $(obj); data = {}; data.id = id; data.action = action; alert(`${url+id+action}`) self.Request('post', url, data, function(msg) { self.Load(); self.CreateLoop(); }) } ,Request : function(type, url, data, callback) { //data._xsrf = this.Cookie("_xsrf"); $.ajax({ type:type, url:url, data:data, success:function(msg){ callback(msg) } }); } } function js(id) { return document.getElementById(id).getElementsByTagName("li"); } var current_group = -1 function delBackgroundColor() { for(var i=0;i<js("top").length;i++) { js("top")[i].style.background = ''; js("top")[i].style.color = '#384463'; } } </script> </body> </html>
1 下一页