CSS是一種網頁樣式設計語言,可以制作出各種各樣的網頁效果。今天,我們來用CSS制作一張美味蛋糕的網頁模板。
首先,我們需要準備一些圖片和文字。比如,一張蛋糕的圖片,一個標題“美味蛋糕”,一些介紹文字和價格等信息。
<div class="cake"> <img src="cake.jpg" alt="美味蛋糕"> <h1>美味蛋糕</h1> <p>這是一款經典的蛋糕,口感細膩,味道濃郁,是您和家人朋友一起共享的甜蜜時光。</p> <p>價格:¥38.00</p> </div>
接下來,我們將使用CSS來美化這個網頁。首先,我們需要設置整個頁面的背景顏色和字體樣式。
body { background-color: #f8f8f8; font-family: Arial, sans-serif; }
接著,我們可以設置標題、文字和圖片的樣式。比如,我們可以設置標題的顏色和字號,圖片的邊框和間距等。
h1 { color: #fa8072; font-size: 36px; } p { font-size: 18px; line-height: 1.5; } img { border: 10px solid #fff; margin-bottom: 20px; }
最后,我們還可以添加一些特效,比如鼠標懸停在圖片上時顯示一個半透明的遮罩層。
img:hover { opacity: 0.8; } img:hover::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
現在,我們的蛋糕網頁模板就完成了。通過CSS的各種樣式設置和特效添加,我們制作出了一張精美的蛋糕網頁,讓用戶看了口水直流,感覺就像親臨蛋糕店一樣。
上一篇css模板 jsp
下一篇css模擬蘋果經典界面