1、如何設計網頁具有科技感
按鈕,背景,動畫做的有科技感些,找靈感看游戲,你需要大型未來主題的游戲UI
2、設計感比較強的網站有哪些,國內那些商業網站就算了!
有很多,可以到網頁設計聯盟里去看看國內酷站,我的網站也在裡面。
3、怎麼提高網站的設計感
一、 色調
到這幾乎差不多已經完成調整了,但如果你夠細心的話會發現按鈕以及導航菜單的顏色還是 Bootstrap 默認的藍色系。在有著設計師存在網站,設計師都會負責進行網站色調的調整,為了保證網站的一致性,所有按鈕和導航一般是三到四種顏色。
在這里,雖然不可能像大公司網站那樣取色嚴謹,但還是有一些快速的方法使網站看起來很搭配的。
使用 GIMP 的取色器讀取背景圖片的主題顏色,確認其 GBR 十六進制值;
使用 Color Scheme Designer 確認與差異大但同時又互補的顏色;
最後根據確定的顏色來制定按鈕,可以用[Bootstrap Buttons][]等在線直接生成。
這樣首頁上那個大大的注冊按鈕就搞定了,接下來是修改導航菜單的顏色,這個比較簡單,寫入代碼 .nav-pills > .active > a, .nav-pills > .active > a:hover {background-color: #FF9473;} 即可。
二、 字體
修改網頁字體是讓網站看起來更有特色、有現代感的捷徑,我們可以去谷歌的字體服務(免費正版)中隨意挑選自己喜歡的字體,但是要注意字體間的搭配,在這里我們選擇由 DesignShack 推薦的谷歌字體搭配中的一種:Cardo(用於標題) 和 Nobile(用於主體內文)。
在網頁頭部中加入此代碼:
在 CSS 樣式表 custom.css 中加入以下代碼:h1, h2, h3, h4, h5, h6 {font-family: 'Corben', Georgia, Times, serif;} p, div {font-family: 'Nobile', Helvetica, Arial, sans-serif;}
添加完後刷新即可查看效果了,現在我們的網站樣式已經變成下面這樣了,看起來比默認好多了。
此外,除了谷歌的字體服務外還可以使用像 Fontdeck 或 Typekit 字體服務,它們的字體更多,更多的字體搭配方案可以參考 Type Connection。
三、 CSS3
將上面都搞定後接下來要做的就是再加點 CSS3 特效了,如果時間不夠的話簡單的添加上盒陰影 box-shadow 和字體陰影 text-shadow 就可以讓網站增色不少,CSS 代碼如下。
h1 { text-shadow: 1px 1px 1px #ccc; } .div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc; }
如果時間足夠的話還可以添加一個放射漸變填充效果,可以讓標題的顯示效果更重一些,如下面對比圖所示。(如果想要更多 CSS 效果的話可以去學習一下 CodeSchool 的在線教程)
四、jQuery
其實到這里了話網站看起來已經很不錯了,但為了讓它更加個性化,還需要再添加上一張背景圖片。對很多程序員來說這一步是比較難以進行的,那麼應該如何選擇一張設計師可能會使用的圖片呢?答案就是去 iStockPhoto 或類似的付費圖庫中去尋找。
這里我們將使用 Winter Sun 這張照片,為了讓網站保持自適應布局,還需要使用 Backstretch 這個 jQuery 插件讓背景圖可以隨時自動調整大小。
首先需要付費下載背景圖片,然後放到 /img/ 文件目錄中去。
將此圖片設置為的背景圖(background-image): $.backstretch ("/img/winter.jpg");
加入背景圖後網頁主題部分會產生遮擋,所以可以讓其透明,這樣網站效果看起來會更加現代、有設計感。這里可以使用這個技巧將網站變得透明,代碼見右邊,.container-narrow {background: url (/img/cream_st_transparent.png) repeat 0 0;}
五、 紋理
知道如何讓一個網站看起來更加高雅優雅一些嗎?是的,紋理。就像 24WAY 的背景紋理一樣。
但是這些紋理效果應該去哪裡尋找呢?設計師 Atle Mo 的 Subtle Patterns 網站是個不錯的去處,我們接下來就使用這個網站上的 Cream Dust 紋理。點擊下載,將紋理圖片保存到本地,然後放到根目錄下的 /img/ 目錄文件夾中,最後到 CSS 樣式表中加入代碼 body { background: url (/img/cream_st.png) repeat 0 0;} 即可。
六、 圖標
這里的圖標並不是指那些透明的 PNG 圖片圖標,而是圖標字體,其載入方式和字體一樣,由 CSS 樣式控制,比起圖片圖標來說這種圖標字體載入速度更加,對資源的消耗也更低。在去年 24WAY 曾經有一篇如何在網站中使用圖標字體的文章。
對於 Bootstrap 框架來說,整合的圖標字體是 Font Awesome (Shifticons 也是一個不錯的選擇),和谷歌的字體服務一樣也是免費開源的。要使用它只需將其下載下來,然後在根目錄下創建 /fonts/ 文件夾,將其放進去。然後再將 font-awesome.css 文件放到 /css/ 目錄文件夾。
接著將引用寫入網頁頭部中,代碼為 ,這時候我們可以隨時在網站上任意地方自由使用這些圖標字體了,如要想將一個卡車圖標添加到注冊按鈕的話只需聲明一下就可以,Sign up today。同時為了防止加入圖標字體後引起按鈕拉伸變形,還需要一點點額外的工作,將按鈕寬度加大一點(.jumbotron .btn i { margin-right: 8px; })。
4、求國內優秀網頁設計欣賞 圖片多一點的 視覺感好一點的
百度:酷站抓圖
一大堆,還按顏色、行業幫你分類好了的。
5、求幾個有設計感的網站
?
6、如何讓一個網站看起來高大上?或者更有設計感
使用響應設計,才有html5語言來寫
建議參考一些高大上的網站或者頁面即可
7、請問有誰知道哪些網站的網頁好看,設計感要強一些的
這個就說不清楚的,自己看了好看就是了
8、那位行仕推薦一些藝術(設計)感強的網頁(網站),國內、國外均可。。。
可以看看這兩個酷站 裡面收錄了很多超棒的往西方 www.sj63.com 設計路上 www.yi2.net 依兒酷站