suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wie kann ich meiner Box in HTML eine andere Farbe geben?

P.S. Ich habe diesen Beitrag aktualisiert, um es klarer zu machen!

Wie kann ich Kästchen in HTML verschiedene Farben zuweisen, um interne und externe Anwendungen zu kennzeichnen?

Ich versuche, die Boxen in verschiedenen Farben als Markierungen für interne und externe Anwendungen zu beschriften. Dieser HTML-Code wird dann an eine Rshiny-Anwendung übergeben.

Interne Bewerbungen sind durch 内部有 astrazeneca 字样的网页链接定义的，外部链接是那些 没有 astrazeneca verlinkt.

Hier ist ein Beispiel der HTML-Dateien, die ich habe (ich habe etwa 50 HTML-Dateien, werde aber nur eine bereitstellen) als Beispiel: 

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        .box {
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 2px solid black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .box img {
            max-width: 50%;
            height: auto;
            margin-bottom: 10px;
        }
        .heading {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>

    
    <h2 class="heading">Gene Expression Analysis</h2>
    <div class="container">
        <div class="box">
            <a href= "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/", target=”_blank” >
                <img src= "www/FluidigmAnalysisToolkit.v2.png" alt="Box 1">
                <p>Fludigm_Browser</p>
                <p>Perform Fluidigm data analysis</p>
            </a>
        </div>
        <div class="box">
            <a href="https://gtexportal.org/home", target=”_blank”>
                <img src="www/gtex.png" alt="Box 2">
                <p>GTEx Portal</p>
                <p>Gene expression in normal tissue</p>
            </a>
        </div>
        <div class="box">
            <a href="https://azcollaboration.sharepoint.com/sites/AZ208/SitePages/BioTuring.aspx?OR=Teams-HL&CT=1670593304007&clickparam =eyJBcHBOYW1lIjoiVGVhbXMtRGVza3RvcCIsIkFwcFZlcnNpb24iOiIyOC8yMjExMzAwNDEwMCIsIkhhc0ZlZGVyYXRlZFVzZXIiOmZhbHNlfQ%3D%3D", target=”_blank”>
                <img src="www/bioturing.svg" alt="Box 3">
                <p> BioTuring </p>
                <p>Platform for single-cell analysis and spatial transcriptomics exploration</p>
            </a>
        </div>
        <div class="box">
            <a href="http://informatics.medimmune.com/shiny/scope/", target=”_blank”>
                <img src="www/scope.svg" alt="Box 4">
                <p>SCOPE</p>
                <p>Explore available single cell RNA-Seq studies</p>
            </a>
        </div>
    </div>

    <h2 class="heading">Pathway Analysis</h2>
    <div class="container">
        <div class="box">
            <a href="https://clarivate.com/cortellis/learning/clarivate-for-astrazeneca1796/", target=”_blank”>
                <img src="www/clarivate.png" alt="Box 1">
                <p>Clarivate</p>
                <p>Pathway analysis tools from Cortellis including MetaCore</p>
            </a>
        </div>
        <div class="box">
            <a href="https://analysis.ingenuity.com/pa/launch.jsp">
                <img src= "www/ipa.png" alt="Box 2">
                <p>Ingenuity Pathway Analysis</p>
                <p>Analyze data using manually curated gene sets</p>
            </a>
        </div>
        <div class="box">
            <a href="https://astrazeneca.onramp.bio", target=”_blank”>
                <img src= "www/onramp.png" alt="Box 3">
                <p>OnRamp - Rosalind</p>
                <p>Interactively explore RNA-seq and ChIP-Seq data</p>
            </a>
        </div>
        <div class="box">
            <a href="http://software.broadinstitute.org/gsea/msigdb/index.jsp", target=”_blank”>
                <img src="www/gsea.png" alt="Box 4">
                <p>GSEA</p>
                <p>Gene set enrichment analysis</p>
            </a>
        </div>
    </div>

Wie Sie im HTML oben sehen können, habe ich einige Links mit „astrazeneca“ als Wort, wie "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/", und einen anderen ohne, wie „www/bioturing.svg“

Dies ist der Rshiny-Code für Kontextzwecke: 

library(shiny)
ui <- shiny::fluidPage(
  theme = shinythemes::shinytheme("united"),

  tags$head(tags$style(".navbar {margin-bottom: 0px;}")),

  tags$head(
    tags$style(".container-fluid {padding-right: 0px; padding-left: 0px;}")
  ),

  navbarPage(
    title = div(
      img(src = "www/bftb_logo_v8_bare.png", height = "30px"),
      "AZ Oncology Bioinformatics Toolbox"
    ),
    windowTitle = "BFTB Landing Page",

    tabPanel("Toolbox", icon = icon("wrench"), disable = TRUE,
             shinydashboard::dashboardPage(
               header = shinydashboard::dashboardHeader(title = "   ", titleWidth = 300, disable = TRUE),
               shinydashboard::dashboardSidebar(
                 width = 300 ,
                 textInput("search_term", "Search for apps:"),
                 actionButton("search_button", "Search"),
                 shinydashboard::sidebarMenu(
                   shinydashboard::menuItem(
                     "Tools",
                     tabName = "tools_app",
                     icon = icon("wrench")
                   ),
                   shinydashboard::menuSubItem(
                     "Gene Expression/Signature/Pathways",
                     tabName = "gene_app",
                     icon = icon("chart-line")
                   )
                 )
               ),
               shinydashboard::dashboardBody(
                 shinydashboard::tabItems(
                   shinydashboard::tabItem("tools_app", mod_tools_path_ui("tools_path_ui_1")),
                   shinydashboard::tabItem("gene_app", mod_gene_expressions_sign_path_ui("gene_expression_sign_path_ui"))
                 )
               )
             )
    )
  )
)


server <- function(input, output){


}


shinyApp(ui = ui, server = server)

Und 2 Module: Tool 1

mod_tools_path_ui <- function(id){
  ns <- NS(id)
  tagList(
    
  )
}

Und Gen eins:

mod_gene_expressions_sign_path_ui <- function(id){
  ns <- NS(id)
  tagList(
    shinydashboard::tabItem(
      tabName = "gene_app",
      fluidRow(
        shiny::headerPanel(h3()),
        br(),
        htmltools::htmlTemplate("www/gene.html")
      )
    )
  )
  
}

P粉953231781P粉953231781261 Tage vor457

Antworte allen(1)Ich werde antworten

  • P粉252423906

    P粉2524239062024-04-03 22:22:59

    据我了解这个问题（不确定），您要求 CSS 为某些链接设置不同的颜色。

    您可以为 a 标记使用两个类：

            <div class="box">
            <a class="internal" href="https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/" target=”_blank”>
                <img src="www/FluidigmAnalysisToolkit.v2.png" alt="Box 1">
                <p>Fludigm_Browser</p>
                <p>Perform Fluidigm data analysis</p>
            </a>
        </div>
        <div class="box">
            <a class="external" href="https://gtexportal.org/home" target=”_blank”>
                <img src="www/gtex.png" alt="Box 2">
                <p>GTEx Portal</p>
                <p>Gene expression in normal tissue</p>
            </a>
        </div>

    然后使用这样的CSS：

            a.internal:link {
            color: green;
            background-color: transparent;
            text-decoration: none;
        }

        a.internal:visited {
            color: pink;
            background-color: transparent;
            text-decoration: none;
        }

        a.internal:hover {
            color: red;
            background-color: transparent;
            text-decoration: underline;
        }

        a.internal:active {
            color: yellow;
            background-color: transparent;
            text-decoration: underline;
        }

        a.external:link {
            color: crimson;
            background-color: transparent;
            text-decoration: none;
        }

        a.external:visited {
            color: cyan;
            background-color: transparent;
            text-decoration: none;
        }

        a.external:hover {
            color: midnightblue;
            background-color: transparent;
            text-decoration: underline;
        }

        a.external:active {
            color: lime;
            background-color: transparent;
            text-decoration: underline;
        }

    您应该小心使用 container 和 box 等类名称，因为它们可能已经在 Shiny(dashboard) 中使用。

    <!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 2px solid black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .box img {
            max-width: 50%;
            height: auto;
            margin-bottom: 10px;
        }

        .heading {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-top: 50px;
        }

        a.internal:link {
            color: green;
            background-color: transparent;
            text-decoration: none;
        }

        a.internal:visited {
            color: pink;
            background-color: transparent;
            text-decoration: none;
        }

        a.internal:hover {
            color: red;
            background-color: transparent;
            text-decoration: underline;
        }

        a.internal:active {
            color: yellow;
            background-color: transparent;
            text-decoration: underline;
        }

        a.external:link {
            color: crimson;
            background-color: transparent;
            text-decoration: none;
        }

        a.external:visited {
            color: cyan;
            background-color: transparent;
            text-decoration: none;
        }

        a.external:hover {
            color: midnightblue;
            background-color: transparent;
            text-decoration: underline;
        }

        a.external:active {
            color: lime;
            background-color: transparent;
            text-decoration: underline;
        }
    </style>
</head>

<body>

    <h2 class="heading">Gene Expression Analysis</h2>
    <div class="container">
        <div class="box">
            <a class="internal" href="https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/" target=”_blank”>
                <img src="www/FluidigmAnalysisToolkit.v2.png" alt="Box 1">
                <p>Fludigm_Browser</p>
                <p>Perform Fluidigm data analysis</p>
            </a>
        </div>
        <div class="box">
            <a class="external" href="https://gtexportal.org/home" target=”_blank”>
                <img src="www/gtex.png" alt="Box 2">
                <p>GTEx Portal</p>
                <p>Gene expression in normal tissue</p>
            </a>
        </div>
    </div>

</body>

</html>

    Antwort
    0
  • StornierenAntwort