iT邦幫忙

2019 iT 邦幫忙鐵人賽

0
自我挑戰組

程式設計師大冒險系列 第 44

[44/150][Week02]再次嘗試切版,成功完成三欄式網頁

Bug是個神奇東西,同樣的人同樣的邏輯,當下做就是失敗。但是隔幾天去做,又莫名其妙成功了。這次將Css打掉重新來過,並整合內文一內文二區塊。

一、【大綱】

  • 網頁切版
    • 二次再試
    • 程式碼
    • 輸出結果
  • 檢討與修正
  • 心得

二、【網頁切版】

第一次切版覺得有哪邊空空的,但是又說不出所以然。
直到做網頁才發現問題在哪,沒有長寬及色票。
很好奇實務上,設計師也是給一張圖嗎?

1.【二次再試】

這次看How to Create Website Layouts Using CSS Grid 影片實作。
成功完成三欄式表格,並且把第一段和第二段區塊合成。
不知道為何Notepad++沒有提示語法,所以需要自己手打完整語法。

2.【程式碼】

Html則是跟昨天差不多,不貼上來。
Css這次打掉重寫過。

.pglink {
	display:grid;
	grid-template-columns: 200px 200px 200px 1fr 1fr 1fr;
	background-color:black;
	height:40px;
	padding:10px;
	color:white;
	background-color:#666666;
	font-size:30px;
	font-family:微軟正黑體;
}
.otli {
	color:#A9A9A9;
	font-family:sans-serif;
}

.par1{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	padding:10px 60px ;
	font-family:sans-serif;
	height:300px;
}
.word{
	grid-column-start: 1;
	grid-column-end:span 3;
	font-size:40px;
	
}
.word button{
	padding:5px;
	color:white;
	background-color:#00BFFF;	 
	size:40px;
}
.coloum button{
	color:white;
	background-color:#A9A9A9;
}
.foot{
	
	height:60;
	padding:60px;
	color:#A9A9A9;
}

3.【輸出結果】

製作時間:2 hr
https://ithelp.ithome.com.tw/upload/images/20181113/200919107j8o4ll4Ti.jpg
原版
https://ithelp.ithome.com.tw/upload/images/20181113/20091910WNSsDw1xPO.png

三、【檢討與修正】

做中學好處是能夠立刻有東西展現,但是基礎不夠紮實。
這週起先學一小時語法,再來寫作業。

四、【心得】

透過這次Css做表格,讓我了解跟Html做表格差別。
使用Css做表格,不但方便而且修改容易。

比方說改顏色,只要設定同樣class。
一次可以設定大量,時間複雜度為(O)1。
用Html則是要手動修改,則是(O)n。

感謝撥冗閱讀,我會繼續努力。


上一篇
[43/150][Week02]第七週學習總結(朝網頁前端前進)
下一篇
[45/150]從CSS基礎重新學習來過
系列文
程式設計師大冒險115

1 則留言

0
w4560000
iT邦新手 5 級 ‧ 2018-11-16 09:12:49

加油加油~!

感謝你的支持。

我要留言

立即登入留言