个人中心
gpt4 book ai didi

html - 布局中的CSS背景

转载 作者：行者123 更新时间：2023-11-28 07:06:05 27 4
gpt4 key购买 nike

我会为我的布局使用背景。我正在编写一个 Rails 应用程序，但我不擅长 CSS。这是我的实际页面:

enter image description here

如您所见，有:banner、main、column 和 footer。我使用了这个 CSS:

    /*
 * This is a manifest file that'll be compiled into application.css, which will include all the file
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.

 *= require_self

 *= require jquery-ui

 *= require_tree .

*/




#container{
        //centered layout
        margin-left: 10em;
        margin-right: 10em;


        #banner {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+65 */
            background: rgb(238,238,238); /* Old browsers */
            background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 65%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(65%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 65%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 65%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 65%); /* IE10+ */
            background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 65%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
            height: 160px;

            padding: 30px;

            border-bottom: 2px solid;

            font: small-caps 20px/20px "Times New Roman", serif;

            color: black;

            text-align: left;





            img {

                float: left;

                margin-top: -10px;

            }



            p {

             text-align: right; 

             font-weight: bold;

            }



            c {

             color: orange;

            }



        }



        #notice {

            color: #000 !important;

            border: 2px solid red;

            padding: 1em;

            margin-bottom: 2em;

            background-color: #f0f0f0;

            font: bold smaller sans-serif;

        }



        #columns {

            background: #EAF7FF;


            #main {

                margin-left: 17em;

                padding: 2em;

                background: white;

            }



            #side {

                position: absolute;

                color: black;

                float: left;

                padding: 1em 2em;

                width: 13em;

                background: #EAF7FF;



                img{

                    width:50px; /* you can use % */

                    height: auto;

                }



                a:hover{

                    background:none;

                }



                a:hover {

                    color: black;

                }


                ul {

                  padding: 0;



                    li {

                        list-style: none;

                    }

                }

            }

        }

        #footer {
            background-color: red;
        }
}

我的 HTML 页面是:

    <!DOCTYPE html>
<html>


    <head>

      <title>Salinas</title>
      <%= stylesheet_link_tag   "application", :media => "all" %>

        <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

      <%= javascript_include_tag "application" %>

      <%= csrf_meta_tags %>

    </head>





    <body class="<%= controller.controller_name %>">
        <div id="container">

            <div id="banner">

            </div>



            <div id="columns">

                <div id="side"> 

                <div class="btn-group-vertical">



              </div>

            </div>



            <div id="main">

             <% if notice %>

                 <p class="alert alert-success"><%= notice %></p>

             <% end %>

             <% if alert %>

                 <p class="alert alert-danger"><%= alert %></p>

             <% end %>



             <%= yield %>


            </div>

            <div id="footer">   
                        dwdwdwdw

            </div>  

        </div>


    </body>

</html>

我会得到这样的结果:

enter image description here

(我会有外部绿色背景)你能帮帮我吗？

编辑:我得到了这个结果

enter image description here

最佳答案

将此 CSS 添加到您的样式表:

html{
    background-color:#A8E519; /* change background color to green */
}

关于html - 布局中的CSS背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32955150/

27 4 0
文章推荐： ios - 使用 Parse 在 iOS Swift 中更新对象
文章推荐： c++ - 是否可以创建和使用 MatIterator 数组？
文章推荐： c++ - 对指向对象的指针数组进行排序
文章推荐： c++ - 插入到 2-3-4 树中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com