iT邦幫忙

2025 iThome 鐵人賽

DAY 15
0
Modern Web

從0到有做出一個商家網頁系列 第 15

Day15:區隔商品圖片與商品介紹的線條

  • 分享至 

  • xImage
  •  

今天要做區隔商品圖片與商品介紹的線條

很多商家的網頁上會在商品圖片與商品介紹的中間用線條來做區隔,今天就是要製作中間的線條

首先打上這段程式

HTML程式
https://ithelp.ithome.com.tw/upload/images/20250817/20176052uDBsql6IDz.png

class這個語法是用來新增新的類別,方便辨別程式的樣式

然後再用css程式來編輯線條的顏色和長度

CSS程式
https://ithelp.ithome.com.tw/upload/images/20250817/20176052zgFkgML3mp.png

網頁方面
https://ithelp.ithome.com.tw/upload/images/20250817/20176052yjFpLbRCCR.png

心得:
今天是參賽第15天,終於熬過了一半的賽程,距離完賽的日子越來越近了,現在回頭看到之前更新的文章,不時覺得很佩服自己,心中也覺得很有成就感,能夠每天更新一篇文章,在以前是辦不到的,有多虧的這個比賽讓我在生活中有事情可以做以此來充實自己。


上一篇
Day14:繼續編輯分頁的內容
下一篇
Day16:複習學過的HTML語法
系列文
從0到有做出一個商家網頁30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言