在前端開發中,用CSS做一個京東靜態頁面是非常常見的任務。下面我們就來講講怎樣使用CSS實現這個任務。
/* 一些基本設置 */ body{ margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 14px; } /* 頂部導航欄 */ #header{ background-color: #d70b1c; height: 40px; color: #fff; text-align: center; line-height: 40px; } /* 搜索框 */ #search{ background-color: #f5f5f5; height: 50px; padding-left: 20px; } #search input[type="text"]{ height: 30px; border: none; outline: none; } #search button{ height: 32px; background-color: #fff; border: none; } /* 下方精選商品 */ .product-container{ margin: 50px 0; } .product-item{ width: 200px; float: left; margin-right: 20px; } .product-item img{ width: 100%; } .product-item h3{ font-size: 16px; margin: 10px 0; } .product-item p{ font-size: 14px; margin-bottom: 10px; } .product-item button{ border: none; background-color: #d70b1c; color: #fff; padding: 5px 10px; cursor: pointer; } .product-item button:hover{ background-color: #a40817; } /* 底部 */ #footer{ background-color: #e0e0e0; height: 150px; color: #666; text-align: center; line-height: 150px; }
通過上述代碼,我們可以很好地實現一個簡單的京東靜態頁面。其中,我們使用了CSS來控制網頁的各個元素的樣式,例如頂部導航欄、搜索框、下方精選商品等。同時,為了讓網頁更加美觀,我們也使用了一些特殊的樣式,例如鼠標移上去后按鈕顏色的變化等。