Go視頻是一款非常流行的在線視頻平臺,其界面設計也十分優秀。其中,CSS起到了非常重要的作用。下面我們就來看一下,如何通過CSS仿制Go視頻的樣式。
/* 設置整個頁面的背景色 */ body { background-color: #f7f7f7; } /* 設置頂部導航欄的樣式 */ .header-nav { height: 94px; background-color: #fff; box-shadow: 0 2px 2px 0 rgba(0,0,0,.08); } /* 設置搜索框的樣式 */ .search-box { width: 692px; height: 34px; border: none; border-radius: 17px; padding: 0 20px; background-color: #f5f5f5; } /* 設置主要內容區的樣式 */ .main-content { margin: 20px 0; background-color: #fff; border-radius: 4px; box-shadow: 0 4px 4px 0 rgba(0,0,0,.08); } /* 設置每個視頻塊的樣式 */ .video-block { width: 320px; height: 235px; margin: 30px 20px 0 0; background-color: #fff; border-radius: 4px; box-shadow: 0 4px 4px 0 rgba(0,0,0,.08); }
以上是Go視頻的一些主要樣式。當然,還有很多細節處的樣式需要我們進行調整和完善。但只要掌握了基本的CSS知識,仿制一個優秀的網站樣式并不會很難。
上一篇mysql的備份在哪里找
下一篇mysql的增刪改查語句