Day 3 (html,CSS)

學習筆記

rouoxo 2021-05-25 20:08:18 ‧ 1054 瀏覽

分享至

1.id:不能重複,識別某個HTML文件上的元素,for對應id

        <input type="radio" id="male" name="sex">
        <label for="male">男性</label>

2.name：取得name的欄位取value值,；做為radio、checkbox的分組

3.value="aaa" => 預設value為aaa 如果輸入bbb送出的value會變成bbb


<form method="GET">

        <label for="user">姓名：</label>
        <input type="text" id="user" placeholder="阿哈哈" name="user" value="aaa"><br> 

</form>

4.若只有GET,submit後會顯示於網頁上

<form method="GET">

5.action會送到該.PHP

<form method="GET" action="XXXX.PHP">

6.目前進度

一般標籤：p span div br hr pre img a video h1-6
語意標籤：header form article footer nav section em strong figure
有結構的：ul+li ol+li dl+dt+dd table+tr+td
表單：form => lable input select+optgroup+option datalist
HTML屬性
type:
name:
id:
class:
width(table img):
height(table img):
for
value
style
src
controls
content
href
CSS屬性
width
color
text-align
background-image
vertical-align

7.把body的CSS路徑搬到個別.css時要注意圖片路徑,免得抓不到

<link rel="stylesheet" href="./10_style.css">

8.CSS裡面有繼承關係!!

但不是全部屬性都有繼承 EX:border

    <style>
        body{
            font-family: fantasy;
            border: 1px solid red;
        }
         p{
             /* font-family: fantasy; */
             /* border: 1px solid red; */
         }
        div{
            /* font-family: fantasy; */
        }
        h3{
            /* border: 1px solid red; */
        }
    </style>

範例：

        div
        {
            /* 在同一列裡面 但 有自己的區域 */
            display: inline-block;
        } 
        
        /* 用   #id  挑選，幫這 5個 div 各自設定顏色 color */
        #Bulbasaur
        {
            color: seagreen;
        }

字串1為綠色

         <div>
            <h3 class="pokemon" id="Squirtle" >字串1</h3>
        </div>

div裡面的(字串1+字串2)通通因繼承關係而變色

         <div id="Squirtle">
            <h3 class="pokemon">字串1</h3>
            <p>字串2</p>
        </div>

9.權重關係

!important > 行內 > div#id > #id > .class > <標籤>
權重一樣大,下面蓋掉上面的,因為程式由上往下跑
權重,游標指著等一下也能看到(0,0,2)
但盡量不要寫在行內,難維護

參考資料
https://ithelp.ithome.com.tw/articles/10196454

!important

        #Bulbasaur
        {
            background-color: green!important;
        }

行內

        <div class="pokemon" id="Bulbasaur" style="background-color: pink;">

div#id

        div#cat
        {
            background-color: blue;
        }

#id

        #Charmander
        {
            background-color: #EB4537;
        }

.class

        .pokemon
        {
            background-color: #EB4537;
        }

權重一樣大,會變成紅色

        #Squirtle 
        {
            background-color: blue;
        }
        #Squirtle 
        {
            background-color: red;
        }

全文


    <style>
        img {
            width: 200px;
        }
        div {
            display: inline-block;
        }
        .pokemon
        {
            background-color: #EB4537;
        }
        #Bulbasaur
        {
            background-color: green;
        }
        #Charmander
        {
            background-color: #EB4537;
        }
        #Squirtle 
        {
            background-color: #EB4537;
        }
        #Pikachu
        {
            background-color: #EB4537;
        }
        div#cat
        {
            background-color: blue;
        }
    </style>
    
<body>
<div class="pokemon" id="Bulbasaur">
    <h3>字串1</h3>
    <img src="./image/Pokemon/001.png" alt="">
</div>
<div class="pokemon" id="Charmander" >
    <h3>字串2</h3>
    <img src="./image/Pokemon/004.png" alt="">
</div>

<div class="pokemon" id="Bulbasaur" style="background-color: pink;">
    <h3>字串3</h3>
    <img src="./image/Pokemon/001.png" alt="">
</body>

10.CSS 樣式不成功

1.屬性彼此之間互相影響
collapse(不要空間),spacing(要空間) 性質衝突

        table
            {
            border: 2px solid red;
            border-collapse: collapse;
            border-spacing: 10px;
            }

2.權重
3.寫錯
4.選錯人
5.link 路徑
6.大小寫

11.如果有衝突,可能是預設

https://www.w3schools.com/tags/tag_tr.asp

        tr
        {
            border-bottom: 2px dashed blue;      //無法顯示
        }

Default CSS Settings

        tr {
          display: table-row;         //行內
          vertical-align: inherit;
          border-color: inherit;
        }

完成

        tr
        {
            border-bottom: 2px dashed blue;
            display: block;         //轉區塊
        }

12.關於類似"即時翻譯"功能的轉跳方式

可研究ajax
https://zh.wikipedia.org/wiki/AJAX

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙