1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

2天驾驭DIV+CSS!第四课(下)

作者:用户 来源:互联网 时间:2016-06-26 16:46:11

导航链接backgrounda链接背景图片元素效果height

2天驾驭DIV+CSS!第四课(下) - 摘要: 本文讲的是2天驾驭DIV+CSS!第四课(下), 第四课的思路就是这样的,如果吃透了这节课,那么以后什么样子的导航都很轻易作出来,如果你在和js很好的结合起来用~你就可以很自信的向老板提出加薪了!!!^_^

第四课的思路就是这样的,如果吃透了这节课,那么以后什么样子的导航都很轻易作出来,如果你在和js很好的结合起来用~你就可以很自信的向老板提出加薪了!!!^_^

上节课我们将导航条做成了下面的效果
2天驾驭DIV+CSS!第四课(下)-2天驾驭div <a href=css">
【第四步】
我们需要将上面的导航条做以下几个修改
1)给上面的导航加上链接;
2)链接文字大小修改为12px;
3)并且规定链接样式,鼠标移上去和拿开的效果
修改方法如下
1)导航加链接,HTML代码如下:
<div id="nav">
    <ul>
     <li><a href="#">CSS学习</a></li>
        <li><a href="#">学前准备</a></li>
        <li><a href="#">入门教程下载</a></li>
        <li><a href="#">提高教程</a></li>
        <li><a href="#">布局基础教程</a></li>
        <li><a 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;}
效果是不是和下面一样,鼠标移上去变成白色的有下划线的链接
2天驾驭DIV+CSS!第四课(下)-一堂课学会div css
到这里,基本上一个导航条就出来了~不过为了能让大家再提高一个层次,KwooJan就帮大家对上面的导航条进行一下修改,算是抛砖引玉!
我希望鼠标移上去后,链接的背景变成黑色的,下面是我的步骤
首先把链接a加上一个背景,以方便看出来链接a的区域
#nav ul li a{color:#333; text-decoration:none; background:#0FF;}
怎么样,知道a的区域了吧
2天驾驭DIV+CSS!第四课(下)-div css课件
现在我要将a的高度设定为35px和盒子一样高度,这样我在把刚才的亮蓝色背景就可以完全覆盖下面盒子的灰色了
于是我插入下面红色的代码:
#nav ul li a{height:35px; color:#333; text-decoration:none; background:#0FF;}
可是不管我怎么刷新浏览器,高度都没有任何变化,这是为什么呢?!
原因就在于a属于内联元素,内联元素是无法设置宽度和高度的,width和height只是针对块状元素,说道这里,解决办法就出来了,只要我们把内联元素a转化成块状元素就可以了,我们用“display:block;”将内联元素转化成块状元素。大家先不要加这段代码,闭上眼想想界面会变成什么样子?
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none; background:#0FF;}
 实际效果:
2天驾驭DIV+CSS!第四课(下)-div css
IE6和FF显示效果居然大相径庭,IE6中为什么所有链接纵向排列了呢?其实这个也很简单,IE认为a既然转化成块状元素,就拥有块状元素的特性---霸道,它是不允许其他元素和它同一行,再加上也没有对a的宽度进行设定,所以才导致IE6中这么显示,不过FF中为什么不这样呢,和我们想象的一样,那是因为FireFox认为a即使为块状元素,也应该受到外面<li>元素的影响,所以如此现实,究竟以谁标准,因为大家都认为FF是标准浏览器,所以大家可以以FF为标准,不过KwooJan认为,不用管谁标准不标准,那都是相对的,我认为IE标准,FF就不标准了呢,我不愿意在这个问题上浪费精力,我更喜欢将精力用在思考如何提高页面的浏览器兼容性!
看到这里我想大家应该知道如何让页面在IE6中显示的和FF中一样,很简单,只需要在a的CSS代码中加入“float:left;”
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none; background:#0FF; float:left;}
问题迎刃而解,这还是用到前三节的课程内容,如果你想不起来如何解决,说明前面的课,特别是第二节的课,你没有真正理解!怎么做,你应该知道....回去再品品去
但是这样你不觉着,每个连接的左边和右边是不是太挤了,紧贴着a区域的左侧和右侧,应该怎么做?还是很简单,只需要再加上一句话“ padding:0 10px;”
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none; background:#0FF; float:left; padding:0 10px;}
现在再瞅瞅,是不是下面的效果
2天驾驭DIV+CSS!第四课(下)-div css教程
这样看看是不是不挤了吧,哈哈,看着舒服了吧,但是这离我们的想要的效果只有一步了,因为现在看到的连接效果是,鼠标移上去和拿开背景都是蓝色的,我们现在只需要将,a链接中的背景去掉,移到a:hover的CSS代码中,并且颜色变成“#000”就ok了~
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none; float:left; padding:0 10px;}
#nav ul li a:hover{color:#fff; text-decoration:underline; background:#000;}
怎么样,和下面的效果一样么?
2天驾驭DIV+CSS!第四课(下)-2天驾驭div css
效果好多了吧,这下是我们想要的效果了吧~
当然!大家还可以把背景不设置成黑色,用个图片也可以!现在大家明白,为什么一开始我说这款导航栏可以演变出成千上万的不同特色的导航栏了吧~万变不离其宗!
第四课的思路就是这样的,如果吃透了这节课,那么以后什么样子的导航都很轻易作出来,如果你在和js很好的结合起来用~你就可以很自信的向老板提出加薪了!!!^_^
下节节课我将给大家用浮动方法布局一个页面,敬请期待!
本节课全代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航制作 阿里西西收集</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>

<body>
<div id="nav">
 <ul>
     <li><a href="#">CSS学习</a></li>
        <li><a href="#">学前准备</a></li>
        <li><a href="#">入门教程下载</a></li>
        <li><a href="#">提高教程</a></li>
        <li><a href="#">布局基础教程</a></li>
        <li><a href="#">精彩应用</a></li>
    </ul>
</div>
</body>
</html>

/* CSS Document */
body,div,ul,li{padding:0; margin:0;}
a{font-size:12px;}
#nav{
 width:960px;
 height:35px;
 background:#CCC;
 margin:0 auto;/*水平居中*/
 margin-top:30px;/*顶部30px*/
}
#nav ul{
 width:960px;
 height:35px;
}
#nav ul li{
 height:35px;
 float:left;
 list-style:none;
 line-height:35px;
 text-align:center;
 padding:0 10px;
}
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none; float:left; padding:0 10px;}
#nav ul li a:hover{color:#fff; text-decoration:underline; background:#000;}


本文来自www.cssxuexi.cn *尊重他人劳动成果,转载请自觉注明出处! 



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索导航 , 链接 , background , a链接背景图片 , 元素 , 效果 height 2天驾驭div css、一堂课学会div css、div css课件、div css、div css教程,以便于您获取更多的相关知识。

css-CSS选择器的问题:.class.class{}

...式的 第二个是只有id2样式的 第三个是有id1 id2样式的 第四个是有id2 id1样式的 第五个是有id1样式的子节点有id2样式的 从演示代码可以看到,第三第四个的结果是一样的,说明.id1.id2中两个样式的顺序没有关系。也就是class="id1...

JavaScript驾驭网页-获取网页元素_javascript技巧

推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪。只是不用收拾列羹剩肴,但也没有办法享受美味的成果。 不过,你将能完整网页内容的HTML构成要素:更重要的...

【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器兼容

...宽,高,margin,padding  背景等都不继承。 继承的权重为0 第四节 定位技术 1.  xhtml+css 定位技术 DIV布局就是DIV+CSS,标准的说法应该是xhtml+css。是一种网站设计标准。在XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS...

初接触 Sass 与Compass 遇到的几个坑

...些预处理器是偷懒人士的做法,但现在发现应该是用CSS 驾驭得好的才能用好这些预处理器。提高效率的工具之所以能提高效率在于使用的人本身有能力驾驭这个工具(有点拗口)。并且很考验开发者的整体的重构能力,貌似一...

jQuery第四课 ——运动

jQuery第四课 ——运动,有需要的朋友可以参考下。 1.同时改变的是宽高透明度 show() 显示 hide() 隐藏 toggle() 切换显示 / 隐藏的状态 2、改变的是高 slideDown() 向下滑动展开 slideUp() 向上卷动隐藏 slideToggle() 以滑动...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备