CSS基本相關內容2

CSS基本相關內容2

上次我們說了CSS的基本屬性,選取器的介紹.本篇文章繼續討論CSS中的相關內容.像我發布文章的部落格園上面用的代碼就是CSS的內容.

下面我們看看偽選取器的寫法.

在某些瀏覽器下支援為選取器,某些不支援.原因一個是相容性問題,一個就是頭上加沒加: !DOCTYPE

 

需求:

1.沒點之前，黑色，沒有底線

2.滑鼠懸浮，紅色，帶底線

3.啟用狀態，黃色，沒有底線

4.訪問過以後，藍色，有底線，粗體。

 

一、偽選取器

偽選取器示範圖

下面有個題看怎麼做，

需求：

頁面上有兩部分超連結，上面的那些連結還是剛才的樣式，下面的串連預設紅色，滑鼠懸浮黑色，點擊是藍色，滑鼠移開黃色。

這個時候怎麼實現呢？

二、在一個頁面上分別使用不同的偽選取器

在一個頁面上分別使用不同的偽選取器示範

下面我們看下CSS的三種使用方式：

三、使用CSS的三種方式

四、鏈入外部樣式表

鏈入外部樣式表結果示範

如果我們只想用CSS中的部分樣式，我還得串連進整個CSS檔案。所以，我們可以寫多個CSS檔案，每個CSS檔案裡麵包含的內容都比較的少，想用一個就用一個。想用多個，就把它們組合起來使用。

接下來我們看下文檔流：

為了示範方便，我們還是把CSS都寫在一個頁面裡面。

五、流布局

我們發現個小問題，我們寫好的元素跟瀏覽器的邊框還是有個小距離。為什麼會有這個小距離呢？

六、設定元素跟瀏覽器邊框的距離

接下來我們看這麼一個問題

七、去除p標籤之間的間距

八、絕對位置

position：absolute

九、z-index

十、fixed

Fixed效果示範

position:relative;相對定位

十一、相對定位

下面我們做個在螢幕的右下角彈出一個長方形的廣告的效果。

十二、廣告效果代碼

廣告的效果

接下來咱們說下Div+CSS布局：

建議布局的時候，一開始就把！DOCTYPE加上。 就是告訴瀏覽器這個文檔使用什麼規範的文檔。

以前在金融行業我也寫過關於布局的文章。呵呵，挺有意思的。

十三、div+css布局

下面我們提供了一些的資料，大家可以邊做，邊參看下面的檔案。

作者QQ：1329412715

 

 

接下來我們看下CSS當中的提高優先順序：

十四、設定最高的優先順序

@import url(xx.css);

在一個css中，添加對其他css檔案的引用。

十五、import url(xx.css)

接下來，咱們再說下：盒子模型。

十六、盒子模型

十七、盒子模型示範

下面我說下架構：

架構用的不是太多，但有的時候會用到。

用到架構的地方，論壇。在一個頁面上顯示兩部分內容，或多部分的內容。

我們自己寫個包含各大搜尋的架構

十八、架構的基本形式

十九、如果架構是這樣子，我們該怎麼分

二十、具體的分法

像具體的架構裡面的拖拽功能都能具體的設定，下面看下用MSDN怎麼找。以frameset為例。

二十一、自學搜尋的方法

下面看下點下連結跳到另外個頁面的做法：

二十二、點下連結跳到另外個頁面

點下連結跳到另外個頁面示範

二十三、顯示到大視窗上

顯示到大視窗上示範

Iframe也是嵌套的架構。

在正常的頁面的某個地方去嵌入一個頁面。比如，我們經常見到的廣告。

二十四、iframe

Iframe示範

作者近期文章列表:

C#基礎教程（完全免費，獻給代碼愛好者的最好禮物。註：本作者分享自己精心整理的C#基礎教程，無任何商業目的。 希望與更多的代碼愛好者交流心得，也請高手多多指點！！！）
三層	三層（一）
SQL資料庫 ADO.net	資料庫的應用圖解一
	資料庫的應用詳解二
面向過程，物件導向中進階	面向過程，物件導向的深入理解一
	面向過程，物件導向的深入理解二
	物件導向的深入理解三
winform基礎	Winform基礎
	winform中常用的控制項
面向過程	三種迴圈的比較
	C#中的方法（上）
	我們常見的數組
物件導向	思想的轉變
	C#中超級好用的類
	C#中解構函式和命名空間的妙用
	C#中超級好用的字串
	C#中如何快速處理字串
	實值型別和參考型別及其它
	ArrayList和HashTable妙用一
	ArrayList和HashTable妙用二
	檔案管理File類
	多態
	C#中其它一些問題的小節
GDI+	這些年我收集的GDI+代碼
	這些年我收集的GDI+代碼2
HTML概述以及CSS	你不能忽視的HTML語言
	你不能忽視的HTML語言2精編篇
	你不能忽視的HTML語言3
	CSS基本相關內容--中秋特別奉獻
JavaScript基礎	JavaScript基礎一