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

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

作者:用户 来源:互联网 时间:2016-06-25 14:01:57

css标签div盒子的切换代码浏览器li宽度不符px效果多线程 35句细节宽度

2天驾驭DIV+CSS!第四课(上) - 摘要: 本文讲的是2天驾驭DIV+CSS!第四课(上), 其实理论都是一样的,只要你能理解并学会这节课的内容,以后再困难的导航条你都可以很应对,EASY !!! 课程开始:      前三节课,我们知道了什么是“

其实理论都是一样的,只要你能理解并学会这节课的内容,以后再困难的导航条你都可以很应对,EASY !!!

课程开始:
      前三节课,我们知道了什么是“内容块状元素和内联元素”,以及XHTML+CSS布局的核心概念“盒子模型”,同时又学习了一下页面布局中两种方法中的一种方法“浮动”,这次我们就利用这三个概念,来制作一款,经典的导航条,别看它其貌不扬,可是网上所有的导航条都可以再它的基础上修改而来哟~,厉害吧~!其实理论都是一样的,只要你能理解并学会这节课的内容,以后再困难的导航条你都可以很应对,EASY  !!!
      OK!我们要做的导航条的效果如下:
      鼠标移动上去背景变黑,并且字体颜色变成白色
2天驾驭DIV+CSS!第四课(上)-2天驾驭div <a href=css">
其实做这款导航条很容易的,你只需要动动鼠标敲敲键盘,跟着KwooJan做就是了,呵呵
【第一步】我们要先做一个容器(要求:ID为“nav”,宽度为960px,高度为:35px,位于页面水平正中,与浏览器顶部的距离是30px;),这个容器就是放我们的导航的哟~代码如下:
HTML代码:
<div id="nav"></div>

CSS代码:
#nav{
width:960px;
height:35px;
background:#CCC;/*为了便于查看区域范围大小,故而加个背景色*/
margin:0 auto;/*水平居中*/
margin-top:30px;/*顶部30px*/
}
还有一点需要提醒的是,为了页面在浏览器的兼容性,不要忘记在CSS文件顶部加入标签重置代码哟~
代码:
body,div{padding:0; margin:0;}
这里就不多说了,不明白的就看,课程顶部的课程关键词
怎么样,作出来了没有,效果是不是一个灰色条,位于页面的正中间,并且所有浏览器效果一样呢~呵呵
(如果没有做出来证明你没有认真看教程哟~用这种态度看教程会学不好的,本身我把整个XHTML+CSS的理论都压缩到教程里了,或者说教程的“知识点浓度”很高,有时需要你一字不漏的去品我说的话,不要一目十行的去看哟~只要你把我写的教程逐字逐句的研究透了,KwooJan保证你以后只要做出个页面就很Easy的兼容各种浏览器,并且代码绝对的精简!CSS文件加载速度大大提升哟~)

【第二步】
盒子做好了,我们就要往里面放导航条中的内容了“CSS学习 学前准备 入门教程 提高教程 布局教程 精彩应用”,如果我们把这内容(目前有6个),当成酒杯的话,如果直接放到盒子里面的话,肯定会乱,并且还会东倒西歪,一点顺序都没有,但是我们平时会用一个隔板将每个酒杯隔开,这样就是酒杯很有序的放入盒子,并且牢稳而且防震,方便使用!现在我们把这个隔板叫做“有序列表”起个英文名字叫:ul,里面的每个单元格我们也给起个英文名字叫“li”,大家想想里面的这个ul是不是和盒子里面的空间一样大,小了,酒杯照样放不稳,大了就放不进去了,所以我们定义UL的时候大小一定也要和外面的盒子大哟~,所以呢,我们的代码就知道怎么写了吧
 

HTML代码
<div id="nav">
    <ul>
        <li>CSS学习</li>
        <li>学前准备</li>
        <li>入门教程</li>
        <li>提高教程</li>
        <li>布局教程</li>
        <li>精彩应用</li>
    </ul>
</div>

CSS代码:
#nav ul{
        width:960px;
        height:35px;
}

效果作出来了没有,下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试,总结规律):
2天驾驭DIV+CSS!第四课(上)-一堂课学会div css
效果不一样吧,没关系,IE6中盒子被撑大,FF中却没有,但是我们的“酒杯”却出来了,还有我们不希望我们的酒杯纵向排列,而是横向排列,怎么办呢?给大家一分钟时间想~~~
想出来了没有?什么没有?
没关系,我带着大家想想,因为<li>标签也是块状元素,所以他也有块状元素的“霸道”,不允许其他元素和自己处于同一行,总共六个<li>,所以他们六个就像台阶似的纵向排列起来了,我提示到这里,大家应该知道怎么做才能让这些“酒杯”横向排列了吧!^_^
对喽~用浮动Float!可是让谁浮动呢,当然是<li>标签喽~代码如下: 
#nav ul li{ float:left;}
效果是不是和下面的一样呢
2天驾驭DIV+CSS!第四课(上)-div css课件
大家会发现虽然“酒杯”横向排列了,但IE6和FF中的效果还是不一样的
1)盒子(#nav)高度不一样
2) 在FF中“酒杯”前面有个大黑圆点,而IE6中却没有!
解决上面这两个问题,也很容易,如下
1)做到这里标签ul和li有没有进行重置?只要我们在页面中新写一个标签,就要进行重置,做法是,将ul、li标签加入重置代码中“body,div,ul,li{padding:0; margin:0;}”
2)“酒杯”前面的大黑圆点,是FF给li标签定义的默认样式,我们只需要将li的默认样式去掉就是了,在li标签的CSS属性中加入“list-style:none;”就OK了
现在在瞅瞅,两种浏览器的显示效果是不是和下图一样了呢~
2天驾驭DIV+CSS!第四课(上)-div css
如果你做到这里的效果和我说的不一样,没关系,我把做到目前第二步的代码发出来,你对着上面说的再看看,绝对可以学会,代码如下:
html代码:<!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>CSS学习</li>
        <li>学前准备</li>
        <li>入门教程</li>
        <li>提高教程</li>
        <li>布局教程</li>
        <li>精彩应用</li>
    </ul>
</div>
</body>
</html>
CSS代码:
/* CSS Document */
body,div,ul,li{padding:0; margin:0;}
#nav{
 width:960px;
 height:35px;
 background:#CCC;
 margin:0 auto;/*水平居中*/
 margin-top:30px;/*顶部30px*/
}
#nav ul{
 width:960px;
 height:35px;
}
#nav ul li{
 float:left;
 list-style:none;
}
【第三步】
第二步的效果还不是我们想要的,所有的“酒杯”都没有保持“车距”,后面的文字全部贴着前面的文字。
好~!我们现在就将他们分开!设置<li>标签的宽度为100像素:
CSS代码:
#nav ul li{
width:100px;
float:left;
list-style:none;
}
为了便于观察我们暂且将<li>标签的背景设置成红色(设置背景色,是页面布局中一个很重要的方法,便于查看块状元素区域范围) 
CSS代码:
#nav ul li{
width:100px;
float:left;
list-style:none;
background:#900;
}
效果如下:
2天驾驭DIV+CSS!第四课(上)-div css教程
瞧瞧,发现问题了吧,我们的<li>标签的高度并没有和我们的盒子的高度一样,这就是为什么在布局页面的时候,经常会设置一下背景色,就是这个道理,不然的话,你是发下不了隐藏的问题,但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降低哟~
现在暂不把<li>标签的背景色去掉,当我们把它调成我们需要的效果的时候再去掉!
继续,我们把li的高度设置成盒子的高度35像素,代码自己写,怎么样,高度一样了吧,但是文字却位于顶端,如何将它设置成居中呢,对喽~设置行距在<li>的CSS代码中再加入下面这句代码:
line-height:35px;
效果是不是和下图一样呢
2天驾驭DIV+CSS!第四课(上)-2天驾驭div css
好垂直居中解决了,轮到水平居中了,这个就容易了吧,直接在<li>的CSS代码中再加入下面这句代码:
text-align:center;
怎么样,效果有点意思了吧~到这里我再发一次代码,保证大家每个步骤都学会!代码如下:
HTML代码:<!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>CSS学习</li>
        <li>学前准备</li>
        <li>入门教程</li>
        <li>提高教程</li>
        <li>布局教程</li>
        <li>精彩应用</li>
    </ul>
</div>
</body>
</html>
CSS代码:
/* CSS Document */
body,div,ul,li{padding:0; margin:0;}
#nav{
 width:960px;
 height:35px;
 background:#CCC;
 margin:0 auto;/*水平居中*/
 margin-top:30px;/*顶部30px*/
}
#nav ul{
 width:960px;
 height:35px;
}
#nav ul li{
 width:100px;
 height:35px;
 float:left;
 list-style:none;
 background:#900;
 line-height:35px;
 text-align:center;
}
好~!做到这里,大家有没有想过一个问题,因为我们的<li>标签是设置了宽度为100像素,已经限定了它的宽度,如果文字多了它不会自动伸缩的自适应的,那这时候我们就需要去掉其宽度,这时候<li>的宽度就会缩小至文字的宽度,也就是说,如果我们再添加一些文字(把我们的酒杯换成一个大个的),这个<li>也会跟着变大,大家去掉宽度后试试,是不是这个样子,这样我们的导航条就比较灵活了,不会对“酒杯”的大小有所顾忌了!此时的代码:
<!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>CSS学习</li>
        <li>学前准备</li>
        <li>入门教程</li>
        <li>提高教程</li>
        <li>布局教程</li>
        <li>精彩应用</li>
    </ul>
</div>
</body>
</html>
/* CSS Document */
body,div,ul,li{padding:0; margin:0;}
#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;
 background:#900;
 line-height:35px;
 text-align:center;
}
虽然这个宽度自适应解决了,但是给文字的空间太少,视觉上感觉不舒服,那么我们就帮它扩大一下空间,但是又要保证宽度自适应,解决方法很容易,加上左右内边距就ok了,这里设置边距为10px,在<li>标签加上下面代码,顺便把背景颜色去掉
padding:0 10px;
效果是不是这样
2天驾驭DIV+CSS!第四课(上)-一堂课学会div css
无论你的“杯子”是增大还是缩小,<li>不但宽度会随之增大缩小,但是杯子和杯子之间的距离永远不变!怎么样有点意思吧~!
2天驾驭DIV+CSS!第四课(上)-div css课件
做到此时的源代码如下:
<!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>CSS学习</li>
        <li>学前准备</li>
        <li>入门教程下载</li>
        <li>提高教程</li>
        <li>布局基础教程</li>
        <li>精彩应用</li>
    </ul>
</div>
</body>
</html>
/* CSS Document */
body,div,ul,li{padding:0; margin:0;}
#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;
}



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



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索css , 标签 , div盒子的切换 , 代码 , 浏览器li宽度不符 , px , 效果 , 多线程  , 35句细节 宽度 2天驾驭div css、一堂课学会div css、div css课件、div css、div css教程,以便于您获取更多的相关知识。

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 驾驭得好的才能用好这些预处理器。提高效率的工具之所以能提高效率在于使用的人本身有能力驾驭这个工具(有点拗口)。并且很考验开发者的整体的重构能力,貌似一...

【JavaScript从入门到精通】第四课初探JavaScript魅力-04

第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性。此外,我们也提到过,JS用className控制元素的class。这两者之间,是否会产生什么矛盾吗。 我...

JavaScript驾驭网页-CSS与DOM_javascript技巧

推荐阅读:JavaScript驾驭网页-DOM DOM是种符合万维网标准的HTML操纵方式,它能比innerHTML特性达成更多操控功能 这里有HTML代码与CSS代码 无标题文档 span.class1{ background-color:#DDDDDD; } span.class2{ background-color:#221717; } Start Game S...

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

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

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

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