[互联网]DIVampCSS基础网页开发设计1.ppt

【第一步】我们要先做一个容器（要求：ID 为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；) div id=nav/div body,div{padding:0; margin:0;} #nav{ width:960px; height:35px; background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/ margin:0 auto;/*水平居中*/ margin-top:30px;/*顶部30px*/ } 【第二步】放导航条中的内容。 div id=nav ul liCSS 学习/li li学前准备/li li入门教程/li li提高教程/li li布局教程/li li精彩应用/li /ul /div #nav ul li{ float:left;} #nav ul{ width:960px; height:35px; } 【第三步】的文字全部贴着前面的文字。 设置li标签的宽度为100像素： #nav ul li{ width:100px; float:left; list-style:none; } #nav ul li{ width:100px; float:left; list-style:none; line-height:35px; } #nav ul li{ width:100px; float:left; list-style:none; line-height:35px; text-align:center; padding:0 10px; } 【第四步】 我们需要将上面的导航条做以下几个修改 1）给上面的导航加上链接； 2）链接文字大小修改为12px; 3）并且规定链接样式，鼠标移上去和拿开的效果 1）导航加链接，HTML 代码如下： div id=nav ul lia href=#CSS 学习/a/li lia href=#学前准备/a/li lia href=#入门教程下载/a/li lia href=#提高教程/a/li lia href=#布局基础教程/a/li lia href=#精彩应用/a/li /ul /div 2) 文字大小12 像素，CSS 代码如下 a{font-size:12px;} 3）鼠标移动上面和拿开效果 #nav ul li a{color:#333; text-decoration:none;} #nav ul li a:hover{color:#fff; text-decoration:underline;} 4）鼠标移上去后，链接的背景变成黑色的，下面是我的步骤 首先把链接a 加上一个背景，以方便看出来链接a 的区域 #nav ul li a{color:#333; text-decoration:none; background:#0FF;} 将a 的高度设定为35px 和盒子一样 于a 属于内联元素，内联元素是无法设置宽度和高度的，width 和height 只是针对块状元素，说道这里，解决办法就出来了，只要我们把内联元素a 转化成块状元素就可以了，我们用“display:block;”将内联元素转化成块状元素。 #nav ul li a{height:35px; color:#333; text-decoration:none; background:#0FF;} #nav ul li a{display:block; height:35px; color:#333; text-decoration:none; background:#0FF;} 让页面在IE6 中显示的和FF 中一样，要在a的CSS 代码中加入“float:left;” 要再加上一句话“ padding:0 10px;” #nav ul li a{display:block; height:35px; color:#333; text-decoration:none; background:#0FF; float:left;} ，a 链接中的背景去掉，移到a:hover 的CSS 代码中，并且颜色变成“#000” xilingsnow@163.com 测井培训之《网络技术及应用》 行内方式 p style=color:#F00; background:#CCC; font-size:12px;/p 内嵌方式 head/head之间，并且用style/style进行声明 链接方式 head/head之间，link href=“css文件路径 type=text/css rel=stylesheet / 优先级：高 低 标签选择器p{} 选择器组table,