iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0
自我挑戰組

小小前端轉職去系列 第 8

Html css 介紹篇 -Brackets

上週的結果生成應該外星人的身體會長這樣
https://ithelp.ithome.com.tw/upload/images/20181008/200983458wmCqfWogH.png
跟原本的樣子大概差在排版
https://ithelp.ithome.com.tw/upload/images/20181008/20098345mKKARfhTJR.png

所以css該上菜了
有三種寫法

第一種是腦袋(head)引用外部樣式 用link方式表達
第二種是腦袋裡的記憶 稱之內部樣式 會用style標籤寫在腦袋裡
第三種刻在肢體上 稱之為行內樣式 會寫在相對應位置上 當做反射動作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css"> <!--第一種 -->
    <title>iT邦幫眾</title>
    
  <!--第二種 -->
<style type="text/css">
#signin{
    background:yellow;
}
</style>
 <!--第二種结束-->
</head>

<body>


    <div id="container">
        <div id="topbar">
            <div id="bbclogo">
                <img src="images/bbclogo.png" alt="">
            </div>
            <div id="signin">
                <p><img src="images/signin.png" alt="">Sign in</p>
            </div>
            <div id="topmenu" style="color: green"><!--第三種 -->
                <ul>
                    <li>新聞</li>
                    <li>全球</li>
                    <li>運動</li>
                    <li>天氣</li>
                    <li>旅遊</li>
                </ul>
            </div>
            <div id="more">
                <p> 更多<img src="images/popdownmenu.png" alt=""></p>
            </div>
            <div id="Search">
                <input type="text" placeholder="Search">
            </div>
        </div>
    </div>

</body>
</html>

我在第一種的外掛清單表 style.css 裡寫入了 我要對id為bbclogo的盒子背景填入紅色

#bbclogo{
    background:red ;
}

當html讀到link這行時,會根據相對位置去找 style.css 並且回饋內容顯示

在第二種樣式表中,當外星人想到自己腦袋裡的形式,會直接顯示
style標籤將其包起來

<style type="text/css">
#signin{
    background:yellow;
}
</style>

我要對id為signin的盒子背景填入黃色
最後直接對盒子命令

 <div id="topmenu" style="color: green"><!--第三種 -->
    </div>

topmenu的盒子文字填入綠色,很明顯color(文字)跟background(背景)屬性不同

這三個屬性可以完成下面的畫面
https://ithelp.ithome.com.tw/upload/images/20181008/20098345mQBPfRfRoW.png

根據各種屬性,可能有調座標位置,調圖片顯示大小等等, 基本的網頁就可以這樣完成。


上一篇
Html Body-2 (快捷輸入) 實作篇 -Bracket
下一篇
Html css-2 實作篇 -Brackets
系列文
小小前端轉職去11

尚未有邦友留言

立即登入留言