iT邦幫忙

0

visual studio code 如何讓選單移到右下

  • 分享至 

  • xImage

為什麼用margin right或float right只會移動產品介紹,首頁只會放大框,動也動不了
https://ithelp.ithome.com.tw/upload/images/20230911/20162024a11PFCXLJY.jpg

    body {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        /*position: relative;*/
    }

    header {
        background-color: rgb(162, 220, 243);
        height: 150px;
        position: relative;
    }

    header img {
        border: #369;
        width: 100px;
        height: 100px;
    }

    /*header nav a{
            background-color: darkblue;
            color: #fff;
            font-size: 18px;
            letter-spacing: 1px;
            padding: 10px 20px;
            display: block;
            float: left;
            text-decoration: none;
            border-radius: 8px 8px 0 0;
            border: 1px solid red;
            margin: 0 3px;
            margin-top: 20px; 
        }*/
   
    header .dropdown:hover{
        padding-bottom: 30px;
    }

    body>nav {
        background-color: #369;
        color: #fff;
        height: 60px;
        position: sticky;
        top: 0;
    }

    main {
        background-color: #e1b8f3;
        min-height: 200px;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }

    main aside {
        background-color: #ffd6d6;
        float: right;
        width: 20%;
        padding: 20px;
        margin-left: 555px;
    }

    .content {
        background-color: #f8fc9e;
        width: 70%;
        padding: 20px;
        margin: 4%;
    }

    .content img {
        display: block;
        margin-bottom: 20px;
    }

    .content h1 {
        font-size: 2em;
        margin: 0 0 20px;
        margin-top: 20px;
    }

    .content figure {
        letter-spacing: 1px;
        line-height: 1.5;
        text-align: justify;
        margin-top: 3px;
    }

    .gomore {
        background-color: #3498db;
        color: white;
        padding: 10px;
        border: none;
    }

    footer {
        background-color: #d5f3b8;
        text-align: center;
        padding: 1em;
    }

    img {
        width: 30%;
        height: 300px;
        margin-top: auto;
        margin-bottom: auto;
        float: left;
        margin: 20px;
    }

     /* 按鈕樣式 */
     .dropbtn {
        background-color: #3498db;
        color: white;
        padding: 10px;
        border: none;
    }

    /* 下拉菜單容器 */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    /* 下拉菜單內容(隱藏起來) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    /* 下拉菜單內容中的選項 */
    .dropdown-content a {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* 滑鼠懸停時,顯示下拉菜單內容 */
    .dropdown:hover .dropdown-content {
        display: block;
    }

</style>
<main>
    <div class="content">
        <img src="./images/01.jpg" alt="./images/01.jpg">
        <h1>BAS建築自動化系統</h1>
        <figure>介紹內容 Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Velit ut fugiat neque. Dolorum voluptatum eum voluptas facere doloribus aliquam, illum officia
            aspernatur, ipsam, sit ducimus molestiae sunt dignissimos.
            Necessitatibus, nihil.
        </figure>
        <aside><a href=""><span class="btn">ITsESG</span><span>手冊下載</span></a></aside>
    </div>
</main>

<footer>
    <p>Copyright © 2023 ITsESG</p>
</footer>
天黑 iT邦研究生 5 級 ‧ 2023-09-11 13:20:19 檢舉
可以用套件的話 bootstrap範例如下 https://getbootstrap.com/docs/5.3/components/dropdowns/
討用好,我要怎麼把它移到按鈕裡面
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
janlin002
iT邦好手 1 級 ‧ 2023-09-11 12:41:35
最佳解答

你貼出來的程式碼跟圖片完全沒關聯

如果想要實現下拉式選單,請使用 <select>

https://www.w3schools.com/tags/tag_select.asp

或是可以考慮 dropdown

https://www.w3schools.com/css/css_dropdowns.asp

我要發表回答

立即登入回答