1 <!doctype html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Menu</title>

 6     <style>

 7         

 8         body{

 9             background-color: #ffded0;

         }

         #box{

             width:120px;

             font-size: 12px;

             font-family: "宋体";

         }

         #box ul{

             margin:0px;

             padding:0px;

             list-style-type: none;

         }

         #box li{

             border-bottom: #ed9f9f solid 1px;

 

         }

         #box li a{

             display: block;

             padding: 5px 5px 5px 8px;

             text-decoration: none;

             border-left: 12px solid #711515;

             border-right: 1px solid #711515;

         }

         /*动态菜单的效果*/

         #box li a:link{

             background-color: #c11136;

             color:#ffffff;

         }

         #box li a:visited{

             background-color: #c11136;

             color:#ffffff;

         }

         #box li a:hover{

             background-color: #990020;

             color:#ffff00;

         }

     </style>

 </head>

 <body>

     <div id="box">

         <ul>

             <li><a href="#">首页</a></li>

             <li><a href="#">音乐MP3</a></li>

             <li><a href="#">个人相册</a></li>

             <li><a href="#">我的博客</a></li>

             <li><a href="#">我的空间</a></li>

         </ul>

     </div>

 </body>

 </html>

[div+css]竖排菜单的更多相关文章

  1. HTML5 div+css导航菜单

    HTML5 div+css导航菜单 视频 音乐 小说   故事 作品 阅读 联系

  2. div+css树形菜单

    自己做过的项目从来没有这种东西,但见过别人的项目都有,未免落伍,学来看看,也不知道自己找到的这个是不是正路子,先贴代码再分析. <!doctype html public "-//W3 ...

  3. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  4. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  5. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  6. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. DIV+CSS布局重新学习之css控制ul li实现2级菜单

    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  9. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

随机推荐

  1. Linux的常用基本命令

    Linux的常用基本命令. 首先启动Linux.启动完毕后需要进行用户的登录,选择登陆的用户不同自然权限也不一样,其中“系统管理员”拥有最高权限. 在启动Linux后屏幕出现如下界面显示: …… Re ...

  2. A Guide to Creating a Quality Project Schedule

    Successful projects start with a good quality project schedule. Creating a schedule is one of the fi ...

  3. JavaScript：日期选择器组件的使用

    前言: 在实际项目开发中,日期选择是一个十分常见而且重要的问题,在表单中设计到日期的验证时,如果让用户自己输入时间的话,那么使用正则进行验证其正确性是不可取的,因为他一般只能验证日期的格式,无法准确的 ...

  4. zabbix配置发送报警邮件

    配置邮件分为两种情况: 第一种:使用远端邮件服务器发送报警邮件 Linux系统版本:CentOS6.5-64 下载mailx: http://nchc.dl.sourceforge.net/proje ...

  5. Review of Segmentation for Medical image analysis

    成像方法:X射线,CT,MRI,SPECT,PET等 分割的定义: Image segmentation is a procedure for extracting the region of int ...

  6. Shell 小技巧

    Shell 小技巧 ${} 的使用 截断变量 去掉左边 使用 # (最短匹配)或 ## (最长匹配)方法为 ${var#<模式>} var=DUMMY echo ${var#*M} # M ...

  7. 给表追加主键-----报错ORA-02437: 无法验证 (DENGCHAO.TEST) - 违反主键

    由于 这次 项目 做了 数据库 迁移(从 mysql 转到oracle  用的是navicat) 的工具  所以导致很多主键都丢失了 导致数据库很多 数据的id重复  导致系统修改一条数据的时候 出现 ...

  8. 单位px 转换成 rem

    <script type="text/javascript"> var oHtml = document.documentElement; getSize(); win ...

  9. Undefined symbols “_OBJC_CLASS_$_XXX” 问题

    解决方法是点击工程,在targets界面中找到Build Phases,根据提示信息“XXX”来判断缺少什么文件,一般如果缺少自定义的文件,XXX会是缺少的类名,那么就在Complie Sources ...

  10. C++Primer 第十六章

    //1.模板定义以关键字template开始,后跟一个模板参数列表,此列表不能为空.编译器用推断出的模板参数来实例化一个特定版本的函数.类型参数前必须使用class或者typename(推荐使用typ ...