Question

“开箱即用”ASP.NET创建的主页有左右边缘（页面不占用浏览器窗口的整个宽度）。

我需要保留这个，但我还需要为左右边缘（相当数量）和顶部和底部（更少）添加阴影。这显示了我需要多少阴影 - 这显示了页面的NW角，左边缘阴影比顶边更厚：

我假设我需要一个CSS类来实现这一点，但是我需要应用它的元素是什么？正文CSS是：

body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: white;
}

更新

这里受欢迎的需求是HTML：

<div class="jumbotronjr">
    <img src="http://www.platypus.com/wp-content/themes/platypus/images/pa_logo_notag.png" alt="Platypus  logo">
    <label class="titletext">Report Scheduler</label>
</div>

<div class="row">
    <div class="col-md-12">
        <hr />
    </div>
</div>

@* row 1: Select a Unit "combobox" *@
<div class="row">
    <div class="col-md-12">
        <label class="sectiontext">Select a Unit</label>
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <select class="dropdown" id="unitsselect" name="unitsselect">
            <option disabled selected value="-1">Please choose a Unit</option>
            @foreach (var field in units)
            {
                <option id="selItem_@(field.unit)" value="@field.unit">@field.unit</option>
            }
        </select>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <label class="sectiontext">Select Report</label>
    </div>
</div>

@* row 2: Select Report checkboxes *@
<div class="row">
    <div class="col-md-12" id="unitsCheckboxDiv">
            @foreach (var rpt in reports)
            {
                @* convert report name to lowercase and no spaces for use as checkbox's ID *@
                var morphedRptName = rpt.report.Replace(" ", string.Empty).Replace("/", "_").ToLower();
                <input class="ckbx leftmargin8" id="ckbx_@(morphedRptName)" type="checkbox" value="@rpt.report" />@rpt.report
            }
    </div>
</div>

        @* row 3: Email recipients  *@
        <div class="row">
            <div class="col-md-12">
                    <h4 class="h4 sectiontext">Specify Recipients</h4>
            </div>
        </div>

@* row 4: Email recipients  *@
<div class="row">
    <div class="col-md-12">
            <input type="text" placeholder="Email 1" id="email1" />
            <input type="text" placeholder="Email 2" id="email2" />
            <input type="text" placeholder="Email 3" id="email3" />
    </div>
</div>

@* row 5: Email recipients  *@
<div class="row">
    <div class="col-md-12">
            <input type="text" placeholder="Email 4" id="email4" />
            <input type="text" placeholder="Email 5" id="email5" />
            <input type="text" placeholder="Email 6" id="email6" />
    </div>
</div>

@* row 6: Email recipients  *@
<div class="row">
    <div class="col-md-12">
            <button class="btn pseudobtn" name="btnAddlEmail" id="btnAddlEmail">+ Add Another Email</button>
    </div>
</div>

@*from https://www.simple-talk.com/dotnet/asp.net/modal-input-forms-in-asp.net-mvc/*@
        @* modal input form which remains invisible until the link (addlEmails) is clicked *@
        <div class="modal fade halfwidth" id="add-email">
            <div class="modal-header">
                <a class="close" data-dismiss="modal"></a>
                <h3></h3>
            </div>
            <div class="modal-body">
                <p></p>
                <label class="margin4horizontal"></label>
                <input type="text" name="additionalEmail" id="additionalEmail" />
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal"></a>
                <a href="#" class="btn btn-primary" id="btnSaveEmailInternal"></a>
            </div>
        </div>
        @* row 4: "Generate and Email Report" label *@
        <div class="row">
            <div class="col-md-12">
                <h4 class="h4 sectiontext">Generation and Email Reports</h4>
            </div>
        </div>

        @* row 5: Label and first radio button on left, second radio button on right  *@
        <div class="row">
            <div class="col-md-6">
                <input type="radio" id="groupRptGenerationAndSendingByDayOfMonth" name="groupRptGenerationAndSendingTiming" value="day">On a specific day of the month
            </div>
        </div>

@* row 6: Day of month selection and label on left; Nth DOW of each (frequency) on the right  *@
<div class="row">
    <div class="col-md-6">
            <select id="dayofmonthselect" name="dayofmonthselect">
                @foreach (String day in daysOfMonth)
                {
                    <option id="selItem_@(day) value=" day">@day</option>
                }
            </select>
            <label> of each month</label>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div>
            <input type="radio" id="groupRptGenerationAndSendingBasedOnAPattern" name="groupRptGenerationAndSendingTiming" value="pattern">Based on a pattern<br>
            <select id="ordinalselect">
                @foreach (String ord in ordinalWeeksOfMonth)
                {
                    <option id="selItem_@(ord) value=" ord">@ord</option>
                }
            </select>
            <select id="dayofweekselect">
                @foreach (String dow in daysOfWeek)
                {
                    <option id="selItem_@(dow) value=" dow">@dow</option>
                }
            </select>
            <label> of each</label>
            <select id="weekormonthselect">
                @foreach (String pf in patternFrequency)
                {
                    if (pf == "Month")
                    {
                        <option id="selItem_@(pf)" value="@pf" selected="selected">@pf</option>
                    }
                    else
                    {
                        <option id="selItem_@(pf) value=" pf">@pf</option>
                    }
                }
            </select>
        </div>
    </div>
</div>

        @* row 7: "Report Parameters" text *@
            <div class="row">
                <div class="col-md-12">
                    <h3 class="h3 sectiontext">Report Date Range Parameters</h3>
                </div>
            </div>

            @* row 7b: Produce ge params on left, Delivery Performance on right *@
            <div class="row">
                <div class="col-md-6">
                        <h4>Produce ge (report spans up to 13 months)</h4>
                        <label>From</label>
                        <select class="dropdown" id="prodgefrom" name="prodgefrom">
                            @for (int i = 1; i <= maxMonthsBackBegin; i++)
                            {
                                if (i == 13)
                                {
                                    <option id="selItem_@(i)" value="@i" selected="selected">@i</option>
                                }
                                else
                                {
                                    <option id="selItem_@(i)" value="@i">@i</option>
                                }
                            }
                        </select>
                        <label>months back</label>
                        <label>To</label>
                        <select id="prodgeto" name="prodgeto">
                            @for (int i = 1; i <= maxMonthsBackEndNormal; i++)
                            {
                                <option id="selItem_@(i)" value="@i">@i</option>
                            }
                        </select>
                        <label>months back</label>
                        <button class="btn btn-sm" id="btnTestProducegeSettings">Test Settings</button>
                </div>
                <div class="col-md-6">
                        <h4>Delivery Performance (report spans up to 40 days)</h4>
                        <label>From</label>
                        <select class="dropdown" id="delperffrom" name="delperffrom">
                            @for (int i = 1; i <= maxDaysBackForDeliveryPerformance; i++)
                            {
                                if (i == 14)
                                {
                                    <option id="selItem_@(i)" value="@i" selected="selected">@i</option>
                                }
                                else
                                {
                                    <option id="selItem_@(i)" value="@i">@i</option>
                                }
                            }
                        </select>
                        <label>days back</label>
                        <label>To</label>
                        <select class="dropdown" id="delperfto" name="delperfto">
                            @for (int i = 1; i <= maxDaysBackForDeliveryPerformance; i++)
                            {
                                if (i == 7)
                                {
                                    <option id="selItem_@(i)" value="@i" selected="selected">@i</option>
                                }
                                else
                                {
                                    <option id="selItem_@(i)" value="@i">@i</option>
                                }
                            }
                        </select>
                        <label>days back</label>
                        <button class="btn btn-sm" id="btnTestDeliveryPerformanceSettings">Test Settings</button>
                </div>

            @* row 7c: Price Compliance params on left, Fill Rate on right *@
            <div class="row">
                <div class="col-md-6">
                        <h4>Price Compliance (report spans up to 13 months)</h4>
                        <label>From</label>
                        <select class="dropdown" id="pricecompliancefrom" name="pricecompliancefrom">
                            @for (int i = 1; i <= maxMonthsBackBegin; i++)
                            {
                                <option id="selItem_@(i)" value="@i">@i</option>
                            }
                        </select>
                        <label>months back</label>
                        <label>To</label>
                        <select class="dropdown" id="pricecomplianceto" name="pricecomplianceto">
                            @for (int i = 1; i <= maxMonthsBackEndNormal; i++)
                            {
                                <option id="selItem_@(i)" value="@i">@i</option>
                            }
                        </select>
                        <label>months back</label>
                        <button class="btn btn-sm" id="btnTestPriceComplianceSettings">Test Settings</button>
                </div>
                <div class="col-md-6">
                        <h4>Fill Rate (report spans up to 4 months)</h4>
                        <label>From</label>
                        <select class="dropdown" id="fillratefrom" name="fillratefrom">
                            @for (int i = 1; i <= maxMonthsBackBegin; i++)
                            {
                                <option id="selItem_@(i)" value="@i">@i</option>
                            }
                        </select>
                        <label>months back</label>
                        <label>To</label>
                        <select class="dropdown" id="fillrateto" name="fillrateto">
                            @for (int j = 1; j <= maxMonthsBackEndFillRate; j++)
                            {
                                <option id="selItem_@(j)" value="@j">@j</option>
                            }
                        </select>
                        <label>months back</label>
                        <button class="btn btn-sm" id="btnTestFillRateSettings">Test Settings</button>
                </div>
            </div>
        </div>

        @* row 8: "Save config" button on left, "View List of future reports" on right *@
        <div class="row">
            <div class="col-md-6">
                <button class="btn btn-primary" id="btnSaveConfig" name="btnSaveConfig">Save/Update Configuration for this Unit and Clear Selections</button>
            </div>
            <div class="col-md-6">
                <button class="btn btn-primary" id="btnViewList" name="btnViewList">View List of Future Report Generation</button>
            </div>
        </div>

更新2

这是_Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Platypus</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <script type="text/javascript">
        var appInsights=window.appInsights||function(config){
            function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace","Ajax"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t
        }({
            instrumentationKey:"******"
        });

        window.appInsights=appInsights;
        appInsights.trackPageView();
    </script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Report Scheduler", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        @*<hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Platypus</p>
        </footer>*@
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Answer 1

根据您提供的HTML，您可以为主要内容区域创建extern crate fnv; use std::collections::HashMap; use std::hash::BuildHasherDefault; use fnv::FnvHasher; type HashMapFnv<K, V> = HashMap<K, V, BuildHasherDefault<FnvHasher>>; fn main() { let mut map = HashMapFnv::default(); map.insert(1, "Hello"); map.insert(2, ", world!"); println!("{:?}", map); }，并在主样式表中使用以下css：

box-shadow

我使用网站css3generator为.body-content { -webkit-box-shadow: -1px 0 5px 0 rgba(0,0,0,.25); box-shadow: -1px 0 5px 0 rgba(0,0,0,.25); }创建了样式定义。你可以去那里创建一个新的，如果这不会创建你想要的确切阴影。

如何在默认ASP.NET页面的边缘添加着色？

更新

更新2

1 个答案: