網頁設計基礎，學習筆記

網頁設計筆記(4)-插入圖片與表格

插入圖片方法

代碼撰寫方式：

/*可選擇相對路徑*/
<img src="images/nicubunu_Toy_rocket.svg" style="width = 1600px">
/*也可用網址的絕對路徑*/
<img 
src="https://www.google.com.tw/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" style="width = 600px">

也可以使用Image Maps把圖片當作超連結

詳細用法看教學網站：

https://www.w3schools.com/html/html_images_imagemap.asp

在Head的位置可以修改網頁的icon logo

<head>
	<meta charset="utf-8">
	<link rel="shortcut Icon" type="image/x-icon" href="images\ico\iconfinder_car_1055099.ico">

</head>

背景的用法則是要透過style 設定body

body
      {
        font-size: 20px;
        /* 可在分號的左側，再安排「 no-repeat」的語法*/
        background: url(images/wallpapersden.com_space-galaxy_3840x2160.jpg);
        /* 可將其值，設置為 cover、contain 或是直接給予寬度與高度 (例如： 500px 500px) */
        background-size: cover;
      }

插入表格基本語法：

<table>
      <tr>  <!--這是標題列-->
        <th>公司</th> <!--表標題-->
        <th>負責人</th>
        <th>國家</th>
        <!--要幾欄就新增幾行-->
      </tr>

      <tr> <!--第一列-->
        <td>台積電</td> <!--表格內容-->
        <td>曉明</td>
        <td>台灣</td>
      </tr>
      
      <tr>
        <td>聯電</td>
        <td>小華</td>
        <td>台灣</td>
      </tr>
</table>

效果如下

公司 負責人 國家
台積電 曉明 台灣
聯電 小華 台灣

css 表格樣式

table
      {
        width:60%;
        margin:auto;
        text-align: center;
        color: gold;
        border-collapse: collapse;
      }

      td,th
      {
        border: 1px solid blue;
      }

/* html從0開始算，所以要奇數列是02468，偶數列是13579*/
      tr:nth-child(odd)
      {
        background-color: gray;
      }

/*滑鼠指到改變格式*/
			tr:hover
			{
				font-size: 30px;
        background-color: yellow;
			}

後面也會筆記bootstrap的表格快速套用方法，

不用自己辛苦設計就可以有漂亮的表格。

https://getbootstrap.com/docs/5.0/content/tables/

發表留言