本文就是利用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. 移动web：Tips消息弹出框

    在web开发中经常会用到像alert这样的弹出消息,每个浏览器自带的消息弹出框都不相同.为了统一外观,实现自定义的功能,动手写一个弹出框插件. 对弹出框的实现要求如下: 1. 仿照IOS系统弹出外观 ...

  2. 假设synthesize省略,语义属性声明assign retain copy时间,为了实现自己的setter和getter方法

    假设synthesize省略,而且我们自己实现setter和getter方法时,系统就不会生成相应的setter和getter方法,还有实例变量 1,当把语义特性声明为assign时,setter和g ...

  3. 探索WebKit核心（一）------ 新秀开始

    为什么WebKit 现在,研究人员WebKit越来越多的人,我不能逃脱,其中还增加.WebKit也多亏了流行的浏览器和WebOS乱斗.随着Palm WebOS, Chrome OS, Firefox ...

  4. Apple Watch 1.0 开发介绍 1.2 简介 配置Xcode工程

    WatchKit app需要一个现有的iOS app.在iOS app工程中,添加一个新的WatchKit app target,它包含了WatchKit app和WatchKit extension ...

  5. flashfxp3.41中文版注册码:(适合最新版本)

    推荐(尚未被封的 Realkey) FLASHFXPvACq2ssbvAAAAAC1W7cJKQTzmx77zmqJICvA7d3WnU tWNXdrp8YuERRFdIvXfOPbcpABkVix2 ...

  6. H. 硬币的水问题II

    H. 硬币水题II Time Limit: 1000ms Case Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: ...

  7. 一个用于每一天JavaScript示例-使用缓存计算（memoization）为了提高应用程序性能

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. JAVA学习课第五 — IO流程（九）文件分割器合成器

    文件分割器 private static final int SIZE = 1024 *1024; public static void splitFile(File file) throws IOE ...

  9. Linux IO工具 iotop备择方案iopp

    iotop毫无疑问linux IO检测上是一个很好的工具,但苦于要求和内核版本Python版本号.我的很多朋友放弃了.我也是.无意中发现iopp,使用c书面,与此iotop它是一个作用.nice! 一 ...

  10. HDU 2454 Degree Sequence of Graph G（Havel定理 推断一个简单图的存在）

    主题链接:pid=2454">http://acm.hdu.edu.cn/showproblem.php?pid=2454 Problem Description Wang Haiya ...