iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

30天淺嘗主流前端設計系列 第 6

DAY6 開始製作腦海中的網頁!

  • 分享至 

  • xImage
  •  

DAY6 開始製作腦海中的網頁!

今天開始的課程會注重在利用HTML就能完成的網頁內容,會占用大概2-3篇的篇幅~~~~
我們來為我們的網站主畫面添加一個帥氣的logo,商品照片以及一些商品介紹~~~
首先我們要先來學習如何為自己的網站添加圖片,現代的年輕人是越來越沒有閱讀文字的耐心
,所以用圖片來修飾網站內容是個很重要的重點!!
利用我們前一篇教的img標籤的用法如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20220919/20151970nSWstpZ7zf.png
而有個小秘密是兩張圖片的程式碼中間的短短兩個字母:br,這個是換行標籤,不需要結尾標籤,
十分的方便,如果沒有放這個換行標籤的話,兩張圖片會以並排的方式呈現在網頁上喔!

再來我們利用也是之前教的p標籤,為這件商品添加一段介紹,目的是為消費者提供更詳細的商品資訊,
能夠提升消費者對商品的購買意願以及使消費者了解符不符合他的需求!
而今天的成果就長這樣啦

https://ithelp.ithome.com.tw/upload/images/20220919/20151970tNlAgVZXDr.png
雖然現在看起來醜陋到不行,但等到教學到css語法後,重新排列一下內容位置與美化版面,就能夠越
來越完美了喔,當然logo部分我也要好好改一下哈哈哈~
今天的課程就到這邊結束
期待下一篇:繼續豐富HTML能完成的網頁內容!


上一篇
DAY5 介紹各種文本標籤
下一篇
DAY7 html中的表單元素!
系列文
30天淺嘗主流前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言