masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Bagaimanakah saya boleh memberikan kotak saya warna yang berbeza dalam html?
P粉953231781
P粉953231781 2024-04-02 23:21:49
0
1
411

P.S. Saya telah mengemas kini siaran ini untuk menjadikannya lebih jelas!

Bagaimana untuk menetapkan warna yang berbeza pada kotak dalam html untuk menandakan aplikasi dalaman dan luaran?

Saya cuba melabelkan kotak warna yang berbeza sebagai penanda untuk aplikasi dalaman dan luaran. html ini kemudiannya dihantar ke dalam aplikasi rshiny.

Aplikasi dalaman dipautkan oleh 内部有 astrazeneca 字样的网页链接定义的，外部链接是那些 没有 astrazeneca.

Berikut ialah contoh fail html yang saya ada (saya mempunyai kira-kira 50 fail html tetapi hanya akan memberikan satu) sebagai contoh: 

<!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>

Seperti yang anda lihat dalam html di atas, saya mempunyai beberapa pautan dengan "astrazeneca" sebagai perkataan, seperti "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/" dan satu lagi tanpa, seperti "www/bioturing.svg"

Ini ialah kod rshiny, untuk tujuan konteks: 

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)

Dan 2 modul: Alat 1

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

Dan gen satu:

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粉953231781
P粉953231781

membalas semua(1)
P粉252423906
P粉2524239062024-04-03 22:22:59 Tingkat 1

Daripada apa yang saya faham tentang soalan (tidak pasti), anda meminta CSS untuk menetapkan warna yang berbeza untuk pautan tertentu.

Anda boleh menggunakan dua kelas untuk tag 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>

Kemudian gunakan CSS seperti ini: 

        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;
        }

Anda harus berhati-hati menggunakan nama kelas seperti container 和 box kerana ia mungkin sudah digunakan dalam Shiny(papan pemuka). 

<!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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan