抽獎是一種常見的活動,而在互聯網上,可以通過 HTML 與 CSS 搭配編寫實現一個簡單的抽獎程序。下面我們來看一段抽獎 CSS 源碼示例:
/* 抽獎按鈕樣式 */ .button { background-color: #4CAF50; /* 背景顏色 */ border: none; /* 去除邊框 */ color: white; /* 文字顏色 */ padding: 15px 32px; /* 內邊距 */ text-align: center; /* 文字居中 */ text-decoration: none; /* 去除下劃線 */ display: inline-block; /* 行內塊元素 */ font-size: 16px; /* 字號 */ margin: 4px 2px; /* 外邊距 */ cursor: pointer; /* 鼠標指針樣式 */ } /* 抽獎外框 */ .container { display: flex; /* 布局方式 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 高度占滿整個視窗 */ } /* 抽獎結果框 */ .result { width: 300px; /* 寬度 */ height: 300px; /* 高度 */ border: 5px solid #ccc; /* 邊框樣式 */ border-radius: 50%; /* 邊框圓角 */ position: relative; /* 絕對定位 */ } /* 抽獎結果文字 */ .result p { font-size: 32px; /* 字號 */ font-weight: bold; /* 粗體 */ text-align: center; /* 文字居中 */ position: absolute; /* 絕對定位 */ top: 50%; /* 上邊距為 50% */ left: 50%; /* 左邊距為 50% */ transform: translate(-50%, -50%); /* 水平和垂直居中 */ margin: 0; /* 去除內邊距 */ }
以上就是一個簡單的 HTML 與 CSS 抽獎程序源碼示例。它可以通過點擊“抽獎”按鈕,向用戶隨機展示一個抽獎結果框,框內會顯示一段抽獎結果文字。這個程序使用了 CSS 的一些基本樣式,如邊框、圓角、絕對定位等,同時還通過使用 flex 布局實現了整個抽獎頁面的居中對齊。
上一篇html怎樣鏈接css
下一篇css字體稍微粗一點