一个优秀的seoer不仅仅要精通SEO知识,对一些其他方面的知识也要有所了解,DIV+CSS就是其中一项。学习div+css技术可以方便 seoer对网站页面进行利于网站优化的布局,用它写出来的代码也十分精简,精简的代码可以提高蜘蛛的爬去速度,这样,对网页的收录有一定的好处。下面秦皇岛seo就 来跟大家介绍一下这个课程的具体内容,在文章底部会给出大家视频教程以及视频相关文件下载地址给到大家,需要的可以下载看看。
第一课: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标签
成对的标签:
<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/1hqKT4pA 密码: 5yeq