zoukankan      html  css  js  c++  java
  • CSS打造黑色简洁菜单代码

    代码简介:同样是CSS导航菜,看上去简洁,但用起来效果很不错。自己试手写的,也请高手指正。现有一个问题就是中文、英文的对齐问题,如果菜单里的某项是纯中文或纯英文,则两个菜单的高度会有差别,到现在没有找到解决办法,也请高手指正。

    代码内容:

    <!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>
    <title>CSS打造黑色简洁菜单代码_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    body {
    	font-family:宋体;
    	font-size:12px;
    	background:#666;
    }
    #main_nav {
    	list-style:none;
    	margin:100px;
    }
    #main_nav li {
    	float:left;
    }
    #main_nav li a {
    	display:block;
    	padding: 10px 20px;
    	background:#000;
    	color:#FFF;
    	border:1px solid #000;
    	text-decoration:none;
    	text-transform:capitalize;
    }
    #main_nav li a:hover {
    	background:#ccc;
    	color:#000;
    	border:1px solid #000;
    }
    </style>
    </head>
    <body>
    <ul id="main_nav">
      <li><a href="/">Ajax/JavaScript下载</a></li><li><a href="/">ExtJS实例</a></li><li><a href="/">jQuery代码</a></li><li><a 
    
    href="http://www.webdm.cn">CSS特效</a></li><li><a href="/">HTML精选</a></li><li><a href="http://www.webdm.cn">在线编辑器</a></li><li><a 
    
    href="/">Mootools举例</a></li><li><a href="/">Prototype框架</a></li>
    </ul>
    </body>
    </html>
    <br>
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
    

    代码来自:http://www.webdm.cn/webcode/f0f6fcc0-eb54-4f83-af9a-6863b67bdfbc.html

  • 相关阅读:
    一些常用的代码评审工具
    Atlassian旗下一干team build软件
    Jira功能全介绍
    项目经验分享
    网址、下载地址
    Java 字节码解读
    Gitlab 安装
    博客园设置
    mybatis 遇到空串无法判断
    Shell 脚本入门
  • 原文地址:https://www.cnblogs.com/webdm/p/1967645.html
Copyright © 2011-2022 走看看