实验六用CSS+DIV制作导航菜单

合集下载

用DIV+CSS实现网页顶部菜单效果

⽤DIV+CSS实现⽹页顶部菜单效果相应的html代码：<html><head><link href="3.css" type="text/css" rel="stylesheet"></head><body><div class="div1"><ul><li><a href="#" style="text-align:center;">⾸页</li><li><a href="#" style="text-align:center;">新闻中⼼<div class="div2"><ul><li><a href="#">我是新闻</li><li><a href="#">我是新闻</li><li><a href="#">我是新闻</li><li><a href="#">我是新闻</li></ul></div></li><li><a href="#" style="text-align:center;">产品展⽰</li><li><a href="#" style="text-align:center;">⼈才招聘</li><li><a href="#" style="text-align:center;">联系我们</li></ul></div></body></html> 其中对应的样式封装到⼀个css⽂件中：*{margin:0px;padding:0px;}.div1{width:530px;height:30px;background-color:pink;margin:0 auto;}.div1 ul{list-style-type :none;float:left;}.div1 ul li{float:left;margin-left:0px;width:105px;}.div1 ul li a{text-decoration:none;line-height:30px;display:block;padding-left:0px;border-left:1px solid white;}.div1 ul li a:hover{background-color:red;}.div2{width:105px;height:120px; background-color:pink; position:absolute;left:524px;top:30px;display:none;}.div2 ul{list-style-type :none; float:left;}.div2 ul li a{width:85px;text-decoration:none;line-height:29px; display:block;padding-left:20px;border-top:1px solid white; }.div1 ul li:hover .div2{display:block;}.div2 ul li a:hover{background-color:green;} 运⾏效果图如下：。

一款纯css实现的漂亮导航菜单（也适用于个人中心）

⼀款纯css实现的漂亮导航菜单（也适⽤于个⼈中⼼）今天给⼤家分享⼀款纯css实现的漂亮导航。

之前为⼤家分享过jquery实现的个⼈中⼼导航菜单，今天这款也是适合放在个⼈中⼼。

还带来图标，效果不错。

⼀起看下效果图：实现的代码。

html代码：XML/HTML Code复制内容到剪贴板1. <div class="l-main">2. <div class="menu">3. <header class="menu__header">4. <h1 class="menu__header-title">5. Incoming Messages</h1>6. </header>7. <div class="menu__body">8. <ul class="nav">9. <li class="nav__item"><a href="https://" class="nav__item-link is-active">10. <i class="fa fa-envelope nav__item-icon"></i><span class="nav__item-text">News</span>11. <span class="badge badge--warning">32</span> </a></li>12. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-flag nav__item-icon">13. </i><span class="nav__item-text">Priority</span> <span class="badge">8</span> </a>14. </li>15. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">16. </i><span class="nav__item-text">Assigned</span> <span class="badge">0/17</span> </a>17. </li>18. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-archive nav__item-icon">19. </i><span class="nav__item-text">Archived</span> <span class="badge">3</span> </a>20. </li>21. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-trash nav__item-icon">22. </i><span class="nav__item-text">Deleted</span> <span class="badge">9</span> </a>23. </li>24. <li class="nav__item"><a href="https://" class="nav__item-link"><span class="nav__item-text">25. Show all</span> </a></li>26. </ul>27. </div>28. </div>29. <div class="menu menu--small">30. <header class="menu__header">31. <h1 class="menu__header-title">32. Incoming</h1>33. </header>34. <div class="menu__body">35. <ul class="nav">36. <li class="nav__item"><a href="https://" class="nav__item-link is-active"><i class="fa fa-envelope nav__item-icon">37. </i><span class="badge badge--warning">32</span> </a></li>38. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-flag nav__item-icon">39. </i><span class="badge">8</span> </a></li>40. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">41. </i><span class="badge">0/17</span> </a></li>42. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-archive nav__item-icon">43. </i><span class="badge">3</span> </a></li>44. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-trash nav__item-icon">45. </i><span class="badge">9</span> </a></li>46. <li class="nav__item"><a href="https://" class="nav__item-link"><span class="nav__item-text">47. Show all</span> </a></li>48. </ul>49. </div>50. </div>51. </div> css代码：CSS Code复制内容到剪贴板1. body2. {3. background: #F4F4F4;4. font-family: Arial, sans-serif;5. font-size: 14px;6. font-weight: lighter;7. }8.9. .l-main10. {11. width: 530px;12. margin: 0 auto;13. }14.15. .menu16. {17. width: 250px;18. margin: 40px;19. background: #fff;20. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);21. border-radius: 5px;22. float: left;23. }24.25. .menu__header26. {27. background: #4B4F55;28. border-bottom: 1px solid #353A40;29. border-radius: 5px 5px 0 0;30. }31.32. .menu__header-title33. {34. color: #fff;35. padding: 15px;36. text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);37. }38.39. .menu__body40. {41. border-radius: 0 0 5px 5px;42. }43.44. .menu--small45. {46. width: 110px;48.49. .nav50. {51. list-style: none;52. }53.54. .nav__item55. {56. position: relative;57. }58.59. .nav__item-link60. {61. padding: 10px 15px;62. text-decoration: none;63. color: #8B8E93;64. display: block;65. border-bottom: 1px solid #F0F0F0;66. }67. .nav__item-link:hover68. {69. background: #f0f0f0;70. }71. .nav__item-link.is-active72. {73. background: #6E757F;74. color: #fff;75. border-bottom-color: #4B4F55;76. box-shadow: 0 1px 0 #7A828D inset;77. }78. .nav__item-link.is-active:after79. {80. content: '';81. display: block;82. position: absolute;83. top: 50%;84. rightright: -6px;85. margin-top: -6px;86. border-top: 6px solid transparent;87. border-bottom: 6px solid transparent;88. border-left: 6px solid #6E757F;89. }90. .nav__item-link.is-active .nav__item-icon91. {92. color: #fff;93. }94. .nav__item:last-child .nav__item-link95. {96. border-bottom: none;97. }98.99. .nav__item-icon100. {101. color: #D2D5DA;102. width: 20px;103. text-align: center;104. font-size: 18px;105. margin-right: 10px;106. }107.108. .badge110. font-size: 12px;111. padding: 2px 8px;112. border: 1px solid #D1D1D1;113. border-radius: 10px;114. position: absolute;115. top: 10px;116. rightright: 15px;117. }118.119. .badge--warning120. {121. background: #ED373F;122. border-color: #ED373F;123. } 以上就是今天分享的⼀款纯css实现的漂亮导航。

实验六用CSS+DIV制作导航菜单

CSS导航菜单（一级菜单）

CSS导航菜单（⼀级菜单）index.html<div class="nav"><ul><li><a href="#">Java</a></li><li><a href="#">C#</a></li><li><a href="#">Python</a></li><li><a href="#">Go</a></li><li><a href="#">Delphi</a></li></ul></div>请看注释 style.scss.nav {//导航栏⾼度height: 40px;//导航栏宽度width: 420px;//导航栏⾓度border-radius: 5px;//导航栏阴影box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);ul {li {//显⽰⽅式：inline⾏内但不能设置⼤⼩display: inline;//取消list前边的点list-style: none;a {//显⽰⽅式inline-block⼀⾏显⽰并可设置⼤⼩display: inline-block;//链接⾼度height: 40px;//链接宽度width: 60px;//⽂字对齐⽅式：居中text-align: center;//取消链接下划线text-decoration: none;//⽂字颜⾊color: #333;//⾏⾼度加上可设置⽂字上下居中对齐line-height: 40px;//过渡效果，这样⿏标移动上后颜⾊变换没那么⽣硬transition: background-color linear 0.2s;//⿏标移动上去以后的效果&:hover {//背景颜⾊background-color: royalblue;//⽂字颜⾊color: #fff;}}}}}效果。

CSS+div下拉菜单(js)

CSS+div:下拉菜单详解之前由于没有用到下拉菜单，一直没去实践（只在刚学建站时用DW做了一个，无代码亲自操作经历），今天终于抽出时间做了一个下拉菜单，IE6、IE7、/FF 下通用不变形，其实这个很基础，但对于往标准化转变有很好的促进作用。

先把关键点和思路摘录一下：1、结构布局：在菜单版块上，下拉的菜单也是放在UL中，但必需要嵌套在其父级的LI中，如下<div id=”nav”><ul id=”nav_top”><li id=”nav_index”><a href=”/”>首页</a></li><li><a href=”#”>CSS专栏</a><ul><li><a href=”#”>CSS基础</a></li><li><a href=”#”>CSS常用代码</a></li><li><a href=”#”>CSS高级技术</a></li></ul></li>… …</div>在这样的结构中，上层的DIV等标签不能用overflow:hidden; ，否则下拉菜单会出不来。

我清晰的记得，刚学DW建站的第一个月，就用DW做了一个下拉菜单，但现在回去去看，那个更多依靠的是JS，有时定位不准会产生下拉菜单跑位。

而这样嵌套后，一会通过定位，就不会偏移。

在实际应用时，nav可以加入LOGO 等内容，而nav_top才是用于控制菜单。

2、样式继承：由于在CSS中的组合选择符，会对其下的同样子标签会赋予同样的样式特征，因此，当我们对第一层的UL和LI定义时，下拉部分也会被带上同样的样式，先不管这个，最后再去修正下拉部分的UL和LI。

纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能。。。

纯css实现⼆级导航菜单效果,通过简单的⿏标事件操作页⾯元素样式变换实现⼆级导航菜单的功能。

HTML代码如下<div id="nav"><dl class="sy"><dt><a class="first" href="#" >⾸页</a></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="ty"><dt><a href="#">特约</a><ul><li class="tip"><a href="#" >签约请求</a></li><li><a href="#" >签约服务</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="bx"><dt><a href="#">保险</a><ul><li class="tip"><a href="#" >保险信息</a></li><li><a href="#" >新员投保</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="dd"><dt><a href="#">订单</a><ul><li class="tip"><a href="#" >订单管理</a></li><li><a href="#" >评价管理</a></li><li><a href="#" >维修记录</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="dp"><dt><a href="#">店铺</a><ul><li class="tip"><a href="#" >店铺设置</a></li><li><a href="#" >店铺信息</a></li><li><a href="#" >维修分类</a></li><li><a href="#" >维修品牌</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="fw"><dt><a href="#">服务</a><ul><li class="tip"><a href="#" >投诉管理</a></li> <li><a href="#" >退约记录</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="hf"><dt><a href="#">会费</a><ul><li class="tip"><a href="#" >年费/保证⾦</a></li> <li><a href="#" >店铺续约</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="zp"><dt><a href="#">招聘</a><ul><li class="tip"><a href="#" >招聘信息</a></li> </ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="tj"><dt><a href="#">统计</a><ul><li class="tip"><a href="#" >流量统计</a></li> <li><a href="#" >销售统计</a></li><li><a href="#" >⾏业分析</a></li></ul></dt><dd class="triangle"></dd></dl></div><style>#nav{float:left;margin-left:10px;margin-top:20px;}#nav dl{float:left;font-size:14px;padding-left:5px;position:relative;}#nav dt{float:left;display:block;width:48px;height:auto;text-align: center;line-height:30px;}#nav dt a{color:#999999;}#nav dl .first{color:#fff;font-weight:bold;}#nav .line{float:left;margin-top:6px;margin-left:4px;}#nav .triangle{display:none;background:url(../images/l_bgs_img.png);width:21px;height:13px;background-position:-256px -11px;position:relative;top:41px;left:14px;}#nav dt:hover{background:#fff;}#nav dt:hover a{color:#000;}#nav ul{display:none;width:auto;min-width:90px;height:auto;/*outline: 1px solid #000;*/border:1px solid #000;border-top:0;position:absolute;left:4px;z-index:2;}#nav ul .tip{margin-top:10px;}#nav li{width:auto;margin:6px 4px;}#nav li:hover{background:#555555;}#nav li:hover a{color:#fff;}#nav dt:hover ul{display:block;background:#fff;}</style>有⼀个⽹站的导航栏给我的印象不错,于是就把⽹页保存下来想研究⼀下它的js代码，没想到的是竟然是⽤.NET的⾃定义控件⽣成的！上⾯的代码差点没把我看晕过去！（有兴趣的话可以试⼀试哦，⾥⾯N多变量的～～～汗），还好⼤三时学过c＃（垃圾）加上它的控件可以试⽤，就下下来⽤了，感觉还真的不错，简单易⽤，可是～测试的时候差点没昏了！NND试⽤版的竟然只能再本机测试，别⼈的PC访问不但显⽰不了⽹页还警告说要注册购买⼤哥的竟然还要$（本少爷每⽉实习补助才1千￥啊），⼀怒之下决定⾃⼰封装⼀个。

使用CSS制作立体导航栏

使⽤CSS制作⽴体导航栏css制作的⽴体导航栏，具体实现代码如下所⽰：<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>CSS制作⽴体导航</title><link rel="stylesheet" href="/demo/css3/base.css"><style>body{background: #ebebeb;}.nav{width:560px;height: 50px;font:bold 0/50px Arial;text-align:center;margin:40px auto 0;background: #f65f57;/*制作导航圆⾓*/border-radius: 8px;/*制作导航⽴体效果*/box-shadow: 0 7px 0 #ba4a45;}.nav a{display: inline-block;/* a元素的过渡属性：1、设置所有a标签过渡；2、过渡时间；3、速度曲线：以慢速开始的过渡效果 */-webkit-transition: all 0.2s ease-in;/* Safari 和 Chrome */-moz-transition: all 0.2s ease-in;/* Firefox */-o-transition: all 0.2s ease-in;/* Opera */-ms-transition: all 0.2s ease-in;/* IE 9 */transition: all 0.2s ease-in;}.nav a:hover{/* ⿏标移上时的效果；定义2D旋转10度 */-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);}.nav li{position:relative;display:inline-block;padding:0 16px;font-size: 14px;text-shadow:1px 2px 4px rgba(0,0,0,.5);list-style: none outside none;}/*制作导航分隔线效果*/.nav li::before,.nav li::after{content:"";position:absolute;top:14px;height: 25px;width: 1px;}.nav li::after{right: 0;/* 线性渐变 */background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));}.nav li::before{left: 0;background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);}/*删除导航第⼀个导航项左边的分隔线*/.nav li:first-child::before{background: none;}/*删除导航最后⼀个导航右边的分隔线*/.nav li:last-child::after{background: none;}.nav a,.nav a:hover{color:#fff;text-decoration: none;}</style></head><body><ul class="nav"><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></body></html>效果图：总结：1、body部分⽤⽆序列表2、（1）hover ⿏标移上时的效果。

CSS导航栏创建操作步骤

垂直导航栏1. 创建名为navmenu.css的样式表文件2. 创建名为nav.html的HTML文件3. 在名为nav.html的HTML文件中通过属性→样式→附加样式表,导入名为navmenu.css的样式表文件4. 创建新样式如下:在选择器类型中选择:高级;在名称栏中输入:#navmenu定位设置:position: absolute;width: 150px;left: 25px;top: 50px;5. 创建列表和<div>标签在名为nav.html的HTML文件中,插入<div>标签和项目列表,并作相关的链接如下:<div id="navmenu"><ul ><li><a href="#">首页</a></li><li><a href="#">个人简历</a></li><li><a href="#">我的能力</a></li><li><a href="#">联系我</a></li></ul></div>6. 创建导航栏样式/*为所有的列表项定义字体外形和大小，删除标准项目符号，并清除列表中的空白和填充*/#navmenu ul {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;margin: 0px;padding: 0px;border: 1px solid #990000;list-style-type: none;}/*保证所出现底部的空白用于分隔每个列表项，两项之间为2px*/#navmenu li {margin-bottom: 2px;}/*将链接的激活区域扩展到一个块并添加背景图像、宽度和边框*/#navmenu a {background-image: url(images/listnav_out.jpg);display: block;width: 140px;padding-top: 2px;padding-right: 2px;padding-bottom: 2px;padding-left: 5px;border: 1px solid #cc9900;}/*当按钮处于标准或已按状态时定义其文本外观，制定一种特别的颜色并清除连接的下划线,此项定义在标签#navmenu 中正常链接、已访问链接的样式*/#navmenu a:link,#navmenu a:visited {color: #993300;text-decoration: none;}/*在跳转状态中交换图像并改变文本颜色*/#navmenu a:hover {color: #ffffff;background-image: url(images/listnav_over.jpg);border: 1px dotted #990000;}/*设定所选按钮的外观和感觉，在导航栏中指示当前页面*/#selnavmenu a:link,sel#navmenu a:visited,#selnavmenu a:hover {color: #ffffff;background-image: url(images/listnav_over.jpg);border: 1px dotted #990000;}水平导航步骤一:创建名为:menunav.html文件，创建一个项目列表（文本→列表→项目列表<ul><li><a href="#">学生信息</a></li><li><a href="#">学费信息</a></li><li><a href="#">报到信息</a></li><li><a href="#">就业信息</a></li></ul>效果如下：•学生信息•学费信息•报到信息•就业信息步骤二:隐藏li的默认样式定义CSS如下:<style type="text/css"><!--/*表示定义的样式将作用在menunav的层里的ul标签上。

CSS导航菜单（二级菜单）

CSS导航菜单（⼆级菜单）index.html<div class="nav"><ul><li><a href="#">Java</a><ul class="subnav"><li><a href="#">Java⼊门</a></li><li><a href="#">Java中级</a></li><li><a href="#">Java⾼级</a></li></ul></li><li><a href="#">C#</a><ul class="subnav"><li><a href="#">C#⼊门</a></li><li><a href="#">C#中级</a></li><li><a href="#">C#⾼级</a></li></ul></li><li><a href="#">Python</a><ul class="subnav"><li><a href="#">Python⼊门</a></li><li><a href="#">Python中级</a></li><li><a href="#">Python⾼级</a></li></ul></li><li><a href="#">Go</a></li><li><a href="#">Delphi</a></li></ul></div>style.scss只将跟⼆级菜单相关的写了注释.nav {height: 40px;width: 420px;border-radius: 5px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);ul {li {display: inline-block;list-style: none;//⼆级菜单相对位置position: relative;//⼆级菜单的hover事件⼀定要写在⽗元素才起作⽤&:hover .subnav {display: block;}a {display: inline-block;height: 40px;width: 60px;text-align: center;text-decoration: none;color: #333;line-height: 40px;transition: background-color linear 0.2s;&:hover {background-color: royalblue;color: #fff;}}.subnav {//取消显⽰display: none;//菜单宽度width: 150px;//显⽰⽅式：绝对定位position: absolute;//距离顶部距离，因为相对定位设置的为li元素，所以设置为菜单⾼度top: 40px;//相对定位的左边距离left: 0;//padding设置为0 不然左边会有⼀段距离padding: 0;//菜单背景颜⾊background-color: #fff;//菜单阴影box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); //菜单圆⾓border-radius: 0 0 5px 5px;//⿏标放上去背景颜⾊圆⾓部分隐藏overflow: hidden;//防⽌被其他元素挡住z-index: 1;li {list-style: none;a {//显⽰为块状元素display: block;//导航宽度width: 140px;//⽂字对齐⽅式text-align: left;//增加左距padding-left: 10px;//⿏标放上去的背景颜⾊&:hover {background-color: royalblue;}}}}}}}。

垂直二级导航菜单用div+CSS架构实例

垂直二级导航菜单用div+CSS架构实例导航的结构导航的本质是让浏览者更好的访问你的网站,所以要建立有意义的语义.使CSS和语义相符合,为了以后方便维护，注意要避免现有浏览器的不兼容。

解决方案下面是导航的HTML和CSS的代码,效果如图.这是创建导航的HTML代码=========================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" lang="en-US"><head><title>Lists as navigation</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="listnav1.css" /></head><body><div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div></body></html>============================使用CSS给上面代码添加效果=====================#navigation {width: 200px;}#navigation ul {list-style: none;margin: 0;padding: 0;}#navigation li {border-bottom: 1px solid #ED9F9F;}#navigation li a:link, #navigation li a:visited { font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}======================分析:先创建一个无序列表的导航条,并做好导航链接. ========================<ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul>========================然后用一个div把这个无序列表包含起来.===========================<div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div>==============================在浏览器中显示默认的样式.接下来我们要做的第一件事是给这个div定义宽度. ===================#navigation {width: 200px;}=====================给列表添加样式,去掉默认的圆点和清除填充.========================#navigation ul {list-style: none;margin: 0;padding: 0;}========================在浏览器中显示:给li标签添加一个下划线==========================#navigation li {border-bottom: 1px solid #ED9F9F;}==============================给链接添加样式:===============================#navigation li a:link, #navigation li a:visited { font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515; background-color: #B51032;color: #FFFFFF;text-decoration: none;}=============================在上面可以看到这个CSS是添加了左右边框,并且使对象块状,这样做的效果使链接看起来像一个按扭.这种效果看起来像是给导航添加一个图片似的.使用CSS创建一个没有图像和javascript的导航导航功能常常具有翻转的效果:比如说一个浏览者把鼠标放在按扭上,按扭就会显示出另一张图片,来突出效果.要实现这个效果,则要两张图像和javascript.解决方案：使用CSS来创建上面的那个效果比用图像来创建要简单的多.在CSS要现实翻转这个效果用到hover伪类选择器。

DIV+CSS布局下拉菜单制作

DIV+CSS布局下拉菜单制作DIV+CSS布局下拉菜单制作代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">.menu {font-family: verdana, sans-serif;width:750px;position:relative;font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0;margin:0;list-style-type: none;}.menu ul li {float:left;position:relative;}.menu ul li a, .menu ul li a:visited {display:block;text-decoration:none;color:#000;width:139px;height:3em;color:#000;border:1px solid #fff;border-width:1px 1px 0 0;background:#dfc184;padding-left:10px;line-height:3em;}* html .menu ul li a, .menu ul li a:visited {width:149px;w\idth:139px;}.menu ul li ul {display: none;}table {margin:-1px;border-collapse:collapse;font-size:1em;}/* specific to non IE browsers */.menu ul li:hover a {color:#fff;background:#bd8d5e;}.menu ul li:hover ul {display:block;position:absolute;top:3em;margin-top:1px;left:0;width:150px;}.menu ul li:hover ul li ul {display: none;}.menu ul li:hover ul li a { display:block;background:#faeec7;color:#000;height:auto;line-height:1.2em;padding:5px 10px;width:129px}.menu ul li:hover ul li a.drop { background:#c9c9a7;}.menu ul li:hover ul li a:hover { background:#c9c9a7;color:#000;}.menu ul li:hover ul li:hover ul { display:block;position:absolute;left:150px;top:0;width:150px;}.menu ul li:hover ul li:hover ul.left { left:-150px;}</style></head><body><div class="menu"><ul><li><a class="drop" href="/">DEMOS</a><table><tr><td><ul><li><a href="/" title="The zero dollar ads page">zero dollars advertising page</a></li><li><a href="/" title="Wrapping text around images">wrapping text around images</a></li><li><a href="/" title="Styling forms">styled form</a></li><li><a href="/" title="Removing active/focus borders">active focus</a></li><li><a class="drop" href="/" title="Hover/click with no active/focus borders">hover/click with no borders </a><table><tr><td><ul></body></html>。

制作菜单 css实验报告

制作菜单css实验报告实验目的本次实验的目的是利用CSS 技术制作一个菜单，在页面上展示出简洁、美观的效果，并能够实现一定的交互功能。

实验过程1. 准备工作在开始实验前，需要准备好实验所需要用到的素材和工具。

素材包括页面所需的图标、背景颜色、字体等。

工具则是指能够编写和调试CSS 代码的文本编辑器和浏览器。

2. 页面布局通过HTML 标签构建出一个基本的页面结构，包括`<header>`、`<nav>` 和`<ul>` 等标签。

然后使用CSS 选择器为这些标签设置样式，实现菜单的基本布局。

3. 设置菜单样式给`<ul>` 标签设置`list-style: none;`，去掉默认的列表样式。

然后设置菜单项的样式，比如字体、字号、颜色等。

根据需要设置菜单项的悬停效果、点击效果等。

4. 实现交互功能通过CSS 伪类选择器`:hover` 和`:active`，设置菜单在鼠标悬停和点击时的效果。

可以改变菜单项的背景色、字体颜色等，以实现交互效果。

5. 调试和优化在实验过程中，可能会出现一些样式不生效、布局不正确等问题。

此时，需要使用开发者工具进行调试，并根据需要进行调整和优化。

实验结果经过以上步骤的操作和调试，最终得到了一个满足要求的菜单。

菜单看起来简洁美观，能够在悬停和点击时表现出不同的样式效果。

通过调试和优化，菜单在不同浏览器和设备上也能够正常显示和交互。

总结与反思通过本次实验，我深入了解了CSS 的一些基本应用，学会了利用CSS 技术制作并优化一个菜单。

在实验过程中，我遇到了布局问题和样式不生效的情况，但通过调试和查找资料，最终解决了这些问题。

同时，我还学会了如何使用开发者工具进行调试，提高了解决问题的效率。

然而，由于时间和技术限制，本次实验中的菜单还有一些不足之处，比如交互效果不够丰富、页面响应不够灵活等。

希望在以后的学习中，能够进一步提升自己的CSS 技术水平，设计出更加精美、复杂的界面。

div+css顶部导航(含二级菜单)

}
nav ul li{
float:left;
color:red;
}
nav ul::after{
content:"";
display:block;
clear:both;
}
nav ul li a{
display:block;
padding:8px 40px 8px 40px;
color:#333;
text-decoration:none;
}
nav ul ul li{
float:none;
border-top:0px solid #6b727c;
border-bottom:1px solid #575f6a;
height:auto;
text-align:center;
opacity:1;
position:relative;
z-index:3;
}
nav ul{
padding-left:10px;
padding-right:10px;
display:inline-table;
position:relative;
list-style-type:none;
text-align:center;
margin:0;
}
nav ul ul{
display:none;
font-family:微软雅黑;
font-size:20px;
text-align:center;
}
nav ul li:hover>ul{
display:block;
padding:0px;
}
nav ul li:hover{

CSS制作导航栏

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; }
6
西北工业大学软件与微电子学院
综合创作训练实验指导书
现在我们要将 a 的高度设定为 35px 和盒子一样高度，这样我们在把刚才的亮蓝色背景就可以完全覆盖下面盒子的灰色了，于是我们插入下面红色的代码：
#nav ul li a{height:35px; color:#333; text-decoration:none; background:#0FF;}
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none; background:#0FF;}
IE 内核浏览器下的效果：
Firefox 下的效果：
IE 和 FF 显示效果居然大相径庭，IE 中为什么所有链接纵向排列了呢？其实这个也很简单，IE 认为 a 既然转化成块状元素，就拥有块状元素的特性--- 霸道，它是不允许其他元素和它同一行，再加上也没有对 a 的宽度进行设定，所以才导致 IE 中这么显示，不过 FF 中为什么不这样呢，和我们想象的一样，那是因为 FireFox 认为 a 即使为块状元素，也应该受到外面<li>元素的影响，所以如此现实，究竟以谁标准，因为大家都认为 FF 是标准浏览器，所以大家可以以 FF 为标准，不过不用管谁标准不标准，那都是相对的，认为 IE 标准，FF 就不标准了呢，我们不愿意在这个问题上浪费精力，我们更喜欢将精力用在思考如何提高页面的浏览器兼容性！

CSS+DIV页面布局实验

width:226px;
border: 1px solid red;
float: left;
margin-top: 15px;
}
.special{
width: 1226px;
height: 438px;
border: 1px solid red;
margin-right: auto;
margin-left: auto;
background-color:yellow;
margin-right: auto;
margin-left: auto;
}
.product{
height: 420px;
width:1226px;
margin-right: auto;
margin-left: auto;
border: solid red;
width: 1226px;
border: 1px solid red;
margin-right: auto;
margin-left: auto;
}
.p5{
height: 150px;
width: 798px;
border: 1px solid red;
float: left;
}
.p6{
height: 150px;
float: left;
}
.special>.shop1{
height: 380px;
width: 232.5px;
border: 1px solid red;
margin-left:15px;
float: left;
}
.special>.shop2{
height: 58px;

打造最美CSS多级下拉横向导航菜单代码

打造最美CSS多级下拉横向导航菜单代码本⽂实例为⼤家分享了纯CSS实现多级下拉横向导航菜单代码，供⼤家参考，具体内容如下先看看效果图：实现代码：CSS代码：CSS Code复制内容到剪贴板1. <style type="text/css">2. /* for this demo only */3. #backgroundHolder { width:750px; height:500px; padding-top:10px; margin:0 auto; }4. /* ---------------------------------------------------------------------------- */5. /* default styling */6. .nav, .nav ul { list-style-type:none; margin:0; padding:0; }7. .nav a { text-decoration:none; }8. .nav { font-family: arial, sans-serif; font-size:12px; width:650px; margin:0 auto; }9. /* style the links */10. .nav a { background:url(ulmulti3/box.gif) no-repeat rightright center; }11. .nav a.top { background:url(ulmulti3/box.gif) no-repeat rightright top; }12. .nav a.top2 { background:url(ulmulti3/box2.gif) no-repeat rightright top; }13. .nav a.bottombottom { background:url(ulmulti3/box.gif) no-repeat rightright bottombottom; }14. .rightright ul ul a { background:url(ulmulti3/box3.gif) no-repeat rightright center; }15. .rightright ul ul a.top2 { background:url(ulmulti3/box3.gif) no-repeat rightright top; }16. .rightright ul ul a.bottombottom { background:url(ulmulti3/box3.gif) no-repeat rightright bottombottom; }17. /* style the <b> element so that is does not affect the size of the link */18. .nav a b { color:#fff; font-weight:normal; display:block; padding:5px 10px 5px 15px; }19. .nav .fly .main b { background: transparent url(ulmulti3/arrow.gif) no-repeat 117px 9px; }20. .nav .down b { background: transparent url(ulmulti3/arrow2.gif) no-repeat 115px 11px; }21. .nav .rightright ul b { text-align:rightright; }22. .nav .rightright ul ul b { padding: 5px 15px 5px 10px; }23. .nav .rightright ul .main b { background: transparent url(ulmulti3/arrow3.gif) no-repeat 15px 9px; text-align:rightright; }24. .nav .rightright ul ul .main b { background: transparent url(ulmulti3/arrow3.gif) no-repeat 5px 9px; text-align:rightright; }25. /* HEIGHT */26. .nav ul ul { top:-24px; } /* position the top of the flyout first sub menus */27. .nav ul ul ul { top:-25px; } /* position the top of the flyout second and third sub menus */28. .nav ul.two { top:-40px; } /* position the top of the flyout sub menus with previous text on two lines */29. /* WIDTH change this WITH CARE to suit your requirements */30.31. /*set the link width here*/32. .nav .drop, .nav a { width:130px; }33. .nav ul li { max-width:130px; } /* fix for IE8 */34. /* set the left flyout position here */35. .nav ul ul { left:130px; }36. /* set the right flyout position here */37. .nav li.rightright ul ul { left:auto; rightright:120px; }38. .nav li.rightright ul ul ul { left:auto; rightright:130px; }39. /* make this WIDTH - 1px */ /* or WIDTH - 0.063em if using em sizing */40. .nav a { margin-right:-129px; }41. /* ---------------------------------------------------------------------------- */42.43. /* DO NOT CHANGE ANYTHING BELOW */44. .nav li { float:left; } /* fixes IE bugs, and allows for clearing */45. .nav ul { float:left; position:relative; z-index:20; } /* necessary for float drop and to stack the <ul>s */46. .nav ul li { clear:left; } /* must clear the floated list item inside sublist */47. .nav a { position:relative; display:block; } /* needs to have a position, to be above the rest */48. .nav a.main { float:left; /* necessary for float drop */ margin-top:10000px; } /* bring the top level links back into view */49. .nav .drop, .nav .fly { margin-top:-10000px; } /* hide the sub links and their containers, opera has low upper limits */50. .nav ul { margin-bottom:-5000px; } /* avoid any interaction between the subs, can be any large size */51. /* The bit that does ALL the work to bring the sub menus into view */52.53. .nav a:hover, .nav a:focus, .nav a:active { margin-right:0; z-index:10; outline:0; }54. .nav a:hover b, .nav a:focus b, .nav a:active b { color:#000; cursor:pointer; } /* this is for keyboard tabbing color change */55. /* OPERA fix */56. .nav ul:hover, .nav ul ul:hover { clear:left; } /* to stop intermittent sub link :hover problems */57.58. /* ---------------------------------------------------------------------------- */59. </style>60. <!--[if lte IE 7]>61. <style type="text/css">62. /* bug fixes for IE7 and lower - DO NOT CHANGE */63. .nav .fly {width:99%;} /* make each flyout 99% of the prevous level */64. a:active {} /* requires a blank style for :active to stop it being buggy */65. </style>66.html代码：XML/HTML Code复制内容到剪贴板1. <body>2. <div id="backgroundHolder">3. <ul class="nav">4. <li class="drop"><a class="main top" href="#url"><b>Home</b></a></li>5. <li class="drop"><a class="main down top" href="#url"><b>Equipment</b></a>6. <ul>7. <li class="fly"><a class="main" href="#url"><b>Cameras</b></a>8. <ul>9. <li><a class="top2" href="#url"><b>Film Type</b></a></li>10. <li><a href="#url"><b>Compact</b></a></li>11. <li><a href="#url"><b>Polaroid</b></a></li>12. <li><a href="#url"><b>Digital</b></a></li>13. <li class="fly"><a class="main" href="#url"><b>Digital SLR</b></a>14. <ul>15. <li><a class="top2" href="#url"><b>Canon</b></a></li>16. <li><a href="#url"><b>Nikon</b></a></li>17. <li><a href="#url"><b>Panasonic</b></a></li>18. <li><a class="bottom" href="#url"><b>Kodak</b></a></li>19. </ul>20. </li>21. <li><a class="bottom" href="#url"><b>Second Hand</b></a></li>22. </ul>23. </li>24. <li class="fly"><a class="main" href="#url"><b>Video Cameras & Accessories</b></a>25. <ul class="two">26. <li class="fly"><a class="main top2" href="#url"><b>Latest Models</b></a>27. <ul>28. <li><a class="top2" href="#url"><b>Nikon</b></a></li>29. <li><a href="#url"><b>Panasonic</b></a></li>30. <li><a href="#url"><b>Canon</b></a></li>31. <li><a href="#url"><b>Pentax</b></a></li>32. <li><a class="bottom" href="#url"><b>Minolta</b></a></li>33. </ul>34. </li>35. <li><a href="#url"><b>Special Offers</b></a></li>36. <li><a class="bottom" href="#url"><b>Professional</b></a></li>37. </ul>38. </li>39. <li class="fly"><a class="main" href="#url"><b>Lenses</b></a>40. <ul>41. <li class="fly"><a class="main top2" href="#url"><b>Digital</b></a>42. <ul>43. <li><a class="top2" href="#url"><b>Standard</b></a></li>44. <li><a href="#url"><b>Telephoto</b></a></li>45. <li><a href="#url"><b>Wide Angle</b></a></li>46. <li class="fly"><a class="main" href="#url"><b>Zoom</b></a>47. <ul>48. <li><a class="top2" href="#url"><b>Nikon</b></a></li>49. <li><a href="#url"><b>Pentax</b></a></li>50. <li><a href="#url"><b>Minolta</b></a></li>51. <li><a class="bottom" href="#url"><b>Panasonic</b></a></li>52. </ul>53. </li>54. <li class="fly"><a class="main" href="#url"><b>Zoom with Macro</b></a>55. <ul>56. <li><a class="top2" href="#url"><b>Panasonic</b></a></li>57. <li><a href="#url"><b>Minolta</b></a></li>58. <li><a href="#url"><b>Pentax</b></a></li>59. <li><a href="#url"><b>Canon</b></a></li>60. <li><a class="bottom" href="#url"><b>Nikon</b></a></li>61. </ul>62. </li>63. <li><a href="#url"><b>Fisheye</b></a></li>64. <li><a class="bottom" href="#url"><b>x2 converters</b></a></li>65. </ul>66. </li>67. <li class="fly"><a class="main" href="#url"><b>Standard SLR</b></a>68. <ul>69. <li><a class="top2" href="#url"><b>Canon</b></a></li>70. <li><a href="#url"><b>Nikon</b></a></li>71. <li><a href="#url"><b>Panasonic</b></a></li>72. <li><a href="#url"><b>Pentax</b></a></li>73. <li><a class="bottom" href="#url"><b>Minolta</b></a></li>74. </ul>75. </li>76. <li><a href="#url"><b>Cases</b></a></li>77. <li class="fly"><a class="main" href="#url"><b>Large Format</b></a>78. <ul>79. <li><a class="top2" href="#url"><b>Hasselblad</b></a></li>80. <li><a href="#url"><b>Arca-Swiss</b></a></li>81. <li><a class="bottom" href="#url"><b>Leica</b></a></li>82. </ul>83. </li>84. <li><a href="#url"><b>Lens Hoods</b></a></li>85. <li><a class="bottom" href="#url"><b>Lens Cleaners</b></a></li>86. </ul>87. </li>88. <li><a href="#url"><b>Tripods</b></a></li>89. <li><a href="#url"><b>Flashguns</b></a></li>90. <li><a href="#url"><b>Accessories, filters & lens covers</b></a></li>91. <li><a href="#url"><b>Special Offers</b></a></li>92. <li><a class="bottom" href="#url"><b>Electronics</b></a></li>93. </ul>94. </li>95. <li class="drop"><a class="main down top" href="#url"><b>Accessories</b></a>96. <ul>97. <li class="fly"><a class="main" href="#url"><b>Flashguns</b></a>98. <ul>99. <li class="fly"><a class="main top2" href="#url"><b>Digital Cameras</b></a> 100. <ul>101. <li><a class="top2" href="#url"><b>Nikon</b></a></li>102. <li><a href="#url"><b>Canon</b></a></li>103. <li><a href="#url"><b>Panasonic</b></a></li>104. <li><a href="#url"><b>Pentax</b></a></li>105. <li><a class="bottom" href="#url"><b>Kodak</b></a></li>106. </ul>107. </li>108. <li><a href="#url"><b>Film Cameras</b></a></li>109. <li><a href="#url"><b>Reflectors</b></a></li>110. <li><a href="#url"><b>Stands</b></a></li>111. <li><a href="#url"><b>Remote Control</b></a></li>112. <li><a class="bottom" href="#url"><b>Batteries</b></a></li>113. </ul>114. </li>115. <li class="fly"><a class="main" href="#url"><b>Filters</b></a>116. <ul>117. <li><a class="top2" href="#url"><b>Ultra Violet</b></a></li>118. <li><a href="#url"><b>Lens protection</b></a></li>119. <li><a href="#url"><b>Yellow</b></a></li>120. <li><a href="#url"><b>Red</b></a></li>121. <li><a href="#url"><b>Orange</b></a></li>122. <li><a class="bottom" href="#url"><b>Blue</b></a></li>123. </ul>124. </li>125. <li class="fly"><a class="main" href="#url"><b>Remote Control</b></a> 126. <ul>127. <li><a class="top2" href="#url"><b>Canon</b></a></li>128. <li><a href="#url"><b>Nikon</b></a></li>129. <li><a class="bottom" href="#url"><b>Pentax</b></a></li>130. </ul>131. </li>132. <li class="fly"><a class="main" href="#url"><b>Camera Cases</b></a> 133. <ul>134. <li><a class="top2" href="#url"><b>Pentax</b></a></li>135. <li><a href="#url"><b>Nikox</b></a></li>136. <li><a href="#url"><b>Canon</b></a></li>137. <li><a href="#url"><b>Pentax</b></a></li>138. <li><a href="#url"><b>Kodak</b></a></li>139. <li><a class="bottom" href="#url"><b>Minolta</b></a></li>140. </ul>141. </li>142. <li><a class="bottom" href="#url"><b>Lens Brush</b></a></li>143. </ul>144. </li>145. <li class="drop right"><a class="main down top" href="#url"><b>Outlets</b></a> 146. <ul>147. <li><a href="#url"><b>Support</b></a></li>148. <li><a href="#url"><b>Buying</b></a></li>149. <li><a href="#url"><b>Photographers</b></a></li>150. <li class="fly"><a class="main" href="#url"><b>Stockist</b></a>151. <ul>152. <li><a class="top2" href="#url"><b>Currys</b></a></li>153. <li><a href="#url"><b>Dixons</b></a></li>154. <li><a href="#url"><b>Jessops</b></a></li>155. <li><a class="bottom" href="#url"><b>Staples</b></a></li>156. </ul>157. </li>158. <li><a href="#5"><b>General</b></a></li>159. <li class="fly"><a class="main bottom" href="#url"><b>Sales</b></a>160. <ul>161. <li><a class="top2" href="#url"><b>USA</b></a></li>162. <li><a href="#url"><b>CANADA</b></a></li>163. <li><a href="#url"><b>South America</b></a></li>164. <li class="fly"><a class="main" href="#url"><b>Europe</b></a>165. <ul>166. <li><a class="top2" href="#url"><b>Britain</b></a></li>167. <li><a href="#url"><b>France</b></a></li>168. <li><a href="#url"><b>Germany</b></a></li>169. <li><a href="#url"><b>Spain</b></a></li>170. <li><a class="bottom" href="#url"><b>Italy</b></a></li>171. </ul>172. </li>173. <li><a href="#url"><b>Australia</b></a></li>174. <li><a class="bottom" href="#url"><b>Asia</b></a></li>175. </ul>176. </li>177. </ul>178. </li>179. <li class="drop"><a class="main top" href="#url"><b>Privacy Policy</b></a></li> 180. </ul>181. </div>182. <br>183. <br>184. <div align="center"> </div>185.186. </body>源码下载：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

使用CSS制作导航菜单

使⽤CSS制作导航菜单⽅式⼀：直接编写代码实现代码如下：<html><head><title>⽆需表格的菜单</title><style></style></head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">News</a></li><li><a href="#">Sports</a></li><li><a href="#">Weather</a></li><li><a href="#">Contact Me</a></li></ul></div></body></body></html>效果如下：⽅式⼆：使⽤jQuery 代码实现代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>伸缩的菜单，⽤toggle()重写</title><style></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("li").find("ul").prev().click(function(){$(this).next().toggle();});$("li:has(ul)").find("ul").hide();});</script></head><body><div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a><ul><li><a href="#">Lastest News</a></li><li><a href="#">All News</a></li></ul></li><li><a href="#">Sports</a><ul><li><a href="#">Basketball</a></li><li><a href="#">Football</a></li><li><a href="#">Volleyball</a></li></ul></li><li><a href="#">Weather</a><ul><li><a href="#">Today's Weather</a></li><li><a href="#">Forecast</a></li></ul></li><li><a href="#">Contact Me</a></li></ul></div></body></html>注意：该代码必须加载了jquery.min.js ⽂件，并且所写的CSS 只能在Firefox 浏览器中正常显⽰。

div css纵向导航菜单的方法

div css纵向导航菜单的方法欢迎大家在这里学习div css纵向导航菜单!下面是我们给大家整理出来的精彩内容。

希望大家学业有成，工作顺利这一次采用的是div+h1+h2的形式。

我们使用div标签设定了一个导航的结构区域。

在这个区域中我们使用了h1来作二级分类的标题，h2来做二级分类下面的细节内容。

在XHTML的讲法意义中，h1,h2,h3这些标签本身就具有用于对文本进行层级划分的意义，直接使用h1,h2来表示层级关系，相对于在标签中加入id或class来做层级的标记更为简单和直观，在这里使用h1,h2来标记不同级别的分类名称也实在是再合适不过了。

我们来看一看css 代码的设计： #nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;} #nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;} #nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;} #nav h2 a { color:#666666; text-decoration:none;} #nav h2 a:hover { color:#999999; text-decoration:underline;} 本css代码部分采用了简化写法，如果哪句意思看不懂，您可以在Dreamweaver中打开选择编辑样式表即可查看具体是哪一项了，相信经过这样几次练习，这些代码您已经能完全看懂了，说明您离高手又近了一步了。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

边框：style：全为solid，width：全为1，color：灰色#ccc 方框：width：100
3
实验步骤及内容
Step5：选中某一行项目列表（<li>）,新建CSS规则,类型为：复合内容（基于选择的内容），名称为：#menu ul li。类型：line-height：30px 背景：background-color：白灰色#eee 方框：height：30 边框：style：solid（仅为bottom），1px，#ccc 下面为这些菜单加上链接，并制作交互效果，定义鼠标划过的状态。 Step6：选中要链接的文字，输入链接，可先设虚拟链接# Step7：新建CSS规则，类型为：标签（重新定义HTML元素），名称为： a 类型：color：黑色#000，text-decoration：none Step8：现在要为链接做交互效果。选中链接文字，新建CSS规则，类型：复合内容（基于选择的内容），名称为：a：hover 类型：color：红色#foo， underline（下划线）
5
3、将链接转换为块级元素将链接转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块级元素，只需修改区块中的display为block属性即可。 Step1：输入链接文字 Step2：添加链接 Step3：新建CSS规则，类型为：标签（重新定义HTML 元素），名称为：a
实验六：使用css+div制作导航菜单实验目的
掌握列表导航菜单的制作方法熟悉超链接的四种样式学会用CSS制作按钮掌握横向导航菜单的制作方法
1
实验步骤及内容
1、制作列表导航菜单
纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务
最终效果
2
实验步骤及内容
制作步骤：
Step1：新建页面，插入ID为menu的div标签，输入文本，插入项目列表符号ul； Step2：选中文本（注意是<ul>列表），新建CSS规则。类型为：复合内容(基于选择的内容)，名称为：#menu ul。列表： list-style-type：none 方框： padding：全为0，margin：全为0 Step3：定义文本的大小、字号、行距等。新建CSS规则，类型为：标签（重新定义HTML元素），名称为：body。设置其字体、字号、行距。下面给menu定义一个灰色的边框和宽度，为每一个项目列表定义背景色和下边框。 Step4：新建CSS规则，类型为：ID（仅用于一个HTML元素），名称为： #menu。
4
2、超链接样式超链接有四种样式：
A:link （未访问的连接） A:visited（已访问的连接） A:hover（鼠标移动到连接上时的效果） A:active（选定的连接）
插入的链接默认是蓝色的带下划线的样选择的内容），名称从下拉列表中选择
区块为：然后修改其他参数
6
4、制作横向导航菜单学过纵向导航菜单，前面又学习了float属性，那么要实现横向导航菜单就很简单，只需要把li横向排列就可实现了。具体参数为：
修改#menu ul li的参数，方框：float：left，padding： 0px 8px
7
5、制作横向图文导航列表
最终效果
8