上交材料授课第7讲divcss2

WebUI何王科电话：QQ：1417441001导入课程首先说一下我们这节课的知识点纵向列表标签的默认样式css派生选择器css选择器的分组纵向二级列表相对定位和绝对定位纵向列表纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务，今天我们就学习一下纵向导航的制作先新建一个页面，然后插入一个ID为menu的divlink、visited、hover、activeLove/hate!纵向列表<divid="menu"><ul><li>首页</li><li>网页版式布局</li><li>div+css教程</li><li>div+css实例</li><li>常用代码</li><li>站长杂谈</li><li>技术文档</li><li>资源下载</li><li>图片素材</li></ul></div>纵向列表从预览的效果上看，四周都有很大的空隙，而且每一行前边还有个点，这是因为标签的默认样式造成的，下面我们需要创建样式表把标签的默认样式给清除掉<styletype="text/css">#menuul{list-style:none;margin:0px;padding:0px;}</style>纵向列表下面我们定义一下全局的字体，字号，行距等body{font-family:Verdana;font-size:12px;line-height:1.5;}下面给#menu定义一个灰色的1px边框及宽度#menu{width:100px;border:1pxsolid#CCC;}接下来定义li的背景色为浅灰色及下边框和内边距#menuulli{background:#eee;padding:0px8px;height:26px;line-height:26px;border-bottom:1pxsolid#CCC;}纵向列表这些属性设置完后，一个简单的纵向列表菜单初具模型了。因为导航菜单，需要链接到其它页面，下边把这些导航加上链接，然后在定义a的状态和鼠标划过状态。<divid="menu"><ul><li><ahref="@#">首页</a></li><li><ahref="#">网页版式布局</a></li><li><ahref="#">div+css教程</a></li><li><ahref="#">div+css实例</a></li><li><ahref="#">常用代码</a></li><li><ahref="#">站长杂谈</a></li><li><ahref="#">技术文档</a></li><li><ahref="#">资源下载</a></li><li><ahref="#">图片素材</a></li></ul></div>纵向列表a{color:#000;text-decoration:none;}创建a的样式后，下面我们增加个交互效果，当鼠标划过链接文字时，让文字颜色变成红色，这时就需要用到a:hover这个伪类了a:hover{color:#F00;}标签的默认样式大多数标签都有自己的默认样式，比如第二天课程中遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。标签的默认样式body,ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd{margin:0px;padding:0px;font-size:12px;font-weight:normal;}下边设置全局ul标签默认的圆点为无ul{list-style:none;}下面对img标签进行重定义，清除图片有链接时默认的边框img{border-style:none;}css派生选择器CSS初学者不知道使用子选择器是影响他们效率的原因之一。派生选择器可以帮助你节约大量的class定义。我上边的例子中应用了些派生选择器如下的css代码#menuul{list-style:none;margin:0px;padding:0px;}#menuulli{background:#eee;padding:0px8px;height:26px;line-height:26px;border-bottom:1pxsolid#CCC;}css派生选择器#menuul和#menuulli即为派生选择器，如果我们把前边的#menu去掉，那么将是对ul标签重定义，重定义的属性将应用到全局，而前边加上#menu后，将是定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的ul生效，这个有点像编程中的局部变量，而直接定义ul则相当于全局变量。#menuulli是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高效率。css选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的，p段落、div分区、span都是20像素字体。h1,h2,h3,h4,h5,h6{color:green;}p,div,span{font-size:20px;}纵向二级列表二级菜单即指当鼠标放到一级菜单上后，会弹出相应的二级菜单，移去鼠标后自动消失，我们接着上边的例子进行修改，代码如下：<divid="menu"><ul><li><ahref="@#">首页</a></li><li><ahref="#">网页版式布局</a><ul><li><ahref="#">自适应宽度</a></li><li><ahref="#">固定宽度</a></li></ul></li><li><ahref="#">div+css教程</a><ul><li><ahref="#">新手入门</a></li><li><ahref="#">视频教程</a></li><li><ahref="#">常见问题</a></li></ul></li></ul></div>纵向二级列表接下来修改css样式表，先修改#menuulli，给其增加一个position:relative;属性#menuulli{background:#eee;padding:0px8px;height:26px;line-height:26px;border-bottom:1pxsolid#CCC;position:relative}然后定义ID为menu下ul下里内的ul样式如下定义display:none后，默认状态下将隐藏定义#menuulliul的position:absolute;left:100px;top:0px;，那么它将以相对于它父元素li的上为0，左为100的位置显示。#menuulliul{display:none;

position:absolute;left:100px;top:0px;width:100px;border:1pxsolid#ccc;border-bottom:none;}纵向二级列表最后我们设置当鼠标划过后显示下级菜单的样式#menuulli:hoverul{display:block;}#menuulli:hoverul这个样式比较难理解，它的意思是定义ID为menu下ul下li，当鼠标划过时ul的样式，这里设置为display:block，指的是鼠标划过时显示这块内容，这也实现我们今天想要的效果。其中的:hover和前边说的链接一样，同属于伪类相对定位和绝对定位定位标签：position包含属性：relative（相对）absolute（绝对）相对定位和绝对定位1.position:relative;如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）2.position:absolute;表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右超链接的四种样式超链接可以说是网页发展史上一个伟大的发明，它使得许多页面相互链接从而构成一个网站。说到超链接，它涉及到一个新的概念：伪类，我们先看下超链接的四种样式：a:link{color:#FF0000}/*未访问的链接*/a:visited{color:#00FF00}/*已访问的链接*/a:hover{color:#FF00FF}/*鼠标移动到链接上*/a:active{color:#0000FF}/*选定的链接*/超链接的四种样式超链接可以说是网页发展史上一个伟大的发明，它使得许多页面相互链接从而构成一个网站。说到超链接，它涉及到一个新的概念：伪类，我们先看下超链接的四种样式：a:link{color:#FF0000}/*未访问的链接*/a:visited{color:#00FF00}/*已访问的链接*/a:hover{color:#FF00FF}/*鼠标移动到链接上*/a:active{color:#0000FF}/*选定的链接*/超链接的四种样式下面来做一个默认状态下是蓝色，鼠标放上是红色加下划线，选定（按下）时为紫色，已访问过为灰色加删除线的实例来讲解一下。首先插入两个带超链接的内容：<p><ahref="#">这里是链接</a></p><p><ahref="10.html">这里也是链接</a></p>超链接的四种样式a:link{color:#06F;text-decoration:none;}a:visited{color:#999;text-decoration:line-through;}a:hover{color:#F00;text-decoration:underline;}a:active{color:#F0F;}注意：四种状态的顺序一定不能颠倒，否则有些不生效将链接转换为块级元素链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。a{display:block;height:30px;width:100px;line-height:30px;text-align:center;background:#CCC;}将链接转换为块级元素链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。a{display:block;height:30px;width:100px;line-height:30px;text-align:center;background:#CCC;}将链接转换为块级元素这样设置的结果是全局a都执行这个样式显示，下面设置一下鼠标划过时的状态，其它几种状态设置方法相同a:hover{color:#FFF;text-decoration:none;background:#333;}用css制作按钮学会了把超链接转换为块级元素，想制作个css按钮简直太简单了，只需在上一步的基础上增加一个按钮的背景图片即可实现。下面以制作淘宝网首页的免费注册按钮来讲解，设置最常用的默认样式和鼠标移上时的样式a{display:block;height:34px;width:107px;line-height:2;text-align:center;background:url(images/)no-repeat0px0px;color:#d84700;font-size:14px;font-weight:bold;text-decoration:none;padding-top:3px;}a:hover{background:url(images/)no-repeat0px0px;}首字下沉首字下沉是css伪类上的又一个运用，它可以直接通过css样式表向某个选择器中的文本首字母添加特殊的样式，而不需要把首字添加一个标签或通过程序来实现，今天以制作word里的首字下沉为例来讲解，应用如下伪元素：:first-letter首字下沉<p>现代作家朱自清于1925年所写的一篇回忆性散文。这篇散文叙述的是作者离开南京到北京大学，父亲送他到浦口车站，照料他上车，并替他买橘子的情形。在作者脑海里印象最深刻的，是他父亲替他买橘子时在月台爬上攀下时的背影!</p><styletype="text/css">p{width:400px;line-height:1.5;font-size:14px;}p:first-letter{font-family:"microsoftyahei";font-size:40px;float:left;padding-right:10px;line-height:1;}</style>ul无序和ol有序列表无序列表是web标准布局中最常用的样式，代码如下：<divid="layout"><ul><li><atitle="超链接伪类"href="/div_css/906.shtml"target="_blank">超链接伪类</a></li><li><atitle="纵向导航菜单"href="/div_css/905.shtml"target="_blank">纵向导航菜单</a></li><li><atitle="二列和三列布局"href="/div_css/904.shtml"target="_blank">二列和三列布局</a></li><li><atitle="一列布局"href="/div_css/903.shtml"target="_blank">一列布局</a></li><li><atitle="HTMLCSS基础知识"href="/div_css/902.shtml"target="_blank">HTMLCSS基础知识</a></li></ul></div>ul无序和ol有序列表这就是无序列表，是以ul包含li的形式，默认每行前的符号是圆点，可以通过样式表改为无、方块，空心圆等。有序列表是以ol包含li的形式，是以数字为项目符号的，无序列表也可以用css定义显示成有序列表，代码及显示效果如下：<divid="layout1"><ol><li><atitle="超链接伪类"href="/div_css/906.shtml"target="_blank">超链接伪类</a></li><li><atitle="纵向导航菜单"href="/div_css/905.shtml"target="_blank">纵向导航菜单</a></li><li><atitle="二列和三列布局"href="/div_css/904.shtml"target="_blank">二列和三列布局</a></li><li><atitle="一列布局"href="/div_css/903.shtml"target="_blank">一列布局</a></li><li><atitle="HTMLCSS基础知识"href="/div_css/902.shtml"target="_blank">HTMLCSS基础知识</a></li></ol></div>改变项目符号样式或用图片定义项目符号刚才说了项目符号默认是圆点，可以通过样式表改为其它形式，下面实际操作一下：<styletype="text/css">#layoutul{list-style:none;}#layoutulli{background:url(images/)no-repeat0px4px;padding-left:20px;}</style>横向图文列表横向图文列表是在上一步的基础上增加图片并让列表横向排列，最终实现效果如下：横向图文列表先插入如下的html代码<divid="layout"><ul><li><ahref="#"><imgsrc="images/pic.gif"width="68"height="54"/>三亚</a></li><li><ahref="#"><imgsrc="images/pic.gif"width="68"height="54"/>三亚</a></li><li><ahref="#"><imgsrc="images/pic.gif"width="68"height="54"/>三亚</a></li><li><ahref="#"><imgsrc="images/pic.gif"width="68"height="54"/>三亚</a></li><li><ahref="#"><imgsrc="images/pic.gif"width="68"height="54"/>三亚</a></li><li><ahref="#"><imgsrc="images/pic.gif"width="68"height="54"/>三亚</a></li><li><ahref="#"><imgsrc="images/pic.gif"width="68"height="54"/>三亚</a><