前端開發學習筆記一，開發學習筆記

前端開發學習筆記一，開發學習筆記

 

剛剛花了點時間學完html和css，同時粗略的看了一點javascript。於是看了一遍教程後，就動手做了下面這個頁面。（這是原）

 

其中有些問題，比如教程中的一些圓角按鈕，是用一個三層嵌套然類似<ahref=''><strong><span>HOME</span></strong></a>後分別給每個標籤設定背景圖片來實現。

感覺有點得不償失，其實完全可以用border-radius加上一個平鋪背景來實現，即簡單代碼看起來又清爽，而且符合html的語義化。<a>HOME</a>，然後只需要在css中設定a{border-radius:5px}，就可以了。

實現圖如下：

還有一個問題，就是整個頁面的主題部分的背景，是一個圓角的有陰影製作效果的白色圖片。教程中同樣是用切三張圖加上html的三層嵌套來實現。其實這裡也可以不那麼麻煩，用一個圓角邊框加上背景白色，再設定一個陰影製作效果就可以了。

#Content{

background:#fff;

box-shadow:0 3px 5px#e4e4e4;

border-radius:25px25px 0 0;

}

如下：

 

不過上面的這些解決方案有一個問題，就是都用到了css3中的新特性，在較老的瀏覽器中可能會不認，要考慮到需求在決定。

最後放上整體做好後的頁面圖，和最上面那張比一下，感覺還是不錯的。