小松SEO,河北保定SEO愛好者,為seoer提供網站建設以及SEO優化教程視頻下載、SEO常見問題解答,為企業網站提供SEO診斷、SEO優化服務!跟我聯系

學SEO必看的DIV+CSS教程【提供視頻下載】

SEO入門知識 董小松 5542℃ 0評論

一個優秀的seoer不僅僅要精通SEO知識,對一些其他方面的知識也要有所了解,DIV+CSS就是其中一項。學習div+css技術可以方便seoer對網站頁面進行利于網站優化的布局,用它寫出來的代碼也十分精簡,精簡的代碼可以提高蜘蛛的爬去速度,這樣,對網頁的收錄有一定的好處。下面就來跟大家介紹一下這個課程的具體內容,在文章底部小松會給出大家視頻教程以及視頻相關文件下載地址給到大家,需要的可以下載看看。

第一課:DIV+CSS的基礎知識

1)文檔類型

當我們用dreamweaver新建一下html格式文檔時,查看源代碼,會發現代碼最上部有如下這句話:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

因為瀏覽器對XHTML的解析比較寬松,允許使用HTML4.01中的標簽,但必須符合XHTML的語法。在這里建議大家一定要保留這句話,刪除它后可能引起某些樣式表失效或其它意想不到的問題。

2)語言編碼<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

它標示文檔的語言編碼。就像我們平時所說的漢語、英語一樣。這里的gb2312告訴瀏覽器,本文檔采用簡體中文編碼;還有一種常用的編碼是UTF-8編碼,它是國際通用的編碼。不管我們采用哪種編碼,有一點就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣,要不就會出現亂碼。

3)html標簽DIV+CSS

成對的標簽:

<head>…</head>

<body>sdfsdfldjflsd…</body>

<div>…</div>

<span>…</span>

單一的標簽:

<img src=”” />

<br />

4)CSS樣式

1、什么是css(table表格和div層) ? ? ? ? ? ?2、CSS 語法,選擇器,使用大括號來包圍屬性。

CSS樣式加載的幾種方式介紹:

外部樣式:

<link href=”layout.css” rel=”stylesheet” type=”text/css” />

內部樣式:

<style>

h2 { color:#f00;}

</style>

行內樣式 :

<p style=”font-size:18px;”>內部樣式</p>

第二課:DIV一列的布局

1、一列固定寬度

2、一列固定寬度居中

3、一列自適應寬度
body { margin: 0px; }
百分比寬度設置

4、一列自適應寬度居中
margin屬性設置

5、一列二至多塊布局
多個div布局

6、css格式的調整
編輯->首選參數->代碼格式
命令->應用源格式

7、CSS縮寫
比如顏色值為#ff6600;可以簡寫為#f60

8、ID和CLASS選擇器
id:用來定義頁面中大的樣式,如欄目劃分,頂部,正文,底部等;用#top的形式來定義;
class:用來定義一些比較細節的樣式,如具體的一個菜單,一行文字等,用.text的形式來定義。

ID選擇器只能在HTML頁面中使用一次
class是重復使用的

第三課:DIV兩列和三列的布局

1、二列自適應寬度
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

2、二列固定寬度
#main { background: #99FFFF; height: 300px; width: 300px; margin-left: 120px; }
3、二列固定寬度居中
<div id=”content”>

4、float屬性
5、三列自適應寬度
6、三列固定寬度
7、三列固定寬度居中

第四課、縱向導航菜單的制作

1、插入一個ID為menu的div,插入ul
從預覽的效果上看,四周都有很大的空隙,而且每一行前邊還有個點,這是因為標簽的默認樣式造成的,下面我們需要創建樣式表把標簽的默認樣式給清除掉

2、插入復合內容menu ul的css
列表->列表樣式->無
方框->內外邊距都是0

3、重新定義body標簽
字體
大小:12px
行高:1.5

4、定義menu的css
邊框->樣式:虛線
寬度:1
顏色:#ccc
方框:100寬度

5、新建復合內容css
#menu ul li
背景:#eee
方框:高度:26px;
左右填充8,上下0px
類型:行高:26px;
邊框:下:虛線,寬:1px,顏色:#ccc

6、設置超鏈接#

7、定義a標簽css樣式
類型:顏色黑色
文字修飾:無

8、定義鼠標滑過的樣式,復合內容a:hover
類型:顏色:紅

第五課、偽類的介紹以及如何用CSS制作出一個按鈕

id,類
.main
#main
a:link

1、鏈接的樣式分析,4種
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
默認的鏈接
<p><a href=”#”>鏈接1</a></p>
<p><a href=”#”>鏈接2</a></p>

插入的超鏈接默認是藍色來下劃線的,這是標簽的默認樣式所致
如何修改這個:

1)設置a:link樣式,新建復合內容CSS,選擇a:link,選擇類型,文字修飾:無,顏色:藍色
2)設置a:visited樣式,選擇類型,文本修飾:刪除線,顏色:灰色
3)設置a:hover樣式,選擇類型,文本修改:下劃線,顏色:紅色
4)設置a:active樣式,選擇類型,顏色:粉紅
2、將鏈接由文字轉為塊區域鏈接
只需增加一個display:block的css屬性即可。

新建a的css屬性,選擇區塊,文本對齊:居中,顯示:塊
方框:寬:100,高度30
類型:行高:30
背景:顏色:灰色

新建a的復合內容:a:hover
選擇類型:文本修改:無,顏色:白色
背景:背景顏色:灰色

3、用CSS制作按鈕
修改第二部分的內容的代碼
修改a的樣式:選擇類型:字體大小14,粗細:粗體,行高:2,顏色:橘黃
文本修飾:無。
背景:背景圖片:選擇圖像。
區塊:文本對齊:居中,顯示:塊
方框:寬:107,高:34,填充上:3

第六課、html列表的介紹

一、有序列表ol和無序列表ul
我們用到的列表都是無序列表

二、橫向的圖文列表演示

1、新建一個div,main
2、新建復合內容#main ul li
選擇方框:邊界:上20,左20
選擇區塊:文本對齊:居中

3、新建復合內容#main ul li a
選擇區塊:顯示:塊

4、設置a下面的圖片樣式
新建#main ul li a img
選擇方框:填充1,邊界:下3
選擇邊框:樣式:實線,寬度:1,顏色:#e1e1e1

5、設置鼠標滑過li的樣式
新建復合內容:#main ul li a:hover img
選擇邊框:樣式:實線,寬度:2,顏色:橘黃
選擇方框:填充0

第七課、CSS漂亮橫向菜單的制作

一、把第四課程中的縱向導航改成橫向導航

二、橫向導航如何設置背景

1、修改a的背景為圖片1
2、修改a:hover的背景圖片2
3、修改li的寬度為88
4、修改li的虛線為無
5、修改li的區塊顯示為塊等細節調整

最后添加鏈接當前背景a#now{background: url(091033_nav_bg1.gif);}
并且在要改變的圖片的a標簽中添加id

教程視頻集相關文件下載鏈接: http://pan.baidu.com/s/1kTDUq95? ? ? ? ? ? ? ? ? 密碼: 9uhf

轉載請注明:河北保定SEO » 學SEO必看的DIV+CSS教程【提供視頻下載】

喜歡 (31)or分享 (0)

您必須 登錄 才能發表評論!

福彩3d中奖号码