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. Tomcat执行流程

  2. 创建podSpec,使用pod管理第三方库

    提要: podfile文件会先读取.podspec文件,根据.podspec文件的指向来下载第三方库到项目中. 本文先通过一.二.三项,这三个步骤讲解了如何建立一个.podspec文件在本地.coco ...

  3. 【python】numpy array特殊数据统一处理

    array中的某些数据坏掉,想要统一处理,找到了这个方法,做个笔记. 比如,把数组中所有小于0的数字置为0 import numpy as np t = np.array([-2, -1, 0, 1, ...

  4. 转载：XPath基本语法

    出处:http://www.cnblogs.com/Miko2012/archive/2012/10/26/2740840.html XPath的语法最基本的节点之间用/,属性用@,还有几个函数记住了 ...

  5. 使用Aspose.Cell控件实现Excel高难度报表的生成（一）

    时光飞逝,生活.工作.业余研究总是在不停忙碌着,转眼快到月底,该月的博客文章任务未完,停顿回忆一下,总结一些经验以及好的东西出来,大家一起分享一下.本文章主要介绍报表的生成,基于Aspose.Cell ...

  6. li有无缩略图样式调取

    <div class="part3list">[field:array runphp='yes']@me = (strpos(@me['litpic'],'defaul ...

  7. ESXI

    ESXI设置时间 esxi设置时间命令:Usage: esxcli system time set [cmd options] Description:   set                   ...

  8. js获取时间戳

    1.var now = Date.parse(new Date()); //例:1467342220000 获取的时间戳是把毫秒改成000显示. 2.var now = new Date().valu ...

  9. Android：学习AIDL，这一篇文章就够了(上)

    前言 在决定用这个标题之前甚是忐忑,主要是担心自己对AIDL的理解不够深入,到时候大家看了之后说——你这是什么玩意儿,就这么点东西就敢说够了?简直是坐井观天不知所谓——那样就很尴尬了.不过又转念一想, ...

  10. Flask 与 Celery 在 windows 下的集成问题

    Flask 与 Celery 在 windows 下的集成问题 所有的 Web 框架内部的视图中不适合执行需要长时间运行的任务,包括 Flask .Django 等.这类型的任务会阻塞 Web 的响应 ...