本文就是利用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. 2014在百度之星资格赛的第二个问题Disk Schedule

    事实上,我认为它可以用来费用流问题.但光建地图上加班. ..不科学啊.. . 因副作用太大,否则,必然在.最后,想啊想,或者使用dp对.... 别想了一维dp... .我不知道我是怎么想.无论如何,这 ...

  2. Stack-based buffer overflow in acdb audio driver (CVE-2013-2597)

    /* 本文章由 莫灰灰 编写,转载请注明出处. 作者:莫灰灰    邮箱: minzhenfei@163.com */ 1. 漏洞描写叙述 音频驱动acdb提供了一个ioctl的系统接口让应用层调用, ...

  3. [LeetCode258] Add Digits 非负整数各位相加

    题目: Given a non-negative integer num, repeatedly add all its digits until the result has only one di ...

  4. UVA305 - Joseph(数论 + 打表)

    UVA305 - Joseph(数论 + 打表) 题目链接 题目大意:约瑟夫环问题:n个人围成一圈,每次都淘汰第m个人,问最后一个幸存下来的人的编号. 这题的意思有点不一样,它规定前面的k个人是好人, ...

  5. Post数据到 https异常:基础连接已经关闭: 连接被意外关闭 解决办法

    POST数据到HTTPS站点的时候需要设置ServicePointManager类的ServerCertificateValidationCallback属性,并且在POST到https://pass ...

  6. 设计模式Adapter模式的五分钟

    五分钟一个设计模式.来形容叙述的设计模式的最简单方法.看到许多其他设计模式,请点击五分钟一个设计模式系列 http://blog.csdn.net/daguanjia11/article/catego ...

  7. C# 经典排序算法大全

    C# 经典排序算法大全 选择排序 using System; using System.Collections.Generic; using System.Linq; using System.Tex ...

  8. 玩转Web之JavaScript(一)-----javaScript语法总结（一） 与鼠标操作有关的语法

    click()  对象.click()  使对象被点击. event.clientX  返回最后一次点击鼠标 X 坐标值: event.clientY  返回最后一次点击鼠标 Y 坐标值: event ...

  9. Nginx + IIS

    Nginx + IIS 配置,实现负载均衡   当你的Web应用程序访问量大的时候,一台服务器可能会因为压力过大而无法处理所有的请求.此时,可以增加服务器,采用负载均衡来分担所有的请求.关于Nginx ...

  10. android 更新实现自己主动

    其主要原理是: 在应用程序启动.取server在版本 , 以下这个是获取当前应用的版本号信息 private void getCurVersion() { try { PackageInfo pInf ...