記事本樣式設計

CSS強大的功能,可以讓你實作出任何想要的外觀樣式,以下的記事本樣式即是一例。


你可以透過很多方式實作此種類型的樣式,這個案例由於要讓使用者可以輸入文字,其中採用了 li 標籤進行內行的實作,同時設定了contenteditable屬性,如此一來此記事本內容即可編輯。

記事本的外觀則配置陰影以呈現立體效果,並設定圓角樣式。

        ul {
         
            list-style: none;
            background-color: lightyellow;
            box-shadow: 4px 4px 4px lightgray;
            width: 600px;
            border-radius: 1%;
            border: 1px solid black;
            height: 600px;
            padding: 40px 40px 4px 80px;
        }
        li {
            border-bottom: 1px dotted gray;
            font-size: 18px;
        }


沒有留言: