網頁設計添加偽類

1、hover在網頁設計中代碼的意思是什麼？

hover是用在網頁中產生動態效果的，比如說你把滑鼠移到有hover事件的區塊上那麼那個那個區塊就會根據你自己改變的顏色而變色；說簡單點就是把滑鼠一上去就馬上變為另一種顏色。

2、網頁設計中的CSS是什麼意思？？？

CSS是Cascading Style Sheets(層疊樣式表)的縮寫。
是一種對web文檔添加樣式的簡單機制，屬於表現層的布局語言。

1.基本語法規范
分析一個典型CSS的語句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
•其中"p"我們稱為"選擇器"(selectors)，指明我們要給"p"定義樣式；
•樣式聲明寫在一對大括弧"{}"中；
•COLOR和BACKGROUND稱為"屬性"(property)，不同屬性之間用分號";"分隔；
•"#FF0000"和"#FFFFFF"是屬性的值(value)。

2.顏色值
顏色值可以用RGB值寫，例如：color : rgb(255,0,0)，也可以用十六進制寫，就象上面例子color:#FF0000。如果十六進制值是成對重復的可以簡寫，效果一樣。例如:#FF0000可以寫成#F00。但如果不重復就不可以簡寫，例如#FC1A1B必須寫滿六位。

3.定義字體
web標准推薦如下字體定義方法：
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }
字體按照所列出的順序選用。如果用戶的計算機含有Lucida Grande字體，文檔將被指定為Lucida Grande。沒有的話，就被指定為Verdana字體，如果也沒有Verdana，就指定為Lucida字體，依此類推，；
•Lucida Grande字體適合Mac OS X；
•Verdana字體適合所有的Windows系統；
•Lucida適合UNIX用戶
•"宋體"適合中文簡體用戶;
如果所列出的字體都不能用，則默認的sans-serif字體能保證調用;

4.群選擇器
當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔，：
p, td, li { font-size : 12px ; }

5.派生選擇器
可以使用派生選擇器給一個元素里的子元素定義樣式，例如這樣：
li strong { font-style : italic; font-weight : normal；}
就是給li下面的子元素strong定義一個斜體不加粗的樣式。

6.id選擇器
用CSS布局主要用層"div"來實現，而div的樣式通過"id選擇器"來定義。例如我們首先定義一個層
<div id="menubar"></div>
然後在樣式表裡這樣定義：
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定義的id名稱。注意在前面加"#"號。
id選擇器也同樣支持派生，例如：
#menubar p { text-align : right; margin-top : 10px; }
這個方法主要用來定義層和那些比較復雜，有多個派生的元素。

6.類別選擇器
在CSS里用一個點開頭表示類別選擇器定義，例如：
.14px {color : #f60 ;font-size:14px ;}
在頁面中，用class="類別名"的方法調用：
<span class="14px">14px大小的字體</span>
這個方法比較簡單靈活，可以隨時根據頁面需要新建和刪除。

7.定義鏈接的樣式
CSS中用四個偽類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
以上語句分別定義了"鏈接、已訪問過的鏈接、滑鼠停在上方時、點下滑鼠時"的樣式。注意，必須按以上順序寫，否則顯示可能和你預想的不一樣。記住它們的順序是「LVHA」。

3、網頁設計中關於新建CSS的選擇器類型問題

僅對該文檔--指的是css代碼直接出現在網頁的內部。

新建樣式表文件--指的是在網頁外部建立一個css文件，網頁引用這個文件。

你用的應該是dreamweaver 8.0以下版，類、標簽和高級其實在面板上都有一個簡短的說明。

高級-----舉一個例子，你可以製作導航欄文字，滑鼠移動到文字，文字變色或變換背景。
標簽-----也就是讓你自己定製html元素，比如h1的字體，你可以隨意設置大小、顏色等等。
類----你可以把網頁里相同的元素定義為一個類，應用這個樣式這些元素就會統一了。

4、css中的偽類和類的區別是什麼？？

這是兩個完全不同的概念，只是名字類似。

類是class的意思，你給一個元素添加了class，就是給這個元素添加了一個類。之所以這樣稱呼，是因為class可以重復利用。比如你給一個ul下的奇數的li加了一個odd的class名稱，給偶數的li加了一個even的class，然後一個給紅色背景，一個給藍色背景，這樣，明顯就把li分成了兩類。甚至一個網頁、一個網站都可以出現一個class通用的情況。

偽類是：也可以用來區分元素，但是都是按順序來的。寫法是前面有個冒號。比如css3的first-child、last-child等，這個都是新版本的css才有的，低版本的IE是不能用的，如IE8。

總結一下：類其實就是給某個或者某些元素起一個名字，進而控制這個或者這個元素；偽類是按順序來選擇某些元素的，這個結果是動態的，比如第一個，最後一個，奇數行什麼的。另外，因為偽類是添加在元素後面的，而類就是選擇元素用的，所以類後面可以跟偽類進行使用的，這就更高級了。

另外，偽類還有一些特殊的，比如a標簽的四個偽類，還有::after和::before（這兩個的用法簡直神奇，這倆貨簡直就是神器）。這些參考http://www.w3school.com.cn/這個網站吧。

5、CSS 選擇器有哪些,在網頁設計中如何選擇使用

<div id="demo">
<div class="inner">
<p><a href="#">鏈接</a></p>
<p><input type="checkbox" name="" id="" /></p>
</div>
</div>
class 選擇器 .inner{ width:100px;}
id 選擇器 #demo{ width:100px;}
標簽 選擇器 p{ width:100px;}
後代選擇器 p a{ color: #f60;}
偽類選擇器 a:hover{ color: #f00;}
偽元素選擇器 a:after{ clear: both;}
屬性選擇器 input[type=checkbox]{ margin-left: 10px;}
css3選擇器
由於ie的問題，比較常用的是前4種選擇器。

6、html css 網頁設計 a:link ,a:visited,a:hover, 怎麼 添加行內樣式

a:link，a:visited，a:hover，貌似不可以用行內樣式表示哦。

可以用內部樣式：

<style>
    a:link {color:blue}
    a:visited{color:red} 
    a:hover {color:yellow}
</style>

也可以用css文件中的外部樣式：

<link rel="stylesheet" type="text/css" href="test.css"></link>
test.css文件里：
    a:link {color:blue}
    a:visited{color:red} 
    a:hover {color:yellow}

但是貌似不可以用行內樣式的。

如果一定要用，可以這樣的方式來：

<a href="javascript:void(0);" onmouseover="this.style.color='yellow';" onmouseout="this.style.color='blue';" onclick="this.style.color='red';">鏈接</a>

其中，onmouseout對應的a:link，onclick對應的a:visited，onmouseover對應的a:hover

7、dreamweaver在設計視圖裡面製作網頁界面很簡單,但是為什麼大多數人都選擇寫代碼這么繁瑣？

這也不是絕對的，純代碼開發的好處是，對於熟悉代碼的人而言，不需要用滑鼠到處點參數，而且dreamweaver裡面的代碼自動完成功能也很不錯，只要輸入一兩個字母就能找到需要設置的參數了，當然它的缺點是不夠直觀，有的時候寫完代碼一測試，不是想要的效果，而且對於不熟悉代碼的人而言，開發也是比較吃力的；純視圖開發的好處是，可以很直觀地看到效果，但是缺點是，它隱藏了很多高級的樣式，只能做一些基礎的開發，例如要定義元素的偽類，在視圖模式裡面就很難做到了。比較好的開發習慣是用分屏的方式來製作，一邊顯示代碼，一邊顯示視圖，既方便代碼書寫，又可以看到效果

8、網頁設計中的動態臉接中a:link a:visited a:hover a:active四種狀態的含義是什麼?

a:link 是指超鏈接正常的時候的狀態
a:visited 是超鏈接被點擊以後的狀態
a:hover 是超鏈接滑鼠經過狀態
a:active 是超鏈接激活狀態

呵呵~~希望幫到您

9、css用偽類如何製作左右箭頭三角形

我在另一個問題裡面涉及到了這個，你可以參考一下。網頁鏈接

偽類你也可以理解為一個容器，不過為了展示順利需要添加 content: ''; 和display：block；為了能夠准確定位，需要結合其容器設置定位，這都是基礎不需要多介紹。

使用偽類做左右的箭頭主要是需要了解 邊框的構成 

{
 border: 20px solid #333;
   border-top-color: #369;
   border-bottom-color: red;
   border-left-color: green;
   border-radius: 0;
}

如圖，我用四個顏色分別給四條邊上色，可以看出來每一個邊在寬度大於1的時候表現出的樣子就傾向於一個梯形。

而我們可以理解為三角形其實就是梯形的一條底邊長度為零。

那麼為了得到一個三角形那麼我們只需要容器的寬高都為零就可以了,如圖：

 {
   border: 20px solid #333;
   border-top-color: #369;
   border-bottom-color: red;
   border-left-color: green;
   border-radius: 0;
   font-size: 0;
   width: 0;
   height: 0;
   padding: 0;
}

下一步我們只留下一個三角形。

只要讓不需要展示的邊顏色為透明就可以了

{
   border: 20px solid transparent;
   /* border-top-color: #369; */
   /* border-bottom-color: red; */
   border-left-color: green;
   border-radius: 0;
   font-size: 0;
   width: 0;
   height: 0;
   padding: 0;
}

這樣你拿到的是上下左右四個方向的三角形，同樣的 你如果需要的是斜向右上角的或者其他角度的，只要自己湊出這個方向就可以，類似於七巧板。

如果希望三角形呈現的不是直角三角形可以修改各個邊的寬度。。

{
   border: 20px solid transparent;
   border-top-color: #369;
   /* border-bottom-color: red; */
   border-left-color: green;
   border-radius: 0;
   font-size: 0;
   width: 0;
   height: 0;
   padding: 0;
}

10、網頁設計題求解答。。

1、請簡述網頁內容與表現形式分離的具體含義。

答：把它們分別放到分開的文件中，XHTML文件可以鏈接並共享外部的CSS和JavaScript文檔的，同時也便於管理和後期維護。
2．CSS3中，定義選擇器有5種類別，請全部列舉出來。

答：
標簽選擇器div{} ，這個不用解釋了吧，都會。
屬性選擇器 例如E[foo*="bar"] 表示：選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值包含「bar」。E選擇符可以省略，表示可匹配任意類型的元素。
結構偽類選擇器 例如E:last-child 表示：選擇位於其父元素中最後一個位置，且匹配E的子元素。
UI狀態偽類選擇器 例如E:enabled 表示：選擇匹配E的所有可用UI元素。
CSS3其他選擇器 例如E:not(s) 表示：否定偽類選擇器類型。選擇匹配E的所有元素，且過濾掉匹配s選擇符的任意元素。s是一個簡單結構的選擇器，不能使用符合選擇器，

3．DIV具有三個重要屬性即border、margin、padding。請分別說明這三個屬性的含義及定義方法

border 表示元素的邊框，border:1px solid #ccc;
margin表示元素的外邊距 ，margin:10px;
padding表示元素的內邊距 , padding:20px;
以上三個的順序是 上，右，下，左。如果使用不同的值，也可以分開寫。