HTML & CSS 入門

1. 學前端要「學以致用」

• CRM學習法
  1. Copy - 抄
  2. Run - 運行
  3. Modify - 修改

2. 你的第一個頁面

2.1 如何使的vscode自動保存並格式化

1. setting中搜索format
   
2. 然後搜索auto save
   

2.2 id是可以中文

2.3 div畫圓

			border: 1px solid red;
			width: 400px;
			height: 400px;
			border-radius: 200px;

2.4 div+div

div+div然後再按tab可以生產兩個div

2.5 如何分別對div控制

		#八卦>div:first-child {
		     border: 1px solid green;
		 }
		
		 #八卦>div:nth-child(2) {
		     border: 1px solid blue;
		 }

問題:CSS盒模型

爲什麼這裏寬度都是50%, 然後這裏還是有重合部分?

2.6 box-sizing: border-box

居中問題

下圖部分不能用left:25%, 而是要用left:50% 和 margin-left:-100px實現.
因爲此處紅框寬度剛好是#八卦的一半.

2.7 overflow:hidden

2.8 position:absolute

absolute浮起來

2.9 bottom和top

bottom從底部開始
top從頂部開始

3. 使用CSS3加動畫

3.1 animation

/* 動畫x的定義 */
		@keyframes x {
		    from {
		        transform: rotate(0deg)
		    }
		
		    to {
		        transform: rotate(360deg)
		    }
		}
		
		#八卦 {
		    position: relative;
		    width: 400px;
		    height: 400px;
		    border-radius: 200px;
		    overflow: hidden;
		    /* 添加動畫x 時長10秒 無限循環播放 線性播放 */
		    animation: x 10s infinite linear;
		}

3.2 水平垂直居中

        #八卦-wrapper {
            /* viewpoint height */
            height: 100vh;

            /* 水平垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;

            /* 豎向排列 */
            flex-direction: column;
        }

3.3 1em

3.4 box-shadow

box-shadow在線生成器

			/* 美化樣式 */
            box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.75);

4. 你的第一個手機頁面

使用媒體查詢讓絕對單位的都除以一半

        @media (max-width:500px) {
            #八卦 {
                width: 200px;
                height: 200px;
            }
        }

5. 部署:讓全世界看到你的網頁

github創建項目後進入項目setting

然後選擇master branch

最後編輯description和manage topics

6. 總結

• 不要用Chrome直接預覽HTML
  1. 會有很多的bug
  2. 推薦使用http-server/parcel等工具
• 有問題,搜MDN
  1. HTML標籤怎麼用
  2. CSS屬性怎麼用

7.1 第二次模糊點

2.6

2.7

3

4