導航:首頁 > 萬維百科 > 網頁設計覆蓋優先順序

網頁設計覆蓋優先順序

發布時間:2020-09-06 00:34:51

1、網頁製作中如何使兩個重疊在一起的FLASH顯示有優先順序

使用 層
層有優先順序的概念的,你可以把要優先顯示的FLASH顯示在前面的層上。
FLASH支持透明顯示設置,手動修改下HTML代碼即可,或者發布的時候直接發布成背景透明的。

2、怎麼解決兩個CSS定義沖突?

解決方法有很多,如果可以對html改動的話,就給你需要細化的頁面元素加多一個class或者ID就行了,當然這種方法應該不是你想要的。那麼接下來是不改變HTML的情況下,直接用css的方法來實現你想要的效果——
方法一 細化選擇符
假如全局是這樣來定義一個元素的樣式的:.abc {background:#000},同時這個class為abc的元素是隸屬於某個元素的,比如下面這樣的html代碼結構
<div class="container">
<div class="abc"></div>

</div>
那麼在細化css裡面,只需要在.abc前面加多一個父元素的選擇符就行了:
.container .abc {background:#fff}
這樣.container .abc的優先順序就大於了.abc,自然細化css裡面的background設置也就不會被全局CSS覆蓋了~~

方法二 提升樣式的優先順序
這種方法個人不太推薦,相對而言會簡單粗暴一些。同樣是上面的例子,在細化CSS裡面,只要在樣式後面加一個!important,例如這樣:
.abc {background:#fff !improtant;}
這個樣式的優先順序就會默認提升到頂級,全局樣式就無法影響到它了。

方法三 改變兩個樣式的載入順序
這種方法比較簡單,就是只要把細化css載入在全局css之後就行了,這樣後面的樣式就會自動覆蓋前面的樣式。不過如果你的html裡面這兩個樣式表的載入順序是先細化後全局的話,就要稍微調整一下代碼才行。

3、跪求高手指點:如何給網站頁面信息歸類排列優先順序?如何架構一個頁面、一個網站?

工作中面試過很多理論很棒的同學,感覺這些同學即將走上或剛剛走上工作崗位,作為一名初級設計師*開始還是較難將這些理論與實際工作應用相結合的,致使形成求職與招聘雙方都不願看到的潛在矛盾,使我感悟很深,初期的設計工作中到底需要什麼樣的機能呢?很願意做這樣的一位中間人,盡量用自己的理解拉進大家與公司之間的距離,使之契合(盡量避免誤導同學,歡迎資深的、非資深的同學批評指正)。在後面我會將文獻作者示例與自己多年設計經驗結合,不斷地優化出一些可以精簡又實用的文字,用通俗的白話詮釋出來,希望與大家共同探討。

在我踏入設計行業的那個年代,大家對設計師的共同理解是,具備審美、有繪畫基礎的藝術家,並掌握實用美術產品設計能力,可以說這個職位的要求是非常具有專業性的與行業前期發展特點的。甚至那時在公司可以現學軟體。

而現在,隨著更多得新名詞的引入:UI設計師、交互設計師、用戶體驗設計等等,我們可以理解到,設計師不只是要具備美學基礎了,更需要掌握產品原型設計、設計心理學、信息管理,甚至互動營銷方面的知識等,成為更多學科的綜合素質人才。很多學校都同時開辟了這樣的專業課程,來適應現在的市場需求。素質培養,理論知識的學習是學校的培訓基礎,而綜合能力培養確是一直薄弱的環節,比如:將理論付諸於實踐的對具體產品研究中如何掌握視覺設計與產品易用性的平衡;如何掌握市場需要的初級設計師能力等,這些都是值得研究與探討的。

沒錯,我們不能要求所有的應聘者都是完全的綜合素質優秀的人才,我想做到這一點也確實不容易。但是我們可以分析,現在用人單位招聘設計師一般會找「學產品設計的理工類」和「學工藝美術的文科類」這兩類人才較多,為什麼?正是因為現有產品結構設計的需要,不再只是一味的追求視覺或實現產品功能、結構等,而是視覺、可用性一個都不能少。而我在面試現有理工類產品設計同學時,發現大部分人員只停留在理論層面,對假想產品分析非常透徹,非常棒,但似乎視覺設計不屬於他們的范疇,隨然也學了視覺設計相關課程,可就是不能獨立完成視覺設計任務。可這也是一種綜合能力的表現之一呀。在實際工作中,我們更多應用是團隊協作,但是獨立對任務的實現也是需要的,或者把自己的設想用相應的軟體實現出來與大家分享,都需要掌握一定的視覺設計能力,注意我這里講的是「掌握」,不是「熟練」,因為學科不同必互有所長,可以理解。但用人單位往往需要提前預算,在有限的招聘名額上找到最合適的、能力最好的人員,應聘者之間也就形成了競爭關系,那些對互聯網了解較好,做過一些產品的人員往往會被優先選擇,比如:做過企業網站設計,自己的博客設計,Icon設計等,因為這些可以很好的體現他對設計細節的把握,對一個網站架構的理解與實現流程的思考分析。同時也說明他在這些方面有很好的設計能力。說的再細一些:做過網站的設計師,有可能掌握網站的架構設計和頁面的結構設計,有可能具備內容信息的整合能力,有可能對設計風格的全局掌控和具體頁面、Icon等設計,有可能掌握與客戶溝通站在用戶角度思考的能力,有可能自己或與工程師協作完成頁面的最終製作,甚至自己申請域名與存儲空間等,這些能力都是只學課本而不容易得到的。

反之,學工藝設計的同學需要加強理論修為,注意了解多領域知識,形成對設計的理性思考,注意感性與理性之間的應用平衡。同樣要多做、多動手設計。

我們面試常問一個問題,你們為什麼選擇IT行業擇業呢?大多回答互聯網行業很有挑戰性,很有成就感,可以學到更多知識等。但是有沒有問自己對互聯網產品設計了解多少?是不是應該先具備一些互聯網設計專業知識呢?

如何壓縮可用的圖片?如何設計網頁的色彩?如何給頁面信息歸類排列優先順序?如何架構一個頁面、一個網站?最後如何熟練使用軟體完成設計?… …

還有這些軟體你掌握了嗎?

photoshop?常用界面視覺設計軟體

Indesign?illustrator?Freehand?常用大型流程分析、概念圖設計製作

Dreamweaver?頁面製作,頁面間的交互連接控制

Visio?流程圖設計

Word? PowerPoint?文檔、演示文檔設計

Excel?表格設計(可作進度控製表,比Project簡單通用)、

Flash?Firework?動畫、廣告設計,界面設計,設計人員掌握

還有很多軟體可以學習,藝多不壓身嘛,但不同行業有自己的軟體分類,要懂得輕重取捨,比如:有一個同學來面試網頁設計師,他的CORL DRAW、CAD應用熟練,但是PhotoShop、illustrator、Dreamweaver卻一般,最終無法勝任工作。

4、如何提升網頁設計的視覺層次感

1. 明確元素設計目標
網頁上的各項元素通常都有其存在的目的和意義,在構建視覺層次時我們就可以從這方面著手,根據網頁元素的不同角色確定優先順序,然後進行視覺層次的構建。
2. 考慮用戶瀏覽模式
當用戶初次訪問網站時,他們一般不會仔細瀏覽所有內容,而是會進行快速的掃視,確定其中是否有自己感興趣的內容。
3. 功能性優先
我們常常會有這樣一個誤區,認為視覺層次是服務於網站設計美感的。其實,視覺層次設計的功能性反而要更重要一些。設計師在構建視覺層次時首先需要確保每個元素發揮了自己的作用,比如提供給用戶清晰的導航菜單、可見的購買途徑等,然後再考慮元素組合的界面美觀與否。
4. 善用留白
留白或者說負空間,不僅僅是指界面元素之中空白的區域,它更是視覺層次構成的核心元素之一。在視覺層次設計中,留白一方面可以用來聯系或區分不同內容元素,創造別具一格的布局。另一方面它還可以幫助強調某個關鍵元素,讓它獲得用戶額外的關注。
5. 使用黃金分割
黃金准則主要是指1:1.618的頁面比例,它被公認為是最具美感的,在自然界、日常生活、舞檯布局等多個方面都有著不同的應用。

5、網頁製作-關於瀏覽器顯示兼容問題

關於css對各瀏覽器的兼容問題的確令人很頭痛~~!!
我自己在平常的設計中,通常使用以下方法,如果有什麼錯誤,請指正,一起進步~
區分三款瀏覽器簡單方法:
#example
{
color:
#333;
}
/*
Moz
FF
*/
*
html
#example
{
color:
#f0f;
}
/*
IE6
*/
*+html
#example
{
color:
#0ff;
}
/*
IE7
*/
效果很好,不過有句要補充一下!
在兼容IE7的*+html的hack一定要在頂部加入DTD聲明,否則無效
將下面這句聲明加入下面可運行的html的頂部,就可以看到效果拉~當然要保證你的瀏覽器是IE
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
以下是就一些有可能產生的疑問的一些總結,希望對你也有幫助!!
1.為什麼在不同的瀏覽器顯示效果不一樣?
因為不同瀏覽器對於css樣式表的解析不一樣,所以導致樣式乃至層布局發生變化。例如,ff中設置padding屬性時,div會相應增加height和width,而ie的解析是不會的,再例如ff對盒模型的解析和ie相差兩個象素。
2.設計時要做到所有瀏覽器都兼容嗎?
我的答案是即使能做到也沒有必要去做,科技是在進步的,用戶總是在推陳出新的使用這新版本的瀏覽器,根據「設計訴說」的站點統計小樣本結果顯示,6225個訪問者中有72.1%使用IE6.0;12.7%使用IE7.0;7.9%在使用FF2.0,剩餘的不同版本的瀏覽器占的百分比都不到1%
所以我認為只要做到IE6
FF2.0
以及新出的IE7.0兼容即可,頂多向下兼容一下IE5.5,完全沒有必要為了那些個小數點費勁腦子。如果有必要可以另外設計css文件,然後通過js判斷瀏覽器版本進行選擇相應的文件。
3.css樣式的優先順序是怎麼樣的?
這個是個好問題,當你弄明白這個,我想應該可以很自如的運用一些兼容樣式表的技巧了。在正常的IE中,如果你在css中重復定義一個屬性時,瀏覽器解析的是後面的屬性,舉個例子
box
{
height:100px;
height:200px;
height:400px;
height:300px;
}
重復定義盒模型的高度屬性,越後面優先順序越高,所以瀏覽器解析出的結果就是高度為300px。
4.如何做到讓IE6.0與FF兼容?
最常用的一種方法了,也是屢試不爽的——「!important」,這個欄位是用來提高優先順序的,而IE6.0對於找個欄位是無法識別的,於是FF與IE6.0就可以分開解析了。例如,在IE下顯示red,FF下顯示blue,只需要這么寫
color
{
background-color:blue
!important;
background-color:red;
}
「!important」FF可以識別,blue那行提高優先順序,因此在FF中blue優先順序高於red,顯示為藍色
IE6.0將上面的樣式識別成
color
{
background-color:blue;
background-color:red;
}
red優先順序高,所以顯示為紅色。
切記,上下兩句的位置一定不能顛倒。問為什麼的再好好看看上兩個問題,再不明白就面壁去....
5.如何做到讓更低版本IE兼容?
其實我認為做到IE6.0與FF2.0已經足夠,5.5的兼容用「
/**/」
5.0的兼容用「>」,具體我就不說了,說實在我也不大懂,可以去google一下
6.如何做到IE7.0兼容?
這個問題我也要問大家,大家有答案的告訴我,因為新版的IE7.0對於「!important」具有識別能力,可是對於盒以及padding等的解析卻和IE6.0差不多,於是乎,完全兼容了IE6.0和FF2.0的就似乎兼容不了IE7.0,搗騰了好久,還是不知道怎麼辦。
7.css對瀏覽器兼容應做到完全一致嗎?
個人認為在滿足可讀性的原則和不影響整體布局的前提下,界面有些許的位置不同是可以允許的,要在不同瀏覽器下做到一模一樣,那真是太費勁了。

6、移動網頁設計:為什麼手機優先

響應式網站越來越受到大家的歡迎,有利也有弊的因素。它沒有固定的頁面尺寸、沒有毫米或英寸,沒有任何物理限制,讓人感到無從下手。下面就和大家分析如何運用響應式web設計的各項基本原則來實現。為了簡單起見,就說說響應式網站的布局。希望對你有所受益。

7、HTML中嵌入CSS的四種方式及優先順序,如何選擇

1. 行內樣式

行內樣式就是把 CSS 樣式直接放在代碼行內的標簽中,一般都是放入標簽的style屬性中,由於行內樣式直接插入標簽中,故是最直接的一種方式,同時也是修改最不方便的樣式。

<p style="background-color: #999900">行內元素,控制段落-1</p>
<h2 style="background-color: #FF6633">行內元素,h2 標題元素</h2>
<p style="background-color: #999900">行內元素,控制段落-2</p>
<strong style="font-size:30px;">行內元素,strong 比 em 效果要強</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行內元素,div 塊級元素</div>
<em style="font-size:2em;">行內元素,em 強調</em>2. 內嵌式

內嵌式通過將 CSS 寫在網頁源文件的頭部,即在 <head> 和 <head> 之間,通過使用 HTML 標簽中的 <style> 標簽將其包圍,其特點是該樣式只能在此頁使用,解決行內樣式多次書寫的弊端。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>內嵌式</title>
<style type="text/css">
p{
text-align: left;  /*文本左對齊*/
font-size: 18px;  /*字體大小 18 像素*/
line-height: 25px;  /*行高 25 像素*/
text-indent: 2em;  /*首行縮進2個文字大小空間*/
width: 500px;  /*段落寬度 500 像素*/
margin: 0 auto;  /*瀏覽器下居中*/
margin-bottom: 20px;  /*段落下邊距 20 像素*/
}
</style>
</head>
<body>
<p>「百度」這一公司名稱便來自宋詞「眾里尋他千百度」。(百度公司會議室名為青玉案,即是這首詞的詞牌)。而「熊掌」圖標的想法來源於「獵人巡跡熊爪」的刺激,與李博士的「分析搜索技術」非常相似,從而構成百度的搜索概念,也最終成為了百度的圖標形象。在這之後,由於在搜索引擎中,大都有動物形象來形象,如 SOHU 的狐,如 GOOGLE 的狗,而百度也便順理成章稱作了熊。百度熊也便成了百度公司的形象物。</p>
<p>在百度那次更換 LOGO 的計劃中,百度給出的 3 個新 LOGO 設計方案在網民的投票下,全部被否決,更多的網民將選票投給了原有的熊掌標志。</p>
<p>此次更換 LOGO 的行動共進行了 3 輪投票,直到第 2 輪投票結束,新的笑臉 LOGO 都占據了絕對優勢。但到最後一輪投票時,原有的熊掌標志卻戲劇性地獲得了最多的網民選票,從而把 3 個新 LOGO 方案徹底否決。</p>
</body>
</html>3. 鏈接式

鏈接式通過 HTML 的 <link> 標簽,將外部樣式表文件鏈接到 HTML 文檔中,這也是網路上網站應用最多的方式,同時也是最實用的方式。這種方法將 HTML 文檔和 CSS 文件完全分離,實現結構層和表示層的徹底分離,增強網頁結構的擴展性和 CSS 樣式的可維護性。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>我是被 lianjie-2.css 文件控制的,樓下的你呢??</p>
<h3>樓上的,<span>lianjie.css</span> 文件給我穿的花衣服。</h3>
</body>
</html>4. 導入樣式<style type="text/css">
@import url=("css路徑名");
</style>

這種方法一般不用,可以直接忽略。

一般都是採用鏈接樣式,行內樣式和內嵌樣式 維護起來相對麻煩,

優先順序(從高到底)

行內樣式>內嵌樣式>鏈接樣式>導入樣式。

8、網頁製作 javascript中 與 或 非 的優先順序是什麼 ?

優先順序:非>與>或
例如
if( !a&!b || !c&d ){
// (a、b為false) 或者 (c為false,d為true )

};

9、如圖所示,怎麼在網頁製作中設置z-index,讓那個3個div處在最下層

一般情況下,Z-index默認值是0;值最大的浮在最上層;

比如說

<html>

<head>

<style type="text/css">

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:-1

}

</style>

</head>


<body>

<h1>這是一個標題</h1>

<img class="x" src="/i/eg_mouse.jpg" /> 

<p>默認的 z-index 是 0。Z-index -1 擁有更低的優先順序。</p>

</body>


</html>


如果想要滑鼠在文字上方的,只需要將z-index的值設為1即可。


三個DIV,可以根據你的需要來設置z-index 的值。最下層的值最小,最上層的值最大。

10、網站設計要遵循哪些原則?

1、響應式布局:自適應PC、手機、平板端,網站的可訪問性非常重要,越來越多的人使用手機搜索訪問網站;
2、安全穩定:網站從本質上來說一款軟體,是軟體都會需要升級,因此使用專業的建站系統搭建網站除了功能完善,還可以在線升級
3、尊重知識產權:當前很多所謂的定製建站公司為了節省成本或受限於自己的技術水平,模仿抄襲建站行業的標桿企業模板或是模仿同行,從而會給公司埋下嚴重的侵權法律風險。

與網頁設計覆蓋優先順序相關的知識