Başlık ekleme, çizgi düzenini değiştirir

Question 1

Eminim bu süper basit bir şeydir, ancak python'un gösterge tablosunda bir gösterge tablosu oluşturmaya çalışıyorum. Dash veya html'de daha önce hiç deneyimim yok. İstediğim düzende div kutuları oluşturmayı başardım, ancak div'lerden birine bir başlık eklediğimde düzenimi tamamen yok ediyor (Ekli ekran görüntülerine bakın). Birisi lütfen yanlış nereye gittiğimi anlamama yardımcı olabilir misiniz?

Div'den önce gösterge tablosu

import dash
from dash import dcc
from dash import html
import pandas as pd
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div(
    
    [
        html.H1(
            children="ML Dashboard",
            className="main_title",
            style={
                "color": "black",
                "text-align": "center"
            },
        ),

        html.Div(
            [
                html.Div(
                    [
                       
                    ],
                    style={
                        "background-color": "#096484",
                        "height": "5vh",
                        "width": "20vw",
                        "margin-left": "9vw",
                    }
                ),
            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "39vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

        html.Div(
            [

            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "26vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

        html.Div(
            [
                html.Div(
                    [

                    ],
                    style={
                        "background-color": "#4796B3",
                        "height": "40vh",
                        "width": "24vw",
                        "margin-left": "1vw",
                        "margin-top": "3vh"
                    }
                ),

                html.Div(
                    [

                    ],
                    style={
                        "background-color": "#4796B3",
                        "height": "40vh",
                        "width": "24vw",
                        "margin-left": "1vw",
                        "margin-top": "1.5vh"
                    }
                ),

            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "26vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

    ],
    style={
        "background-color": "#52ACCC",
        "height": "95vh",
        "width": "95vw",
        "margin-left": "2vw"
    }
)

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8080, debug=True)

Div'den sonra gösterge tablosu

import dash
from dash import dcc
from dash import html
import pandas as pd
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div(
    
    [
        html.H1(
            children="ML Dashboard",
            className="main_title",
            style={
                "color": "black",
                "text-align": "center"
            },
        ),

        html.Div(
            [
                html.Div(
                    [
                        html.H1(
                            children="PIPELINE",
                            className="title_1",
                            style={
                                "color": "white",
                                "text-align": "center"
                            },
                        ),
                    ],
                    style={
                        "background-color": "#096484",
                        "height": "5vh",
                        "width": "20vw",
                        "margin-left": "9vw",
                    }
                ),
            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "39vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

        html.Div(
            [

            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "26vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

        html.Div(
            [
                html.Div(
                    [

                    ],
                    style={
                        "background-color": "#4796B3",
                        "height": "40vh",
                        "width": "24vw",
                        "margin-left": "1vw",
                        "margin-top": "3vh"
                    }
                ),

                html.Div(
                    [

                    ],
                    style={
                        "background-color": "#4796B3",
                        "height": "40vh",
                        "width": "24vw",
                        "margin-left": "1vw",
                        "margin-top": "1.5vh"
                    }
                ),

            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "26vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

    ],
    style={
        "background-color": "#52ACCC",
        "height": "95vh",
        "width": "95vw",
        "margin-left": "2vw"
    }
)

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8080, debug=True)

Question 2

Dash ile başlamanız heyecan verici-harika bir web çerçevesi ve hepsinin Python olması bir kazan-kazan; başlamak için harika bir yol.

İşaret edeceğim birkaç şey olsa da:

Sanırım iç içe geçmişlerle biraz aşırıya kaçıyorsun. divörneğinizde paylaştığınız stile kesinlikle bağlı değilseniz, yalnızca bir ana sayfa kullanmanızı tavsiye ederim Div çoğunlukla
Tüm CSS stil anahtar kelimelerinin "camel case" (ör. camelCase) ile yazılması gereken belirli bir Çizgiye özgü tuhaflıktır; bu nedenle, aslında kenar boşluğunuzun veya tire içeren diğer stil ayarlarının hiçbiri gerçekten uygulanmadı / oluşturulmadı

Kullanmakta özgür olduğunuz bir örnek şablon sağladım, temelde üzerinde çalıştığım açık kaynaklı github repo'sundan "dash-webapp-template" adlı bir çalışmadan oldukça aceleyle kopyalayıp basitleştirdim!

Şuna benziyor, belki bu sana mantıklı geliyor ve bunu bir atlama noktası olarak kullanabilirsin?

@import url('https://fonts.googleapis.com/css?family=Cinzel:300,400,500,600,700|Muli:200,300,400,500,600|Open+Sans:200,300,400,500,600|Oswald:200,300,400,500,600&amp;subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,200i,300,300i,400,400i,500,500i');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800&amp;subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:200,300,400,500');

a { color: rgb(146, 146, 146); cursor: pointer; text-decoration: none; -o-transition: color 2.0s ease-out, background .1s ease-in; -ms-transition: color 2.0s ease-out, background .1s ease-in; -moz-transition: color 2.0s ease-out, background .1s ease-in; -webkit-transition: color 2.0s ease-out, background .1s ease-in; transition: all 1.67s ease-out; padding: 10px 10px 10px 10px }
a.fails { color: rgb(146, 146, 146); }
a.success { box-shadow: inset 0px 0px 20px 2px #96ffa2ab, 0px 0px 0px 4px rgb(165, 255, 200); border-radius: 18px; padding: 4px 50px 4px 10px; color: #147b01 !important; }
a.tool-ref { background: #dcdcdc4f; padding: 1px 3px 2px 3px; font-weight: 600; vertical-align: bottom; border-radius: 5px; color: rgb(35, 84, 148); border: 1px inset transparent }
a.tool-ref:hover { background: #fff; border: 1px outset #00ffc8; color: #3df5b4; text-decoration: underline }
a:hover, a:focus { color: #00efb8 !important; transition-duration: 2.75 s !important; transition-property: transform !important }
a:hover:before, a:focus:before, span:hover:before { pointer-events: none; position: absolute; z-index: -1; content: ''; opacity: .75; color: radial-gradient(ellipse at center, rgba(0, 0, 0, .11) 50 %, rgba(0, 0, 0, 0.30) 90 %) !important; transition-duration: 1.5 s; transition-property: transform opacity 0.95 }
blockquote { border-left: 4px lightgrey solid; padding-left: 1rem; margin-top: 2rem; margin-bottom: 2rem; margin-left: 0rem }
body { font-size: 1.15rem; line-height: 1.1; font-weight: 400; font-family: "Oswald", "Muli", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(50, 50, 50) }
body { margin: 0; overflow-x: hidden; text-align: center }
button#clear-pipeline { background-color: #cccccc24 !important; color: #000000bd !important; border: 2px outset; border-color: #d4d4d4a3; }
button#initiate-pipeline { font-size: 90%; padding: .67% 6% .67% 6%; border-width: 1px; margin: 2%; mix-blend-mode: color; letter-spacing: 8px; text-transform: uppercase; border-radius: 200px }
button#initiate-pipeline:hover { border-color: #00ffb54a; border-width: 0.5px; box-shadow: inset 0px -30px 0px -5px #efefef4a; background-blend-mode: exclusion; background: #ffffff5e; animation: pact-gradient-text-flow 5s infinite linear; }
button#refresh-downloads-links:hover { border: 2px inset #d9d9d921 }
button#sign-on-submit, button#log-out-submit, button#refresh-downloads-links, button.submit-buttons { background: rgb(65, 0, 255); mix-blend-mode: luminosity; margin-top: 1px; border: 2px outset #aaa; font-size: 60%; border-radius: 100px; letter-spacing: .5rem; display: inline-flex; }
button#sign-on-submit:hover, button#log-out-submit:hover, button.submit-buttons:hover { background-color: rgba(117, 117, 117, 0.5) !important; filter: invert(1) brightness(0.75) contrast(1.5) saturate(2) }
button, .button { margin-bottom: 0rem }
button, .button, button:focus { outline: none !important }
code { font-family: 'Roboto Mono', monospace; font-size: 0.85rem !important }
div.dash-spreadsheet, .dash-freeze-left, .dash-spreadsheet, .dash-spreadsheet-container, .dash-freeze-left, .dash-grow { max-width: 100% !important }
h1 { font-size: 3.5rem; font-family: 'Montserrat'; text-rendering: optimizeLegibility; color: #0d04a5; font-weight: 500; text-decoration: none; border-bottom: 0.0px solid gray; line-height: 4rem; text-decoration: underline }
h2 { font-family: 'Oswald', serif; color: var(--pph-color-8); cursor: default; font-weight: 300; font-size: 2rem; }
h3 { font-size: 2.0rem; font-family: 'Montserrat', sans-serif; font-weight: 300; color: rgb(32, 92, 188); cursor: default }
h4 { font-size: 1.5rem; font-family: 'Oswald', sans-serif; color: var(--pph-color-57); font-weight: 400; cursor: default }
h5 { font-size: 1.2rem; font-family: 'Muli', sans-serif; cursor: default }
h6 { font-size: 1.1rem; color: #333; font-weight: 400 }
header.a:link { color: rgb(18, 116, 165) }
hr { margin-top: 2%; justify-content: center; margin-bottom: 3% }
hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1 }
input, textarea, select, fieldset { margin-bottom: 0rem }
input:-internal-autofill-previewed, input:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected { background-color: #ffffff00 !important }
label, legend { display: block; margin-bottom: 0px }
label>.label-body { display: inline-block }
p { margin-top: 0 }
p, h2, h4, h5, h6 { margin-top: .5%; margin-bottom: 1% }
p, ul, ol { margin-bottom: 0.75rem }
pre, dl, figure, table, form { margin-bottom: 0rem }
section.wrapper { padding: 10px 0 }
span.menubar-title:hover { color: rgb(13, 4, 145) !important }

.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; padding: 0 25px; color: #000000; text-align: center; font-size: 14px; font-weight: 500; font-family: "Cinzel", serif !important; line-height: 32px; text-decoration: none; white-space: nowrap; background-color: #ffffffcc !important; border-radius: 30px; border: 1px ridge #00000050; cursor: pointer; box-sizing: border-box }
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #00000075 !important; background-color: #33C3F050; border-color: #33C3F0 }
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #00000075 !important; background-color: transparent; border-color: #1EAEDB }
.button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #5C5D86; border-color: #00000075 !important }
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { border-color: #00FFC050; background: #00000075 }
.fader-line-long { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 650, from(rgba(200, 210, 220, 0.5)), to(#fff0)); }
.fader-line-short { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(rgba(120, 120, 150, 0.5)), to(#fff0)) }
.hr-style-2 { border-top: 3px double #8c8b8b; margin: 10px 10px 10px 10px; width: 67% }
.hvr-float-shadow, .workflow-css label { display: inline-block; vertical-align: middle; position: relative; -webkit-transition-duration: 1.0s; transition-duration: 1.0s; -webkit-transition-property: transform; transition-property: transform; text-rendering: optimizeLegibility }
.hvr-float-shadow:before, .workflow-css label:before { pointer-events: none; position: absolute; z-index: 99; content: ''; top: 180%; left: -10%; height: 6px; width: 120%; opacity: 0.05; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity }
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active, .workflow-css label:hover, .workflow-css label:focus, .workflow-css label:active { -webkit-transform: translateY(-1px)translateY(-1px); color: rgba(0, 215, 198, 1.0); opacity: 0.99; animation-name: anim-rainbow-flow-keys; animation-duration: 1s; animation-iteration-count: infinite; mix-blend-mode: hard-light }
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before, .workflow-css label:hover:before, .workflow-css label:focus:before, .workflow-css label:active:before { opacity: 0.9; -webkit-transform: translateY(-1px); transform: translateY(1px) }

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div>
    <h1>ML Dashboard</h1>
    <h2>PIPELINE</h2>
    <hr style="margin-left: 25%; width: 50%;">
    <h3 style="margin-top: -10px; text-align: center;">Step One: Upload [e.g., insert expected data input files].</h3>
    <h2 style="margin-top: -0.75%;">Then, click “Launch Pipeline” to launch analysis.</h2>
    <hr style="margin-left: 25%; width: 50%;">
    <div id="upload-data">
      <div class="" aria-disabled="false" style="position: relative;">
        <div style="background-color: rgba(255, 255, 255, 0.5); border-color: transparent; border-radius: 100px; border-style: solid; border-width: 1px; box-shadow: rgba(0, 0, 50, 0.16) 0px 1px 5px 2px; margin: 2% 15%; padding: 0.5%; text-align: center;">Drag/Drop ⤓ file(s) here —or—<a class="hvr-float-shadow" style="font-weight: 400; margin-bottom: 5px;">
    
    John Collins           
    
    
          2021-11-19 19:54:35

John Collins · Answer 1 · 2021-11-19T19:54:35

Dash ile başlamanız heyecan verici-harika bir web çerçevesi ve hepsinin Python olması bir kazan-kazan; başlamak için harika bir yol.

İşaret edeceğim birkaç şey olsa da:

Sanırım iç içe geçmişlerle biraz aşırıya kaçıyorsun. divörneğinizde paylaştığınız stile kesinlikle bağlı değilseniz, yalnızca bir ana sayfa kullanmanızı tavsiye ederim Div çoğunlukla
Tüm CSS stil anahtar kelimelerinin "camel case" (ör. camelCase) ile yazılması gereken belirli bir Çizgiye özgü tuhaflıktır; bu nedenle, aslında kenar boşluğunuzun veya tire içeren diğer stil ayarlarının hiçbiri gerçekten uygulanmadı / oluşturulmadı

Kullanmakta özgür olduğunuz bir örnek şablon sağladım, temelde üzerinde çalıştığım açık kaynaklı github repo'sundan "dash-webapp-template" adlı bir çalışmadan oldukça aceleyle kopyalayıp basitleştirdim!

Şuna benziyor, belki bu sana mantıklı geliyor ve bunu bir atlama noktası olarak kullanabilirsin?

@import url('https://fonts.googleapis.com/css?family=Cinzel:300,400,500,600,700|Muli:200,300,400,500,600|Open+Sans:200,300,400,500,600|Oswald:200,300,400,500,600&amp;subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,200i,300,300i,400,400i,500,500i');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800&amp;subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:200,300,400,500');

a { color: rgb(146, 146, 146); cursor: pointer; text-decoration: none; -o-transition: color 2.0s ease-out, background .1s ease-in; -ms-transition: color 2.0s ease-out, background .1s ease-in; -moz-transition: color 2.0s ease-out, background .1s ease-in; -webkit-transition: color 2.0s ease-out, background .1s ease-in; transition: all 1.67s ease-out; padding: 10px 10px 10px 10px }
a.fails { color: rgb(146, 146, 146); }
a.success { box-shadow: inset 0px 0px 20px 2px #96ffa2ab, 0px 0px 0px 4px rgb(165, 255, 200); border-radius: 18px; padding: 4px 50px 4px 10px; color: #147b01 !important; }
a.tool-ref { background: #dcdcdc4f; padding: 1px 3px 2px 3px; font-weight: 600; vertical-align: bottom; border-radius: 5px; color: rgb(35, 84, 148); border: 1px inset transparent }
a.tool-ref:hover { background: #fff; border: 1px outset #00ffc8; color: #3df5b4; text-decoration: underline }
a:hover, a:focus { color: #00efb8 !important; transition-duration: 2.75 s !important; transition-property: transform !important }
a:hover:before, a:focus:before, span:hover:before { pointer-events: none; position: absolute; z-index: -1; content: ''; opacity: .75; color: radial-gradient(ellipse at center, rgba(0, 0, 0, .11) 50 %, rgba(0, 0, 0, 0.30) 90 %) !important; transition-duration: 1.5 s; transition-property: transform opacity 0.95 }
blockquote { border-left: 4px lightgrey solid; padding-left: 1rem; margin-top: 2rem; margin-bottom: 2rem; margin-left: 0rem }
body { font-size: 1.15rem; line-height: 1.1; font-weight: 400; font-family: "Oswald", "Muli", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(50, 50, 50) }
body { margin: 0; overflow-x: hidden; text-align: center }
button#clear-pipeline { background-color: #cccccc24 !important; color: #000000bd !important; border: 2px outset; border-color: #d4d4d4a3; }
button#initiate-pipeline { font-size: 90%; padding: .67% 6% .67% 6%; border-width: 1px; margin: 2%; mix-blend-mode: color; letter-spacing: 8px; text-transform: uppercase; border-radius: 200px }
button#initiate-pipeline:hover { border-color: #00ffb54a; border-width: 0.5px; box-shadow: inset 0px -30px 0px -5px #efefef4a; background-blend-mode: exclusion; background: #ffffff5e; animation: pact-gradient-text-flow 5s infinite linear; }
button#refresh-downloads-links:hover { border: 2px inset #d9d9d921 }
button#sign-on-submit, button#log-out-submit, button#refresh-downloads-links, button.submit-buttons { background: rgb(65, 0, 255); mix-blend-mode: luminosity; margin-top: 1px; border: 2px outset #aaa; font-size: 60%; border-radius: 100px; letter-spacing: .5rem; display: inline-flex; }
button#sign-on-submit:hover, button#log-out-submit:hover, button.submit-buttons:hover { background-color: rgba(117, 117, 117, 0.5) !important; filter: invert(1) brightness(0.75) contrast(1.5) saturate(2) }
button, .button { margin-bottom: 0rem }
button, .button, button:focus { outline: none !important }
code { font-family: 'Roboto Mono', monospace; font-size: 0.85rem !important }
div.dash-spreadsheet, .dash-freeze-left, .dash-spreadsheet, .dash-spreadsheet-container, .dash-freeze-left, .dash-grow { max-width: 100% !important }
h1 { font-size: 3.5rem; font-family: 'Montserrat'; text-rendering: optimizeLegibility; color: #0d04a5; font-weight: 500; text-decoration: none; border-bottom: 0.0px solid gray; line-height: 4rem; text-decoration: underline }
h2 { font-family: 'Oswald', serif; color: var(--pph-color-8); cursor: default; font-weight: 300; font-size: 2rem; }
h3 { font-size: 2.0rem; font-family: 'Montserrat', sans-serif; font-weight: 300; color: rgb(32, 92, 188); cursor: default }
h4 { font-size: 1.5rem; font-family: 'Oswald', sans-serif; color: var(--pph-color-57); font-weight: 400; cursor: default }
h5 { font-size: 1.2rem; font-family: 'Muli', sans-serif; cursor: default }
h6 { font-size: 1.1rem; color: #333; font-weight: 400 }
header.a:link { color: rgb(18, 116, 165) }
hr { margin-top: 2%; justify-content: center; margin-bottom: 3% }
hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1 }
input, textarea, select, fieldset { margin-bottom: 0rem }
input:-internal-autofill-previewed, input:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected { background-color: #ffffff00 !important }
label, legend { display: block; margin-bottom: 0px }
label>.label-body { display: inline-block }
p { margin-top: 0 }
p, h2, h4, h5, h6 { margin-top: .5%; margin-bottom: 1% }
p, ul, ol { margin-bottom: 0.75rem }
pre, dl, figure, table, form { margin-bottom: 0rem }
section.wrapper { padding: 10px 0 }
span.menubar-title:hover { color: rgb(13, 4, 145) !important }

.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; padding: 0 25px; color: #000000; text-align: center; font-size: 14px; font-weight: 500; font-family: "Cinzel", serif !important; line-height: 32px; text-decoration: none; white-space: nowrap; background-color: #ffffffcc !important; border-radius: 30px; border: 1px ridge #00000050; cursor: pointer; box-sizing: border-box }
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #00000075 !important; background-color: #33C3F050; border-color: #33C3F0 }
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #00000075 !important; background-color: transparent; border-color: #1EAEDB }
.button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #5C5D86; border-color: #00000075 !important }
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { border-color: #00FFC050; background: #00000075 }
.fader-line-long { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 650, from(rgba(200, 210, 220, 0.5)), to(#fff0)); }
.fader-line-short { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(rgba(120, 120, 150, 0.5)), to(#fff0)) }
.hr-style-2 { border-top: 3px double #8c8b8b; margin: 10px 10px 10px 10px; width: 67% }
.hvr-float-shadow, .workflow-css label { display: inline-block; vertical-align: middle; position: relative; -webkit-transition-duration: 1.0s; transition-duration: 1.0s; -webkit-transition-property: transform; transition-property: transform; text-rendering: optimizeLegibility }
.hvr-float-shadow:before, .workflow-css label:before { pointer-events: none; position: absolute; z-index: 99; content: ''; top: 180%; left: -10%; height: 6px; width: 120%; opacity: 0.05; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity }
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active, .workflow-css label:hover, .workflow-css label:focus, .workflow-css label:active { -webkit-transform: translateY(-1px)translateY(-1px); color: rgba(0, 215, 198, 1.0); opacity: 0.99; animation-name: anim-rainbow-flow-keys; animation-duration: 1s; animation-iteration-count: infinite; mix-blend-mode: hard-light }
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before, .workflow-css label:hover:before, .workflow-css label:focus:before, .workflow-css label:active:before { opacity: 0.9; -webkit-transform: translateY(-1px); transform: translateY(1px) }

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div>
    <h1>ML Dashboard</h1>
    <h2>PIPELINE</h2>
    <hr style="margin-left: 25%; width: 50%;">
    <h3 style="margin-top: -10px; text-align: center;">Step One: Upload [e.g., insert expected data input files].</h3>
    <h2 style="margin-top: -0.75%;">Then, click “Launch Pipeline” to launch analysis.</h2>
    <hr style="margin-left: 25%; width: 50%;">
    <div id="upload-data">
      <div class="" aria-disabled="false" style="position: relative;">
        <div style="background-color: rgba(255, 255, 255, 0.5); border-color: transparent; border-radius: 100px; border-style: solid; border-width: 1px; box-shadow: rgba(0, 0, 50, 0.16) 0px 1px 5px 2px; margin: 2% 15%; padding: 0.5%; text-align: center;">Drag/Drop ⤓ file(s) here —or—<a class="hvr-float-shadow" style="font-weight: 400; margin-bottom: 5px;">
    
    John Collins           
    
    
          2021-11-19 19:54:35

Başlık ekleme, çizgi düzenini değiştirir

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride