以下代码实现纵向导航功能,并为导航添加了超链接(用#不可用的超链接代替),如下图所示

<!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>
<style type="text/css">
body{font-family:Verdana;font-size:18px;line-height:1.5;}
a{color:#000;text-decoration:none;}
 
a:hover{color:#F00;}                 //hover是为鼠标经过时字体颜色变为红色
#menu{width:100px;border:1px solid#CCC}
#menu ul{list-style:none;margin:0px;padding:0px;}
#menu ul li{background:#eee;padding:0px 8px;height:26px;line-height:26px;border-bottom:1px solid #CCC}
</style>
</head>

<body>
<div id="menu">
<ul>
<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>
<li><a href="#">新闻资讯</a></li>
</ul>
</div>
</body>
</html>

div +css 纵向导航相关推荐

  1. div+css 纵向导航菜单及二级菜单弹出

    1) 纵向导航菜单 <styletype="text/css"> body { font-family: Verdana;font-size: 12px; line-h ...

  2. html 纵向导航,div+css纵向导航如何实现且为导航添加超链接

    以下代码实现纵向导航功能,并为导航添加了超链接(用#不可用的超链接代替),如下图所示 复制代码代码如下: 无标题文档 body{font-family:Verdana;font-size:18px;l ...

  3. div css纵向显示 html,css如何设置竖排文字?

    有时候网页中的文字因为特别要求不能横向显示,这时候所需要的就是让文字来竖排显示,那么,网页中如何让文字竖排显示呢?接下来本篇文章将介绍css实现文字竖排显示的方法,希望对大家有所帮助. 方法一:使用w ...

  4. div+css 简单导航

    转载于:https://www.cnblogs.com/xiasimian/archive/2011/09/29/2195146.html

  5. div+css+jquery仿写HTML京东首页的练习及一些关于oo css的总结

    整个工程: https://download.csdn.net/download/weixin_43388844/10864383 前言 前几天看b站上极客学院的web前端开发第二部分时了解到OO C ...

  6. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程

    在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...

  7. 纵向导航css设置主要属性,纵向导航菜单

    纵向导航菜单也属于网站应用当中的一种重要形式,而纵向导航菜单指的是放置在网页左侧或者是右侧的从上至下排列的一种导航形式. 如图: 如图示代码结构: 如图显示,这次的Xhtml代码横向代码有点不同,没有 ...

  8. 水平导航菜单(DIV+CSS)

    水平导航菜单(DIV+CSS) 完全用DIV+CSS做的菜单,相比传统用图片做的打开速度更快.预览最终效果>> #nav{height: 44px;width: 425px;backgro ...

  9. 一个非常实用的 div+css 实现的导航条

    <div id="nav">   <ul>     <li><a href="http://www.52css.com/&quo ...

最新文章

  1. python-docx操作
  2. totalspider爬虫批量重启报错Connection Error
  3. 工程思想 ——【程序中的二进制】
  4. (22)Python-builtins-sorted()函数用法
  5. 《CSS权威指南》读书笔记10
  6. windowsxp主题包教大家如何制作windows7主题包
  7. 黑塞矩阵 Hessian Matrix
  8. Mac版网易云音乐打不开
  9. 美团外卖订单中心的演进
  10. 超震惊!!微软产品经理每天的工作内容竟然是这个...
  11. RMSE(均方根误差)、MSE(均方误差)、MAE(平均绝对误差)、SD(标准差)
  12. windows截图指令命令/cmd中截图指令
  13. Web大学生网页作业成品:基于html制作中国科技发展网站设计题材【航天之路7页】HTML+CSS+JavaScript
  14. 装了卡巴电脑更卡?原来是Trojan-PSW.Win32.QQPass等盗号木马群作梗2
  15. eclipse小应用程序||eclipse切换低版本JDK实现JavaAPPlet
  16. RJ45隔离变压器作用
  17. python星号和双星号的区别
  18. 艾伟也谈项目管理,关于项目管理的一点体会
  19. 数据传输POST心法分享,做前端的你还解决不了这个bug?
  20. Vue项目初期报错问题记录大全

热门文章

  1. Wave Driver介绍-5(Waveform Audio Driver Test测试Case描述)
  2. Maya2017下载安装与激活
  3. 大数据测试之ETL测试
  4. lxml中检查元素是否含有子元素时提示Use specific 'len(elem)' or 'elem is not None' test instead.暨len函数和is not None的区别
  5. 12个看起来真的很好吃的3D糖果
  6. proe PTC Pro_Engineer wildfire4.0 M040野火版 DVD32位
  7. [转]电影《不可征服》里的一首诗
  8. 服务器系统日志事件id41,系统不定时重启,事件ID41,任务类别63
  9. 密立根油滴实验的计算机仿真实验报告,密立根油滴实验报告
  10. linux跑wrf.exe程序的前提,用WRF模型进行气象模拟入门(3)——WRF的运行