网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
前端吧 关注：223,880贴子：1,380,173

为什么我做的效果是这么的丑？谁帮我变美一些呢


代码安排上
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.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, #f24537), color-stop(1, #c62d1f));
background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#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, #2bc61f), color-stop(1, #5df237));
background:-moz-linear-gradient(top, #2bc61f 5%, #5df237 100%);
background:-o-linear-gradient(top, #2bc61f 5%, #5df237 100%);
background:-ms-linear-gradient(top, #2bc61f 5%, #5df237 100%);
background:linear-gradient(to bottom, #2bc61f 5%, #5df237 100%);
background:-webkit-linear-gradient(top, #2bc61f 5%, #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, #f24537), color-stop(1, #c62d1f));
background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#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, #2bc61f), color-stop(1, #5df237));
background:-moz-linear-gradient(top, #2bc61f 5%, #5df237 100%);
background:-o-linear-gradient(top, #2bc61f 5%, #5df237 100%);
background:-ms-linear-gradient(top, #2bc61f 5%, #5df237 100%);
background:linear-gradient(to bottom, #2bc61f 5%, #5df237 100%);
background:-webkit-linear-gradient(top, #2bc61f 5%, #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;
}
</style>
</head>
<body class="mybody">
<!-- 科目导航 -->
<div id="top" class="navMain" style="height:auto;">
</div>
<div class="control">
</div>
<p>　</p>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></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>


不丑啊


好看看的


不知道你在贴吧没排版放前端的乱七八糟的源代码是在想什么？指望有人看呢？


不太懂前端，不过前端交流不是直接丢链接和截图，再说明需求的吗？


美化是ui的活


有病啊，谁会看你写的代码，就算是放也是放github链接吧


这个问题不是应该问ui吗？不过这大蓝配大绿，开关红绿直接撞确实有点难看


配色改下，蓝底白字改成下拉，打开关闭改成开关的。代码估计没人看


这要问ui，谁给你设计页面啊


用组件不就行了，还自己造轮子？


挺好看的，美出天际，比这一坨代码好看多了


颜色纯度太高，就给人一种突兀的感觉，可以选择那种亮灰色的颜色做配色，再就是导航栏太臃肿了，可以搞一个滑块或者划屏那种效果，再就是打开，关闭按钮可以换成，开关按钮。
页面还是需要用你主观意识的，用手机APP没事可以观察观察别人APP的一些设计和配色作为一个你日后开发的一个参考


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
分享到: