創作內容

4 GP

【快速貼圖】教學-樣式設定技巧

作者:深海異音│2017-02-01 04:23:42│贊助:8│人氣:330


HTML 簡單來說就是給瀏覽器看的網頁原始碼,是一種【標籤語言】,就算是沒有學過程式語言的人也能輕易上手。

影片示範



直接用【Ckeditor編輯器】的圖形界面編輯完後,切換到html頁面複製原始碼,然後貼到【樣式設定】裡面進行編輯。



在【樣式設定】裡面的這4種指令會被取代成對應的東西

{i} = 圖片的編號
{url} = 圖片的網址

{i-1}、{i-2}…{i-9} = 分群的圖片編號
{url-1}、{url -2}…{url -9} = 分群的圖片網址





下面是我整理了一般論壇支援的html語法,算記不住沒有關係,至少要有基本的認識。
被【<!--     -->】包起來的就是給人看的注釋,不屬於程式碼

圖片語法
<!--一般圖片語法-->
<img src="https://i.imgur.com/tDphr7G.jpg">

<!--等比例縮放,把圖片縮放到寬度=300-->
<img src="https://i.imgur.com/tDphr7G.jpg" width="300">

<!--強制固定圖片寬度=300、高度=200-->
<img src="https://i.imgur.com/tDphr7G.jpg" width="300" height="200">


換行語法
<!--水平線-->
<hr>

<!--跳行(網頁會無視 Enter,所以必須使用這個來換行)-->
<br>

<!--空白段落(其實用途跟 <br> 差不多)-->
<p></p>


超連結 語法
<!--一般文字超連結-->
<a href="https://www.google.com">我是超連結</a>

<!--圖片超連結-->
<a href="https://www.google.com">
    <img src="https://i.imgur.com/tDphr7G.jpg">
</a>


文字樣式 語法
<!--文字【大小】 30 -->
<span style="font-size:30px;">文字文字文字</span>

<!--文字【顏色】 紅色 -->
<span style="color:#FF0000;">文字文字文字</span>

<!--文字【背景顏色】 綠色 -->
<span style="background-color:#0000FF;">文字文字文字</span>

<!--文字【字體】 微軟正黑體 -->
<span style="font-family:微軟正黑體;">文字文字文字</span>

    

表格 語法
<!--
table = 表格
tr = 表格的列(必須放在 table 裡面)
td = 表格的儲存格(必須放在 tr 裡面)
-->

<!-- 1列 2欄 ,框線寬度 1 (border   = 邊框寬度)-->
<table border="1">
    <tr>
        <td>第一列 第一欄</td>
        <td>第一列 第二欄</td>
    </tr>
</table>

<!-- 2列 3欄,無框線,寬度=500 -->
<table width="500">
    <tr>
        <td width="100">第一列 第一欄</td>
        <td width="100">第一列 第二欄</td>
        <td width="300">第一列 第三欄</td>
    </tr>
    <tr>
        <td>第二列 第一欄</td>
        <td>第二列 第二欄</td>
        <td>第二列 第三欄</td>
    </tr>
</table>





補充

想要深入html的人可以參考這個網站: W3School(英文) W3School(中文)
快速貼圖 載點: 【快速貼圖】下載

引用網址:https://home.gamer.com.tw/TrackBack.php?sn=3465367
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 0 篇留言

我要留言提醒:您尚未登入,請先登入再留言

4喜歡★hbl917070 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:【快速貼圖 3.0.1 ... 後一篇:【快速貼圖】教學-匯入圖...

追蹤私訊

作品資料夾

Konserven你各位阿
我踢了隻吉娃娃,現在正在喝新鮮的珍奶看更多我要大聲說昨天12:03


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】