javascript - 如何在不重新编码的情况下扩大我的网站

Question

所以，我不会说谎。我不是一个专业的编码员，我从论坛上学到了我所知道的一切，我不会按照书本做事。我有点欺骗系统。不管怎样，我一直在 Enjin 上编辑一个网站，这是一个游戏平台，您可以在其中插入 html/css 模块来改变布局和设计。我已经对整个事情进行了编码，使用 div 和我 friend 的服务器上没有的东西。我想再次重申，我不是专业人士，我这样做是为了好玩而且免费。现在，我陷入了困境。我想扩大我所做的一切，而不是进入并重新编码我所有的 div，因为我使用 px 来定义它们。这是我的代码，我将插入一个指向该站点的链接。任何帮助将不胜感激..

[这是网站] http://www.terracrafters.net/test

  .m_minecraftserverstatus_new.preset_43030555 {
    background-color: #1e2124;
    opacity: .9;
    border-radius: 0px;
    border: 0px solid #ffffff;
    margin-top: 10px;
    }

    BODY {
    overflow-x:hidden;
    }

    .breaker {
    opacity: 0;
    } 

    .m_minecraftserverstatus_new.preset_43030555 .top-area {
    background-color: #1e2124;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    }

    .body-wrap-3 {
    background-repeat: no-repeat;
    background-position: top;
    background-image: url(https://assets-cloud.enjin.com/themes/1487945582_Background.png);
    }

    .body-wrap-3, #page {
    min-width: 0 !important;
    max-width: none !important;
    }

    #page-wrap {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    max-width: 1100px;
    margin: 60px auto 30px;
    }

    .logo {
    z-index: 10000000;
    margin-top: -1px;
    margin-left:38%;
    margin-bottom: -65px;
    }

    .container {
    margin-top: -16px;
    }

    body #site-body {
    min-height: 750px;
    max-width: 1100px !important;
    margin: 0 auto;
    background-image: url(https://scontent-iad3-1.xx.fbcdn.net/v/t35.0-12/17521938_1421397851215990_1860950770_o.png?oh=a7575fe8a4e2aca7bc01d19f859148e0&oe=58D973CA);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 2000px;
    background-position-y: -260px;
    background-position-x: 0px;
    } 


    a, p, div, h1, h2, h3, h4, span {
    font-family: MedievalSharp;  sans-serif;
    }

    .abmpro {
    background: transparent;
    float: right;
    margin-left: 800px;
    margin-top: 105px;
    z-index: 10000000;
    position: absolute;
    }


    .navbar {
    background-color: #1f4636;
    height: 15px;
    text-align: left;
    color: black;
    text-transform: uppercase;
    padding: 25px;
    font-size: 15px;
    font-weight: 0px;
    margin-bottom: -4%;
    width: 67.35%;
    margin-left: -.7%;
    margin-top: 90px;
    display: inline-block;
    }

    .navbar img{
    left: 50%;
    margin-top: -250px;
    position: relative;
    transform: translateX(-255.5%) translateY(40%);
    }

    .navbar a{
    -webkit-text-emphasis-color: black;
    color: white;
    text-transform: uppercase;
    padding: 25px;
    height: 35px;
    }

    .navbar a:hover {
    color: antiquewhite;
    background-color:#1a1a1a;
    text-transform: uppercase;
    text-decoration:none;
        width: 0;
        transition: 0.4s ease-in;
        -o-transition: 0.4s ease-in;
        -ms-transition: 0.4s ease-in;
        -moz-transition: 0.4s ease-in;
        -webkit-transition: 0.4s ease-in;
        overflow: hidden;
    padding: 25px;
    height: 35px;
    }

    .navbar p {
    margin-bottom: -5px; 
    }

    .abmhomeconent {
    background-color: #452121;
    margin-left: -11px;
    margin-right: -11px;
    margin-top: -5.1%;
    margin-bottom: -39px;
    }

    .simple-ss {
    border-bottom-left-radius: 5em;
    border-bottom-right-radius: 5em;
    width: 1100px;
    height: 300px;
    background-color: black;
    margin-top: 23px;
    margin-left: -11px;
    background-image: url("http://i.imgur.com/vqs1TBE.jpg");
    background-position: 0;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: slide;
    animation-duration: 10s;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    float: right;
    margin-right: 470px;
    margin-bottom:-5px;
     animation-fill-mode:forwards;
    }
    @keyframes slide {
  0% {background-position: 0 -100;}
 50% {background-position: 0 -50px;}
  100% {background-position: 0 0px;}
    }

    #enjin-bar .left {
    display:inherit;
    z-index:50000;
    }

    .m_html p {
    min-height: 1.25em;
    margin-bottom: -64px;
    line-height: 1.25;
    margin-left: 405px;
    }

    #enjin-bar {
    right: .0%;
    top: 7.55%;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    color: #8a8a8a;
    position: absolute;
    z-index:50000;
    }

    #page-footer {
    display:none;
    }

    #page-footer left {
    display: none;
    }

    #page-footer right {
    display: none;
    }

    .container_body {
    margin-top:-.2%;
    margin-left:-.1%;
        margin-right:-.1%;
    }

    .m_news.main {
    position: relative;
    margin-top: 10px;
    }

    .m_news {
    background-color: #1e2124;
    margin-left: .1%;
    margin-right: 1%;
    opacity: .9;
    }
     .m_news.main .float-manage,.m_news.main .float-rss {
        margin-top:0px;
    }
    .m_news .heading {
        background:#D8D8D8;
        height:25px;
        padding:20px;
    }
    .m_news.main .article.first .heading {
        margin-right:0!important;
    }
    .m_news.main .heading .title, .m_news.viewarticle .heading .title {
    font-size: 20px;
    text-transform: uppercase;
    padding-top: 2px;
    margin-top: -5px;
    }
    .m_news .heading .title a {
        color:#000;
        font-weight:300!important;
    }
    .m_news .heading .info {
        visibility:hidden;
    }
    .m_news .heading .info .date {
        visibility:visible;
        float:right;
        position:relative;
        top:-30px;
        font-size:22px;
        text-transform:uppercase;
        color:#fff;

    }
    .m_news .article .article-content {
        font-size:14px;
        line-height:20px;
        text-align:justify;
        padding-bottom:10px;
    }
    .m_news.viewarticle .m_plugin_comment {
        width:94%;
        margin:50px auto 0 auto;
    }
    .m_news.viewarticle .m_plugin_comment .block-title {
        background:transparent;
        border-bottom:2px solid #FFA62F;
        color:#FFA62F;
    }
    .m_news .article .heading .element_avatar {
    margin-top: -2.4%;
    margin-left:-6px;
    }

    .post_interact_like_list {
    width:100px;
    }

    .post_interact_like_list_hidden{
    width:100px;
    }













    #boot_admin{
    margin-top:0px;

    }

    #boot_admin a:nth-child(1){
    display:none;
    }

    #boot_profile{
    height:30px;

    }

    #boot_profile .element_username{
    color: black !important;
    text-decoration:none !important;

    }

    #boot_profile span:hover{
    background-color: transparent;
    color: rgb(51, 51, 51) !important;
    text-decoration: none;
    }




    /*Changes our enjin dropdown caret to something that is close to twitter's     caret object(Part 2 for border)*/
    #enjin-bar .arrow:after{
    border-top:6px solid transparent;
    border-top-color:rgba(255, 255, 255);
    border-right:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left:6px solid transparent;
top:3px;
}

/*Changes the style of our entire dropdown box to mimick Boot strap style*/
.element_dropdown_menu.element_popup.enjinbar-menu{
margin-top:26px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
border:1px solid #ccc;
border:1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
z-index:99999;
color:black;
}

/*Our inner elements of our entire enjin drop down*/
.element_popup .inner {
background-color: white !important;
margin-left:10px;
text-decroation:none;
padding:0px 0;
margin:-1px -25px 0;
list-style:none;
border:solid gray 1px;
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
color:black;

}

/*Text - Our inner elements of our entire enjin drop down*/
.element_popup .inner li a{
color:#333;
font-size:12px;
font-family:Arial;
padding:6px 20px !important;
}

/*Text - Hover - Our inner elements of our entire enjin drop down*/
.element_popup .inner .menu-link:hover{
text-decoration:none;
color:#ffffff;
background-color:#0081c2;
background-image:-moz-linear-gradient(top, #0088cc, #0077b3);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);
background-image:-o-linear-gradient(top, #0088cc, #0077b3);
background-image:linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

/*Enjin Divider lines to look...better*/
.element_popup .inner .menu-divider-line{
background-color: #E5E5E5 !important;
border-bottom: 1px solid white !important;
height:1px !important;
opacity:0.4;
}

/*Profile drop down item hover events*/
.element_popup .inner .item:hover{
background-color: rgb(0, 129, 194);
background-image: linear-gradient(to bottom, rgb(0, 136, 204), rgb(0, 119, 179));
}

/*Profile drop down text style*/
.element_popup .inner .item a{
text-decoration:none;
font-weight: normal;
margin-bottom:-5px; /*Reduces some spacing..since menu is huge*/
color: rgb(51, 51, 51);
font-family:arial;
}

/*Profile drop down text style - hover*/
.element_popup .inner .item a:hover{
color: rgb(255, 255, 255);
}

/*Font,text - Our site box at bottom of profile dropdown*/
.sitebox a {
font-size:10px !important;
color:#333;
margin-left:-20px;
background-color:transparent;
}

/*Font,text, make less default space - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox{
margin-bottom:10px;
}

/*That damn gear! - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox .gear {
background-position: 40px 0px; /*Removes Enjin's mysterious extra icons*/ }

/*Text for site urls - Our site box at bottom of profile dropdown*/
.sitebox .url{
color:#333;
}

/*Our visible username text*/
#enjin-bar .element_username{
color:#000;
text-decoration:none;
}

/*Removes our likes etc.*/
#enjin-bar #enjin-bar-likes{
display:none !important;
}

/*Removes site info,site name and our admin gear*/
#enjin-bar .left a:nth-of-type(1),#enjin-bar .left a:nth-of-type(2),#enjin-bar .left a:nth-of-type(3){
display:none !important;
}

/*creates a default right position for our admin, fixed, position manually on your fixed nav*/
#enjin-bar .left{
margin-top:8px;
z-index:9999;
margin-left:530px;
position:fixed;
}



/*Our admin text on hover*/
#enjin-bar .left a:hover{
color: rgb(51, 51, 51);
text-decoration:none;
}

 .sitebox {
     display:none;
}
/*END Enjin bar nav positioning*/

/*profile*/

.v2_system_social .widget_owner {
    padding: 5px;
    font-size: 14px;
    padding-bottom: 25px;
}
.v2_system_social .middle_inner, .v2_system_social .sidebar_widget_inner, .v2_system_social .profile_menu .menu_popup_inner {
    border: 0px;
    border-color: transparent;
    padding: 1px;
}

.v2_system_social table.header .cover {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    width: 100%;
    height: 173px;
    max-width: 898px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-repeat: no-repeat;
    background-position: -1px -1px;
    position: relative;
}

.v2_system_social table.header .avatar {
    width: 173px;
    height: 173px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-repeat: no-repeat;
    background-position: -1px -1px;
}

.v2_system_social .middle {
    margin: 0 400px 0 78px;
    border-radius: 0px;
    min-height: 600px;
}

.v2_system_social .sidebar_widget {
    width: 383px;
    border-radius: 0px;
    margin-bottom: 15px;
}
.sidebar_widget {
    background-color: #613D41;
}
body.liquid .v2_system_social {
    max-width: 1090px;
    min-width: 954px;
    margin: 0 auto;
    width: 1067px;
}

#avatar img {
    max-width: 100%;
    border-style: solid;
    border-width: 0px;
    /* float: right; */
    z-index: 1;
    margin-top: -2.8%;
    /* margin-left: 700px; */
    float: right;
    position: relative;
}

.m_pointsdisplay {
display:none;
}
.v2_system_social .wall .share_closed, .v2_system_social .wall .share, .v2_system_social .wall .share_add_container {
    background-color: #ffffff;
    border: 1px solid;
    border-color: #1a1a1a;
    width: 67%;
}
.v2_system_social .widget_owner .logo {
    float: left;
    width: 74px;
    margin-right: 10px;
    border-radius: 0px;
    overflow: hidden;
}
















.container_body .container_right {
    /* background-image: url(https://assets-cloud.enjin.com/themes/1350633694_re.png); */
    /* width: 13px; */
    /* background-color: transparent; */
}

.m_shoutbox {
    width: 100%;
    background-color: #1e2124;
    opacity: .9;
}


@media screen and (min-width: 1024px)
(index):477

#enjin-bar .left {
    display:none;
}




#boot_admin{
margin-top:0px;

}

#boot_admin a:nth-child(1){
display:none;
}

#boot_profile{
height:30px;

}

#boot_profile .element_username{
color: black !important;
text-decoration:none !important;

}

#boot_profile span:hover{
background-color: transparent;
color: rgb(51, 51, 51) !important;
text-decoration: none;
}




/*Changes our enjin dropdown caret to something that is close to twitter's caret object(Part 2 for border)*/
#enjin-bar .arrow:after{
border-top:6px solid transparent;
border-top-color:rgba(255, 255, 255);
border-right:6px solid transparent;
border-bottom:6px solid transparent;
border-left:6px solid transparent;
top:3px;
}

/*Changes the style of our entire dropdown box to mimick Boot strap style*/
.element_dropdown_menu.element_popup.enjinbar-menu{
margin-top:26px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
border:1px solid #ccc;
border:1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
z-index:99999;
color:black;
}

/*Our inner elements of our entire enjin drop down*/
.element_popup .inner {
background-color: white !important;
margin-left:10px;
text-decroation:none;
padding:0px 0;
margin:-1px -25px 0;
list-style:none;
border:solid gray 1px;
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
color:black;

}

/*Text - Our inner elements of our entire enjin drop down*/
.element_popup .inner li a{
color:#333;
font-size:12px;
font-family:Arial;
padding:6px 20px !important;
}

/*Text - Hover - Our inner elements of our entire enjin drop down*/
.element_popup .inner .menu-link:hover{
text-decoration:none;
color:#ffffff;
background-color:#0081c2;
background-image:-moz-linear-gradient(top, #0088cc, #0077b3);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);
background-image:-o-linear-gradient(top, #0088cc, #0077b3);
background-image:linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

/*Enjin Divider lines to look...better*/
.element_popup .inner .menu-divider-line{
background-color: #E5E5E5 !important;
border-bottom: 1px solid white !important;
height:1px !important;
opacity:0.4;
}

/*Profile drop down item hover events*/
.element_popup .inner .item:hover{
background-color: rgb(0, 129, 194);
background-image: linear-gradient(to bottom, rgb(0, 136, 204), rgb(0, 119, 179));
}

/*Profile drop down text style*/
.element_popup .inner .item a{
text-decoration:none;
font-weight: normal;
margin-bottom:-5px; /*Reduces some spacing..since menu is huge*/
color: rgb(51, 51, 51);
font-family:arial;
}

/*Profile drop down text style - hover*/
.element_popup .inner .item a:hover{
color: rgb(255, 255, 255);
}

/*Font,text - Our site box at bottom of profile dropdown*/
.sitebox a {
font-size:10px !important;
color:#333;
margin-left:-20px;
background-color:transparent;
}

/*Font,text, make less default space - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox{
margin-bottom:10px;
}

/*That damn gear! - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox .gear {
background-position: 40px 0px; /*Removes Enjin's mysterious extra icons*/ }

/*Text for site urls - Our site box at bottom of profile dropdown*/
.sitebox .url{
color:#333;
}

/*Our visible username text*/
#enjin-bar .element_username{
color:#000;
text-decoration:none;
}

/*Removes our likes etc.*/
#enjin-bar #enjin-bar-likes{
display:none !important;
}

/*Removes site info,site name and our admin gear*/
#enjin-bar .left a:nth-of-type(1),#enjin-bar .left a:nth-of-type(2),#enjin-bar .left a:nth-of-type(3){
display:none !important;
}

/*creates a default right position for our admin, fixed, position manually on your fixed nav*/
#enjin-bar .left{
margin-top:8px;
z-index:9999;
margin-left:530px;
position:fixed;
}



/*Our admin text on hover*/
#enjin-bar .left a:hover{
color: rgb(51, 51, 51);
text-decoration:none;
}

/*END Enjin bar nav positioning*/

Answer 1

我认为可以肯定地说没有人会阅读 allllll 那个 css ;) 但是快速浏览一下您的站点，有两个明显的地方需要更改。当然，这完全取决于您所说的扩大一切的意思。但是您将 body #site-body 和 #page-wrap 都设置为 max-width:100px。您可以删除它或更改它，它会将您的主要内容延伸到整个页面。我怀疑图像和菜单在页面上方也有一些东西。

我还希望减少 !important 的数量，因为它们会让您在尝试设计样式时遇到各种麻烦。希望对您有所帮助!