本文就是利用css和html自适应于文本菜单的长度。

后效果图实现，例如下列：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgyOTE4Mg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

实现代码例如以下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>menu4.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css">

a{

  display: block;

  height:38px;

  /* width:107px; */

  /* line-height: 2; */

  line-height: 38px;

  text-align: center;

  background: url(./c2.jpg) no-repeat 0px 0px;

  color:#d84700;

  font-size: 14px;

  weight:bold;

  text-decoration: none;

  padding-left: 18px;

  float:left;

  margin:5px;

}

a span{

  display: block;

  background: url(./c2.jpg) no-repeat right 0px;

  padding-right: 20px;

}

a:hover{

  background: url(./c2.jpg) no-repeat 0px -38px;

}

a:hover span{

  background: url(./c2.jpg) no-repeat right -38px;

}

</style>

  </head>

  <body>

     <p><a href="#"><span>免费注冊</span></a>

     <a href="#"><span>登入</span></a>

     <a href="#"><span>在网上开店</span></a></p>

  </body>

</html>

版权声明：本文博主原创文章。博客，未经同意不得转载。

css+html菜单适应性学习的宽度的更多相关文章

  1. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

  2. 11种常用css样式之border学习

    边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...

  3. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  4. css判断不同分辨率显示不同宽度布局实现自适应宽度

    一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...

  5. HTML5 div+css导航菜单

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

  6. Adobe Edge Animate –使用css制作菜单

    Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:

  7. JS+css滑动菜单简单实现

    JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...

  8. 强烈推荐一款CSS导航菜单

    强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的“下拉”菜单,应该叫滑出菜单吧?反正比较不错,不多说了. <! ...

  9. CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

    CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...

随机推荐

  1. Mongodb入门——安装与配置

    作者:zhanhailiang 日期:2014-11-07 1. 安装mongodb: [root@~/wade/nodejs/nodeclub]# yum search mongodb [root@ ...

  2. OPhone SDK初体验

    OPhone SDK初体验 write by 九天雁翎(JTianLing) -- blog.csdn.net/vagrxie 讨论新闻组及文件 背景说明 中国伟大的垄断龙头,世界上也是顶尖的中移动最 ...

  3. 从原理角度解析Android （Java） http 文件上传

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23781773 文件上传是我们项目中经常使用的功能,一般我们的服务器可能都是web ...

  4. 简单的虚拟摇杆控制移动（NGUI）

    一.用NGUI创建虚拟摇杆贴图 先创建一个sprite作为背景叫做JoyStick 并添加一个BoxCollider,再创建一个sprite child作为虚拟摇杆中间的按钮,叫做button 二.通 ...

  5. gerrit git使用

    有关git的參考资料 pro git中文版, 最好的git书籍 http://git-scm.com/book/zh 图解git http://marklodato.github.com/visual ...

  6. 翻译器DIY————次序

    突然有一种冲动,想要写一个编译器. 因此,检查在网上搜索相关信息,思想direct3D 有本书叫龙,也有个龙书 Compilers Principles,Techniques, & Tool ...

  7. 【Git使用具体解释】EGit使用具体解释

    此系列文章写给那些打算使用Git或正在使用Git,但对Git还不是非常理解的程序员们,希望能帮助大家在学习和使用Git的过程中少走弯路,并以最少的时间和代价来熟悉Git,让Git可以辅助很多其它的开发 ...

  8. 使用AppCompat_v7 21.0.0d的几个兼容问题

    1.实现新的ActionBarDrawerToggle动画 ActionBarDrawerToggle使用最新的AppCompat_v7 21会出现一个非常帅的动画.使用方式在Androidstudi ...

  9. InputMonitor注意事项

    文章只记录自己的点点理解.为了你自己的参考. 1.mInputFocus WMS.addWindow()-->WMS.finishUpdateFocusedWindowAfterAssignLa ...

  10. 使用SQLServer Audit来监控触发器的启用、禁用情况

    原文:使用SQLServer Audit来监控触发器的启用.禁用情况 使用情景: 有时候会发现在触发器中的业务逻辑没有执行,可能是因为触发器的逻辑错误所引起的.但是有时候却是因为一些触发器被禁用了. ...