www.17rumen.com 一起入门视频教程下载

一直只是认识一些 html 标签， 但是何为 div + css ????

今天打算用一个演示来说明， 先看看 一个效果页面。

这是一个简单的网页导航菜单， 如果以前的话 我也许会使用 table 表格就可以做出来吧，

<table>
<tr>
 <td>首页</td>
 <td>新闻</td>
 <td>财经</td>
 <td>汽车</td>
 <td>。。。。</td>
</tr>
</table>

就是这样的一个表格， 再美化处理一下就可以。。

=====================

现在使用 div + css 来做效果页面出来。。。

首先理解一下 div ， 可以理解成 网页上的一个块，块的大小可以由你自己去设置，

还有块是否可见还是隐藏 等等 都可以，说再多还是很抽象 难以理解 ？

演示一下 你就明白了 ， 呵呵。

这是一个什么也没有的页面，修改一下标题栏

然后开始编写一个 div ，

<div>

</div>

这样的一个div标签对没有什么意义的，加入css进行定义 或者说控制吧，

<link rel="stylesheet" href="style.css" type="text/css" />
这是引用外部css文件，以前视频说过，不多说

下面新建 style.css 文件

还记得使用 css 定义的类吧 ，<div id="menu"> 呵呵。

#menu {
 width: 800px;
 height: 40px;
}

我们定义导航菜单的宽度和高度。我们看不到div块， 所以为div 加上边框

 border: 2px solid #eee;

看到了吧， 一个div块出来了， 2px solid 就是 线条大小， #eee 就是线条颜色
===============================

好了 ， div 方面的暂停一下了， 现在看看 ul li 这个标签

<p>
 <ul>
  <li>首页</li>
  <li>新闻</li>
  <li>财经</li>
  <li>汽车</li>
  <li>手机</li>
  <li>体育</li>
  <li>娱乐</li>
  <li>游戏</li>
  <li>论坛</li>
 </ul>
</p>

可是出来的效果是 竖着写的 菜单。。不是我们要的效果， 先别急，
把 ul li 放入 刚才的 div 里面。

然后现在来 用css 给 ul li 做个定义样式

#menu ul li {

 list-style: none;
}

list-style: none; 表示把 ul li原来的样式 去掉， 看到那些点去掉了吧，

但是字体 还是竖着写。。。 再加入一个

float: left;  这下 横着写了吧 ， 哈哈。

但是太拥挤了 字体， 看看我们的效果图吧， 分开的。

每个 li 加入宽度就可以了， width: 50px;

50px, 还是不够宽， 继续加大。。。80px 差不多了， 对了 px 就是像素的意思。

由于是 导航菜单， 我们把字体加粗，字体大小也控制一下，

现在基本和效果图 差不多了， 就是字体 太上了， 在边框顶部，

下面在div里加入一个 padding-top: 5px; 就是让字体距离边框顶部的距离为 5px;
还是不够下，， 改为 10px 看看。差不多了， 导航高度有点高， 对比效果图可以看到

 height: 40px; 改为 30px; 还是大了一点 改为 25px;  好了 完美， 呵呵。

下面就是 修改字体颜色了， 我推荐一个软件给大家

pickcolor(好色鬼-屏幕取色) ， 下面我安装一下， 看我如何使用吧，

点击那个软件的 4个小格其中一个 按住鼠标不要放， 然后 鼠标移动去要获取颜色的地方
 
看到了吧， 这样 就得到了 获取颜色的 数值了 在下面显示 #087DC6

然后 color: #087DC6;  这样就轻松得到了 字体颜色了。
下面到 链接 颜色 了。。没有用css 定义 <a> 标签没有什么效果。。。

<a> 标签的使用 和 样式，我们上次视频 演示过了， 这里我不加说明了，

只是演示。。。下面继续 屏幕获取颜色， #ff7900

还有 就是去掉 链接下面的下横线。。。

这样一个 导航菜单就出来了。。。。现在在ie浏览器上正常显示，

看看用其他浏览器 看看 效果怎样  Mozilla Firefox 3.5 上面测试一下 页面效果

。。。。。。无语， 出现乱了， 别急， 在 ul 上加上

#menu ul {
 margin-top: 0px;
}

这不就可以了嘛 。。。如果你是初次接触 div + css 可以先不用考虑 其他浏览器 是否正常 显示。

先保证在 ie 上正常显示。。 以后再考虑其他浏览器的问题

好了， 这就用 div + css 做出一个导航菜单栏了。。。

页面上的代码 可以说 是很简洁的， 很喜欢这种风格。。结束了 8

“div+css 06 认识div和ul li 并且用记事本手工编写div+css导航菜单”没有评论