1. <tr id="nihkk"></tr>

        <mark id="nihkk"></mark><noscript id="nihkk"><code id="nihkk"><option id="nihkk"></option></code></noscript>

        <ruby id="nihkk"><option id="nihkk"></option></ruby>

      1. 企業形象網站建設解決方案   |   集團公司網站建設解決方案   |    協會門戶網站建設解決方案
        您所在位置:首頁 > 建站知識

        網站設計

        Website development

        添加材料設計到你的網站與分類

        發布時間:2017-02-28 12:12:07

        TAGS:網站設計

        Adding Material Design To Your Website With Divive9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        材料設計是由谷歌2014在努力結合觸覺元素(基于觸覺)與真實世界的技術可能性和超越。它利用用戶熟悉的東西像紙和墨水,增加了科學的現實運動和陰影。它甚至延伸至現實世界的局限性和科學技術足以彎曲但不違反物理規律。結果是一個既熟悉又神奇的同時設計。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        材料設計的一些共同的元素包括有意義的轉換使用(或運動),光與影,使用網格布局,大膽的顏色。它很容易令人驚訝的是,這些元素可以提高整體的設計和你的網站的用戶體驗。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        今天,我將向你展示如何實現幾個元素材料設計你的網站使用迪維生成器和一個小的CSS。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        那我們就開始吧ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        實施與分材料設計ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        在今天的設計,我使用白色背景上的大膽的顏色和圖片來吸引用戶。我還增加了陰影和運動時,在一定的元素來進一步吸引用戶。我添加一個按鈕,位于圖像和內容之間的界線因為兩者的行動呼吁有關。后,我添加了一點運動的按鈕圖標,有目的性的“點”,他們在正確的方向。所有這些元素都與材料的設計和易于實現的一致性。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        使用的設計元素是圖像從unsplash.com。標題圖像有一個1288px寬度和高度737px。四盒的圖像800px寬度450px高度。其余的設計是通過把Builder自定義CSS。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        設計標題ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        使用默認的標準節在迪維生成器所示,插入全角的柱。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        對部分模塊設置,點擊。在一般的設置,插入您的背景圖像。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        然后點擊排模塊設置給它一個自定義填充:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        頂:150pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        底線:,ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        先進的設計環境下,添加一個自定義的底緣- 100px。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        保存并退出ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        由于這部分只作為一個背景,你不需要添加任何模塊。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        現在添加另一個標準節使用迪維Builder和給它一個全型柱。然后點擊模塊設置。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        改變一般設置如下:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        使用自定義寬度:是的ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        自定義寬度:700pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        自定義填充:頂部和底部50px 50pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        先進的設計環境下給排自定義利率如下:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        上圖:- 144pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        底線:0pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        背景顏色:# ffffffve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        自定義CSS選項卡,添加下面的CSS的主要元素的文本框:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        <trans data-src="box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23), 0 6px 20px rgba(0, 0, 0, 0.16);" data-dst="盒子的影子:0 6px 20px RGBA(0,0,0,0.23),0 6px 20px RGBA(0,0,0,0.16);">盒子的影子:0 6px 20px RGBA(0,0,0,0.23),0 6px 20px RGBA(0,0,0,0.16);</trans>ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        保存并退出ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        一行添加一個文本模塊。在一般的設置,里面的內容框中添加你的內容。一定要把你的頭在一個H1標簽。這就是我加入(請選擇文本標簽進入HTML):ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        <h1 style="text-transform: captialize;">Material Design</h1>Aenean consectetur ipsum ante, vel egestas enim tincidunt quis.ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        先進的設計環境下,把下面的:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        標題字體:球(B)ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        標題字體大?。?0px;ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        標題文本顏色:# e91e63ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        頭字母間距:2pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        現在你的頭了ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        設計的欄目和內容的盒子ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        一頭是到位的,現在是時候添加你的欄目和內容框。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        首先添加一個標準節有一半,一半列布局ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        編輯本段設置。在一般的設置,更改自定義填充選項如下:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        頂:0pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        右:20pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        左:20pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        現在點擊模塊設置。先進的設計環境下,找到平衡柱高度的選擇和切換到“是”。它將為20px底部填充你的每列間距也是一個好主意。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        去自定義CSS選項卡,把這行模塊自定義CSS類稱為“物質”。這將是我們的標識為我們所有的自定義CSS元素將添加以后。這是重要的,設計元素不應用場地寬闊,但只有在你把“材料”類。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        保存并退出ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        現在你可以開始添加模塊到你的行。我想包括3個模塊堆疊在彼此的頂部:圖像模塊,按鍵模塊,和一個文本模塊。首先添加一個圖片模塊的行左半柱。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        在圖像模塊設置,在一般設置,修改/添加以下:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        上傳/輸入圖像ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        刪除下面的空間形象:是的ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        動畫:桶;ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        圖像對齊:中心ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        保存并退出ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        圖像模塊下,添加一個按鈕模塊。改變按鈕模塊設置在一般設置如下:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        網址:[輸入]按鈕(我現在把#)ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        網址:在新標簽頁打開ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        按鈕文字:更多ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        按鈕對齊:中心ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        先進的設計環境下,把下面的:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        使用自定義樣式按鈕:是的ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        按鈕文字大?。?4pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        按鈕文字顏色:# ffffff;ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        按鈕背景顏色:# e91e63ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        按鈕的邊框寬度:0ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        按鈕邊界半徑:0ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        添加按鈕圖標:是的ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        按鈕圖標:在雪佛龍下圖標(請選擇一個向下的箭頭圖標)ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        后,按鍵模塊下添加文本模塊。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        去文本模塊設置。在一般的設置,更改文字方向的中心和內容部分輸入你的內容。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        先進的設計環境下,給你一些自定義文本模塊填充如下:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        頂:10pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        看吧:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        自底向上看:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        左:10pxve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        保存并退出ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        接下來,你要復制圖像,按鈕,文本模塊你剛剛創建并將其拖到一半行右列。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        復制你的模塊,先通過選擇復制復制行圖標兩列行。ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        現在你的布局應該是這樣的:ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        ve9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

        原創不易,未經授權,嚴禁轉載

        原文地址:http://www.brt-nft.com/i,72,7143,0.html

        客戶評價

        更多+
        • 感謝云智互聯,系統提前完成,在整個項目周期內,云智互聯對待我們并不像是對待客戶,更像是朋友一樣,每一次,都能以專業的角度向我們提出更合理、更有效的解決方案,并快速、細致地完成我們的每一個需求,再次感謝以至誠之心做事的云智互聯團隊。

          潘濤

        • 我是東方龍馬集團,在云智家做了2個企業官網,服務態度超級好。如果想做網站,選擇他家一定不后悔。性價比高,服務態度好。值得你的信賴!

          譚嬌

        • 技術好,設計精良,操作便利,很專業!配套的服務和后續的服務都很好,網站封面堪稱精品,運行方便,后臺操作的簡單。技術還會耐心教我,很好的云智互聯(北京)科技有限公司,建站很不錯的。

          陳曦

        • 不錯,價格比較合適,重點是響應速度蠻快,有什么問題都會馬上給你解決,公司很滿意,因為他們都是針對每個項目建了相應的討論組,有問題可以再里面提出,人員分工到位,解決問題很及時。

          張經理

        聯系方式

        工作時間:09:30-18:30
        咨詢電話:010-64758810
        客服郵箱:net@cnlink.cc

        合作伙伴

        All Rights Reserved.©2010-2016 YZLINK.CN 京公網安備 110105019435 京ICP備14020656號
        本網站設計已受版權保護,任何公司及個人不得復制,違者將依法追究責任,特此聲明。法律顧問:北京市輝瑞律師事務所。

        嘿,我們微信溝通!

        復制手機號
        天堂在线最新版www_天堂在线最新版www官网_天堂网在线最新版www中文网