導航:首頁 > 萬維百科 > 網頁ui設計背景代碼

網頁ui設計背景代碼

發布時間:2020-09-17 11:52:31

1、html 怎麼讓背景圖鋪滿整個頁面

我自己試出來的,希望有用
例子,用css
<body background="images\002.png"
style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;"
>

2、如何利用UI設計一個清晰的網站結構

UI網頁設計網站建設不同,網站建設單單只是通過程序源碼實現網站功能的實現,而UI設計則是體現在視覺角度,當兩者相輔相成之時則將會成就網站建設的核心。深圳網站建設公司都會配備有專業的全職設計師,可能在設計師的需求上大都是創意,然而在我們真正做一個項目或者工程的時候則會發現「藝術家並不是需要創新,而是需要會活用技巧。」優秀的設計效果離不開技巧的運用,而技巧的運用則能夠烘托出設計之美。
新華針對UI網頁設計的實戰經驗和總結,以直觀的改善網頁視覺效果為目的來提升網站的高級感為目的,從網頁的設計層次、字體、結構、對比、透明度等諸多因素上進行對比和調整,其詳細內容可以分為以下幾點:

1、使用色彩和字重來創造層次結構,而不是單純的大小對比

在對UI 文本進行樣式控制的時候,最常見的錯誤莫過於過度依賴字體大小差異來營造對比。

單純實用字體大小對比,所營造的對比並不夠,嘗試結合色彩和字重來營造更好的對比效果。

如果可以的話,你甚至可以採用兩到三種顏色:

(1)主要內容採用深色(諸如標題,但是不要用純黑)

(2)次要內容採用灰色(比如文章發表日期)

(3)輔助性內容採用淺灰色(比如頁腳中的版權聲明)

類似的,在UI設計的時候,通常兩種不同的字重足以營造出優秀的層次感:

(1)大多數的文本採用正常的字重(400到500,具體取決於字體)

(2)對於需要強調的文字採用較重的字重(600到700,具體取決於字體)

應當盡量不要讓正文部分字重低於400,因為這一部分字體字體本身尺寸已經較小,低於400會使得可讀性不佳。如果你依然需要降低字重,那麼不妨讓字體色彩更淺一點,或者替換成其他識別度較強、字重相對較小的字體。

2、不要在有色背景上實用灰色的文本

在白色背景下,將黑色的文本改成灰色,是不錯的淡化其視覺效果的做法,但是在彩色背景下這么做,則是另外一回事。

實際上,讓白色背景下文本由黑變灰實際上是達到降低對比度的效果。

但是在彩色背景下,想要降低對比度是應該讓文本逐步接近背景色,而不是改為灰色。

想要降低和背景色之間的對比,通常有兩種方法:

(1)降低白色文本的不透明度

降低不透明度,能夠讓背景的顏色透過來一些,以一種不沖突的方式降低前景文字和背景之間的對比度。

(2)基於背景色手工挑選文本的顏色

當背景是圖像或者圖案的時候,半透明的文本會影響可讀性,這個時候最好是基於背景主色調來挑選相應的文本色。

(3)陰影設計

相比於採用大范圍的擴散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,更自然,它模擬了最常見的光源特徵,光線從上往下照下來所營造的陰影效果。

如果你對此有興趣,Material Design Guideline 非常清晰地給你講明白了這樣的陰影的製作細節。

4、盡量少使用 Borders

盒子模型是網頁前端最常用到的工具。當你需要在兩個元素之間創建分隔的時候,盡量避免實用兩者的邊界直接接觸。

雖然 Border 是分隔兩個元素的好辦法,但是它不是唯一的方法,使用過多會讓整個布局的設計感降低,甚至會造成混亂。

所以你可以嘗試下面的辦法來規避:

(1)使用 box shadow

box shadow 同樣可以營造出邊界感,而且更加微妙,並不會顯得突兀,不會分散用戶的注意力。

(2)實用不同的背景色來區分

通常,相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以,你所需要做的就是在不同的區塊採用不同的背景色,並且嘗試刪除邊框,因為你根本不需要它。

(3)增加額外的留白

創建元素之間的分離效果,並不一定要通過線框來表現,只要增加留白,讓它們分隔開就行了。通過留白和間距來實現元素分組是UI設計中的常用手法。

5、不要讓小圖標無端地放大

當你在設計著陸頁的時候,可能會突出產品的功能,這個時候你需要一些大圖標來作為視覺錨點,這個時候你可能會去 Font Awesome 或者 Zondicons 這樣的網站找幾個免費的矢量圖標,然後放大到符合你需求的尺寸。

它們都是矢量圖標,照說是可以無損放大的。但是一個通常只有16×16 的圖標放大三四倍,它固然無損,但是在視覺上就顯得頗為不專業了:缺乏細節,總感覺過於矮胖。

可是,如果這些小圖標是你唯一能夠搞得到的素材的話,那麼不妨試著將它置於另外一個帶有顏色的圖形當中:

這樣的設計不僅能夠讓圖標達到預期的視覺體積,而且看起來要比單純放大,看起來細節會更多一些。當然,如果你手頭不是那麼緊的話,最好還是買幾個大尺寸的高素質圖標,比如 Heroicons 或 Iconic。
真正而有效的UI設計需要符合用戶、符合網民的需求進行設計,在網站建設的基礎上完成網站的維護,網站建設離不開UI設計,所以掌握以上技巧後運用到設計中輔助網站建設,將會使得用戶對網站的體驗感和高級感更加滿意。

3、界面怎麼插入背景圖片的代碼

有兩種方式,一個是用CSS層疊樣式表設定,第二個就是在<div>裡面寫,代碼我這也有一些,我copy給你,在CSS文件中寫body {
background:#fff;寫上要用的背景圖片url,一般設一個包中,寫入路徑
font-size:12px;
color:#000;
font-family:"宋體";
height:100%;
}

4、我的DW網站頁面正常,代碼也正常,但是在DW設計界面裡面只能看到一個表格和背景圖片。之前還好好的。

點擊DW的代碼框。就是那個左邊是代碼右邊是表格的那個。然後在右邊點擊你的表格。選中你要做背景的表格。然後看左邊代碼框,如果是大表格裡面的小格子就在<td後面加空格。然後現在be什麼開頭的代碼框。然後瀏覽文件夾選擇你要作為背景的圖片。

5、如何給jsp頁面添加背景圖片

1、首先新建Dynamic web project項目,建好之後在WebContent裡面的內容如圖所示。

2、直接在body里在body裡面設置背景圖片,如圖所示body部分內容。

3、在body裡面代碼操作好之後,運行效果如圖所示。

4、也可以設置背景顏色,直接將url(images/backImage.jpg)替換成#f00000。

5、直接寫頁面代碼操作好之後,運行效果如下。

6、也可以在head裡面設操作代碼,如圖所示。

7、在head裡面代碼操作好之後,運行效果如下。

6、WEB頁面動圖做背景,需要做UI效果圖

該網站的背景全部放在一個gif圖片里

而頁面中卻能分別使用這個gif圖片中的某一部分作為頁面某一部分的背景

現在在原網頁中能無誤的現實出來但是在我自己弄的網頁中卻顯示不出來路徑沒有問題

一段css代碼如下:

.page-nav {

background-image:url(/images/bg.gif);

background-position: left bottom;

height: 33px;

}

7、在html靜態網頁中如何插入背景圖片,急需!!!

兩種方法:
html:
<img src="xxx.jpg" width="100px" height="100px" />
說明:這是在網頁中插入一副圖像,能調整圖像大小,能拉伸圖像,但是不能平鋪圖像,圖像要佔用頁面的空間的,一般情況下,文字不能在這樣的圖像上面。
css:
#yourID
{
background-image:url('xxx/xxx.jpg');
}
說明:這是背景圖像,能平鋪,但不能調整大小。不會佔用頁面空間,文字可在其上。

這兩種看你的需要選擇。

另外,像樓上的回答:<body background = "圖片的路徑">,這樣做已經過時,不應該提倡。要知道,HTML只管呈現內容,CSS只管頁面布局和修飾。

8、一般做網頁設計背景尺寸定多大?

網頁的背景多大要看對網頁的要求的,
網頁設計標准尺寸:
1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。
2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。
3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右
4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象.
頁面標准按800*600解析度製作,實際尺寸為778*434px
頁面長度原則上不超過3屏,寬度不超過1屏
每個標准頁面為A4幅面大小,即8.5X11英寸
全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px
另外120*90,120*60也是小圖標的標准尺寸
每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K

9、怎麼給html做的登入界面加背景圖

如果是整個頁面的背景圖的話,你可以給body添加樣式
body{background:url("圖片路徑")
no-repeat;}
;如果是給某個區域添加背圖的話就相應的div添加背景樣式就可以了,如果不明白的話,你可以把你的頁面描述的詳細一點。

10、我是前端人員,一個UI設計師,給我一個頁面,裡面的背景圖片1700px,比

你可以直接用background來做,寬設為100%,然後居中就可以了,導航的話應該用的是背景色吧,同上就可以了

與網頁ui設計背景代碼相關的知識