本文就是利用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. CF417D--- Cunning Gena(序列+像缩进dp)

    A boy named Gena really wants to get to the "Russian Code Cup" finals, or at least get a t ...

  2. CAS Spring Security 3 整合配置(转)

    一般来说, Web 应用的安全性包括用户认证( Authentication )和用户授权( Authorization )两个部分.用户认证指的是验证某个用户是否为系统中的合法主体,也就是说用户能否 ...

  3. Heritage from father

    Problem Description Famous Harry Potter,who seemd to be a normal and poor boy,is actually a wizard.E ...

  4. Java SE学习之数组——匿名数组和不规则数组

    本文是学习网络上的文章时的总结以及自己的一点实践.感谢大家无私的分享. 近期偶然遇到了数组的问题,学习了匿名数组和不规则数组. 匿名数组适用于仅仅使用一次的情况:不规则数组适用是每行数据总数不确定的情 ...

  5. 赵雅智_BroadcastReceiver短信监听

    AndroidManifest.xml 注冊广播接收者 加入权限 <?xml version="1.0" encoding="utf-8"?> &l ...

  6. hdu 1298 T9(特里+DFS)

    pid=1298" target="_blank" style="">题目连接:hdu 1298 T9 题目大意:模拟手机打字的猜想功能.依据概 ...

  7. ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇

    原文:ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇 第三章 为控件添加事件 后篇 前一篇文章只是简单的说了下事件,但是大家应该方法,在ASP.NET自定义控件中只是简单那么定义事件是 ...

  8. [改变自己wordpress.2]给wordpress加上简单debug sql调试.

    或者说,同事. 需要帮她打印出来sql 调试输出到页面sql 在这里,我们使用插件或一个的方式来启动配置文件wordpress的debug 在插件文件夹 wordpress/wp-content/pl ...

  9. Java学习路径：不走弯路，这是一条捷径

    1．如何学习编程? JAVA是一种平台.也是一种程序设计语言,怎样学好程序设计不只适用于JAVA,对C++等其它程序设计语言也一样管用.有编程高手觉得,JAVA也好C也好没什么分别,拿来就用.为什么他 ...

  10. mysql1130远程连接没有权限解决方法

    原因擅自在两个远程连接,一种是由于mysql限制,一个是防火墙限制. 1,解决防火墙限制: 于mysql服务主机将关闭防火墙,或者在防火墙高级设置这增加了入站和出站规则,加号mysql的port.同意 ...