详解学习DIV+CSS之二-导航栏实例

转载 2007年10月10日 13:29:00
<!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>彻底弄懂CSS盒子模式(导航栏实例详解)</title>
<style type="text/css">...
<!--
{...}{
 margin
: 0px;
 padding
: 0px;
 
}

#nav 
{...}{
 background
: url(http://www.hsptc.com/cssImg/bj.jpg) repeat-y;
 width
: 200px;
 overflow
: hidden;
}

#nav li 
{...}{
 background
: url(http://www.hsptc.com/cssImg/mylan.gif) no-repeat left center ;
 height
: 35px;
 width
: 190px;
 padding-top
:15px;
}


#nav a 
{...}{
 background
: url(http://www.hsptc.com/cssImg/lanbj2.gif) no-repeat left center;
 text-decoration
: none;
 height
: 20px;
 width
: 155px;
 display
: block;
 float
: right;
 padding
: 0px 0px 0px 5px;
 font-weight
: bold;
 font-size
: 9pt;
 line-height
: 20px;
 color
: #630;
 border-left
:10px solid #f90;
}


#nav a:hover 
{...}{
 background-image
: url(http://www.hsptc.com/cssImg/lanbj3.gif);
 color
: #FFFFFF;
}

-->
</style>
</head>

<body>
<ul id="nav">
 
<li>
   
<href="#">彻底弄懂CSS盒子模式1</a>
 
</li>
 
 
<li>
   
<href="#">彻底弄懂CSS盒子模式2</a>
 
</li>
 
 
<li>
   
<href="#">彻底弄懂CSS盒子模式3</a>
 
</li>
 
 
<li>
   
<href="#">彻底弄懂CSS盒子模式4</a>
 
</li>
 
 
<li>
   
<href="#">彻底弄懂CSS盒子模式5</a>
 
</li>
</ul>
</body>
</html>


 

 原文地址是 http://www.showweb.cn/info.asp?articleid=1384

DIV+CSS学习小结

DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统的通过表格布局定位的方式不同,它可以实现网页页面与表现想分离。 因为在牛腩还有JS都有大量的接触到CSS,到现在再学习DIV+CSS的时候...
  • u013044000
  • u013044000
  • 2015年05月17日 16:55
  • 1234

深度学习之卷积神经网络入门(2)

卷积神经网络入门学 原文地址:http://blog.csdn.net/hjimce/article/details/47323463 作者:hjimce 卷积神经网络算法是n年前就有的算法...
  • BigBzheng
  • BigBzheng
  • 2016年05月07日 17:27
  • 1652

机器学习入门系列之二---线性回归算法学习

线性回归算法学习还是使用系列一监督算法中涉及的案例(房价分析),那么我们如何使用线性回归算法呢?   首先我们要开始算法初始化设置工作:   设置算法训练数据集 (人工标注的正确答案数据设置) 算法...
  • firehadoop
  • firehadoop
  • 2017年04月09日 17:33
  • 326

swift学习- 扩展(二十一)

扩展,添加新功能。
  • go_fishing
  • go_fishing
  • 2015年10月14日 15:55
  • 201

PHP.5-DIV+CSS布局网站首页实例

DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html【页头、页脚、侧边栏和内容区域】 #避免各浏览器对...
  • ZiXuanFY
  • ZiXuanFY
  • 2016年10月13日 01:28
  • 994

利用div+css实现几种经典布局的详解,样式以及代码!

一、左右两侧,左侧固定宽度200px,右侧自适应占满 html代码 css代码 *{ margin: 0px; padding: 0px; ...
  • kongkongyou
  • kongkongyou
  • 2017年01月15日 14:15
  • 1785

OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习(上)

OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习(上)
  • champaignwolf
  • champaignwolf
  • 2016年12月07日 10:54
  • 614

Linux邻居协议 学习笔记 之二 通用邻居处理函数对应的数据结构的分析

在linux代码中,对于不同的邻居项,抽象出了一个通用的模型,通用邻居层,主要是用来进行邻居项的创建、添加、删除、查找、更新等操作。        对于通用邻居层,最主要的就是邻居项的状态机的设计,...
  • lickylin
  • lickylin
  • 2014年03月19日 22:14
  • 1478

div+css综合案例

实验一 基于HTML+CSS的新闻网站首页实现 一、实验目的 1. 了解和掌握HTML基本标签的用法 2.  了解和掌握网页布局(包括盒模型和样式表CSS) 3.  了解和掌握基本控件标签的...
  • ggGavin
  • ggGavin
  • 2013年11月29日 12:06
  • 2564

DIV+CSS实操一:经管系网页总体模块布局

首先我们先来打开经管系网页,看看网页效果是怎么样的。通过所学Web前端开发的知识,我们一步一步模仿出 标准的网页。我们知道DIV+CSS可以实现网页模块的总体布局,这基本取代了HTML中用table布...
  • erlian1992
  • erlian1992
  • 2015年11月19日 15:37
  • 2127
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:详解学习DIV+CSS之二-导航栏实例
举报原因:
原因补充:

(最多只允许输入30个字)