快消品貨源批發市場
快消品貨源分銷平臺
 
 
當前位置: 貨源批發網 » 網商學院 » 網店裝修 » 裝修代碼 » 店鋪裝修代碼格子模塊HTML+CSS新手教程

店鋪裝修代碼格子模塊HTML+CSS新手教程

放大字體  縮小字體 發布日期:2024-05-20 06:24:22  來源:電商聯盟  作者:樂發網  瀏覽次數:25

純格子代碼完全解碼:

想要學習更詳情的HTML+CSS語言可以百度或谷歌搜索這兩門語言的視頻教程更深入的學習了解下。通過視頻教程可以更好的拓展你的代碼知識。

下面為了方便初學的賣家學習,所以就拿一個精簡但又比較完整的750寬的純代碼格子來舉例。

完整的代碼如下:

 

background="http://img04.taobaocdn.com/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-169171891.jpg"
width="750"border="0"align="center"cellpadding="0"cellspacing="0"
bgcolor="#f1f1f1">

 

可以復制下來拿去練習或測試

把這個格子代碼最簡單化就是:






單元格 單元格


分解說明:

:這個就是整體的表格。

:這個表示一行。

:這個表示一個單元格。

(那么從這上面的例子是不是可以看出這個表格是一行兩列,也就是一排兩格的。)


分解說明:

1.【background="http://img04.taobaocdn.com/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-69171891.jpg"】這個表示背景圖,里面藍色的地址就是黑色的背景紋理圖片地址。當然你可以更換別的顏色的背景紋理。背景紋理需要上傳淘寶相冊空間,然后復制地址替換。

店鋪裝修代碼格子模塊HTML+CSS新手教程 2

2.【width="750"】這個表示表格的寬度,總寬是750寬的。你改成950那就是首頁950自定義使用,當然你這里改了,其它的圖片也要相應改大,或者間距也要適當調節。(這個的詳細教程由于篇幅請關注我們,下一期給大家講解)

3.【border="0"】這個是邊框,這個不太重要,一般默認0即可。

4.【align="center"】這個是對齊,有三個參數,分別是:左對齊:left居中對齊:center右對齊:right那么我們這個表格整體是居中對齊的。

5.【bgcolor="#f1f1f1"】這個是背景色。#f1f1f1這個是顏色值,(背景顏色值可以百度查詢或用PS或其它工具吸取查詢)那么一般改變背景色就是改這個,但是注意,這個里面有背景色是中灰色,又有背景紋理,兩個同時存在,因為背景紋理大于這個背景色,所以他會顯示背景紋理,你要讓背景色顯示就要把前面的背景紋理代碼background="http://img04.taobaocdn.com/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-169171891.jpg"一起刪掉才可以。如下圖,我去掉背景紋理后的代碼以及顯示效果:

店鋪裝修代碼格子模塊HTML+CSS新手教程  3

顯示效果如下:

店鋪裝修代碼格子模塊HTML+CSS新手教程 4

再來一個效果:我把背景色改成白色的然后還把圖片強制加了一個200的高度,其實這個圖片是正方形800*800的,強制成200的高如下:

店鋪裝修代碼格子模塊HTML+CSS新手教程 5

顯示效果如下圖:這個由于是改成白色背景了可能在手機上看不出來。

店鋪裝修代碼格子模塊HTML+CSS新手教程 6

6.補充:【background-color:#f60】這個也是背景顏色代碼。看下面的代碼我在表格后面加了一段樣式:style="background-color:#f60;"那么他的顏色值#f60是橙色值,這個樣式的層級也大于前面那個

bgcolor="#f1f1f1"所以顯示效果最終以橙色顯示。當然為了精簡代碼,你要用內聯了,那么前面的那個就可以去掉一個,沒必要兩個都用上。這個必須寫在:style=""這個代碼包括的里面。不然無效哦。如下圖代碼以及顯示效果。

店鋪裝修代碼格子模塊HTML+CSS新手教程 7

顯示效果如下:

店鋪裝修代碼格子模塊HTML+CSS新手教程 8

補充:很多的顧客朋友說要幫他做透明背景的模塊。其實就是把背景顏色和背景圖代碼都去掉就是透明的了哦。背景色代碼和背景圖代碼如下:【background="http://img04.taobaocdn.com/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-169171891.jpg"】【bgcolor="#f1f1f1"】還有【background-color:#f60】

7.【style="padding:10px10px10px10px;"】這個表示間距。分別是上間距是10px,右間距10px下間距10px左間距10px。可以試著把這三個數字改一下看效果。也可以看下我第二個格子里面是不是style="padding:10px10px10px0px;"最后一個,也就是左邊是等于0,如果第二個的最后一個左邊也是10px,加上第一個的第二個也就是右邊等于10px;那么中間就變成20px了,那么總寬就是760了,所以不可取。

當然總寬是750寬,圖片是360,那么10px+360px+10px+360px+10px=750px。大家看一下:

店鋪裝修代碼格子模塊HTML+CSS新手教程 9

顯示效果如下:

店鋪裝修代碼格子模塊HTML+CSS新手教程 10

如果您就是要這種效果,想讓中間的間距寬一些,那這時你就要把兩張的圖片各減掉5px,圖片是360-5=355px;這樣總寬也就是750px寬了。如下圖:

店鋪裝修代碼格子模塊HTML+CSS新手教程 11

顯示的效果如下:在手機上看起來可能不明顯:

店鋪裝修代碼格子模塊HTML+CSS新手教程 12

8.【

9.【height="360"】這個是圖片高度,我一般是不限制高度的,高度不限。大家最好是不要限制,如果你限制寬度和高度有的圖片不成比例就會變形。不美觀。寬度和高度寫一個就可以了。看下面的效果,我如果強制加一個不適合的高度=200看下顯示效果,是不是圖片變形不美觀了。

店鋪裝修代碼格子模塊HTML+CSS新手教程 13

顯示效果如下:

店鋪裝修代碼格子模塊HTML+CSS新手教程 14

因為我的圖片實際大小是800px*800px的正方形。如果我把寬度限制在360px,那么高度也會自動變成360px


【注意:其實這個格子的大小是360的寬,高度不限,那么你的圖片大小就可以是:寬度只要等于或大于360px,高度隨你定,放長的就是長的,短的就是短的。會自動成比例縮放的。如我放的就是800*800的正方形,你可以放其它尺寸的圖片,只要寬度不小于360,如果小于了就會強制放大到360,那么放大就會變模糊不清晰。所以只能大于,不能小于。】

淘寶店鋪裝修教程,請繼續關注甩手網店學院專題>>>

樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。

本文內容整合網站:百度百科知乎淘寶平臺規則

本文來源: 店鋪裝修代碼格子模塊HTML+CSS新手教程

分享與收藏:  網商學院搜索  告訴好友  關閉窗口  打印本文 本文關鍵字:
 
更多..資源下載
裝修代碼圖文
淘寶裝修代碼修改:修改淘寶裝修代碼步驟、裝修代碼修改教程
裝修代碼網商學院推薦
裝修代碼點擊排行
 
手機版 手機掃描訪問
主站蜘蛛池模板: 天天躁日日躁狠狠躁人妻| 男人扒开女人下面狂躁动漫版| 日韩欧美一区二区三区在线| 国产片AV片永久免费观看| 亚洲国产欧美在线人成北岛玲| 91极品在线观看| 欧美极品在线观看| 国产精品密蕾丝视频| 亚洲国产美女精品久久久久| 制服丝袜一区在线| 欧美丰满大乳大屁股流白浆| 国产精品VA无码一区二区| 亚洲人成伊人成综合网久久久| 搡女人免费免费视频观看| 欧洲亚洲综合一区二区三区| 国产欧美成人免费观看| 久久精品国产精品亚洲精品| 高清中国一级毛片免费| 无遮挡一级毛片视频| 可以直接看的毛片| loveme动漫在线观看免费| 热re久久精品国产99热| 国产高清一级毛片在线不卡| 亚洲国产精品日韩在线| 黄色香蕉视频网站| 日本三级网站在线线观看| 哒哒哒免费视频观看在线www| 一个人看的片免费高清大全| 波多野结衣视频全集| 国产精品素人福利| 久久香蕉国产线看观看亚洲片| 青柠在线观看视频hd| 成人午夜精品久久久久久久小说| 免费人成激情视频| 69堂国产成人精品视频不卡| 最好的最新中文字幕8| 国产一国产一区秋霞在线观看| 一本久久a久久精品vr综合| 永久免费AV无码网站在线观看| 国产精品一级二级三级| 久久久久亚洲av无码去区首|