关于css如何实现背景图片不规则的导航菜单的示例代码分享-css教程-PHP中文网

首页

web前端

css教程

关于css如何实现背景图片不规则的导航菜单的示例代码分享

黄舟

Jul 19, 2017 pm 03:13 PM

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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="js/jquery.js"></script><!-- wbg解决ie6下的背景 勿动！！！-->
    <!--[if IE 6]>
      <script src="js/ie_png.js" mce_src="js/ie_png.js">
      </script>
      <script type="text/javascript">   
          DD_belatedPNG.fix(&#39;.previous,img&#39;); 
     </script>
<![endif]--> <style type="text/css">body{
        font-size:12px;
        font-family:Arial, Helvetica, sans-serif;}body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {    
    margin:0;   
     padding:0;  
    list-style:none;} body img{
  border:none;}a{
 color:#000;
 border:0;
 text-decoration:none;}a:hover{
  color:#f00;
  text-decoration:none;}#warp{
    margin:20px auto;
    width: 960px;}body{
        background:url(img/bj.jpg) no-repeat center top #090909;}.nav{
        background:url(img/nav_bj.png) right no-repeat;
        _background:url(img/nav_bj.gif) right no-repeat;
        height:47px;
        width:638px;}.nav ul li{
            float:left;
            margin:0 -7px;/*这里的marign是实现这个效果最关键的地方*/
            display:inline;
            width:104px;}.nav ul li a{
                display:block;
                color:#FFFFFF;
                padding:7px 0px;
                _padding:5px 0px 6px;
                width:104px;
                float:left;
                text-align:center;
                font-family:Microsoft YaHei !important;}.nav ul li a span{
                    display:block;}.nav ul li a:hover{
                        background:url(img/a_hover.png) no-repeat;
                        _background:url(img/a_hover.gif) no-repeat;
                        color:#fff;}.nav ul .home a:hover{
                        background:url(img/home_hover.png) 7px center no-repeat;
                        _background:url(img/home_hover.gif) 7px center no-repeat;}</style> <title></title></head><body>
    <p id="warp">
        <p class="nav">
            <ul>
                <li class="home"><a href=""><span>Home</span>首页</a></li>
                <li><a href=""><span>About</span>关于九弘</a></li>
                <li><a href=""><span>Serve</span>服务项目</a></li>
                <li><a href=""><span>Case</span>活动案例</a></li>
                <li><a href=""><span>Information</span>公司动态</a></li>
                <li><a href=""><span>Partners</span>合作伙伴</a></li>
                <li><a href=""><span>Contact</span>联系方式</a></li>
            </ul>
        </p>
    </p></body></html>

登录后复制

在这个效果的实现过程中最关键的地方就是把“li”的margin值左右两边设为负数，然后把“li”和”a“的宽度设成一样，这样”a“的宽度就是固定的了，而”li“左右两边因为有margin，所以会缩小。

以上是关于css如何实现背景图片不规则的导航菜单的示例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7439

CakePHP 教程

1369

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

Bootstrap列表如何移除默认样式？ Apr 07, 2025 am 10:18 AM

Bootstrap 列表的默认样式可以通过 CSS 覆盖来移除。使用更具体的 CSS 规则和选择器，遵循 "就近原则" 和 "权重原则"，覆盖 Bootstrap 默认的样式。为避免样式冲突，可使用更具针对性的选择器。如果遇到覆盖不成功的情况，可调整自定义 CSS 的权重。同时注意性能优化，避免过度使用 !important，撰写简洁高效的 CSS 代码。

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap如何上传文件 Apr 07, 2025 pm 01:09 PM

可以通过 Bootstrap 实现文件上传功能，步骤如下：引入 Bootstrap CSS 和 JavaScript 文件；创建文件输入字段；创建文件上传按钮；处理文件上传（使用 FormData 收集数据，然后发送到服务器）；自定义样式（可选）。

bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

Bootstrap列表如何实现嵌套？ Apr 07, 2025 am 10:27 AM

Bootstrap 中嵌套列表需要使用 Bootstrap 的网格系统来控制样式。首先用外层 <ul> 和 <li> 创建列表，然后将内层列表包裹在 <div class="row"> 中，并在内层列表上添加 <div class="col-md-6"> 来指定内层列表占据一行的一半宽度。这样，内层列表就能拥有合适

Bootstrap列表如何改变大小？ Apr 07, 2025 am 10:45 AM

Bootstrap 列表的大小取决于包含列表的容器的大小，而不是列表本身。使用 Bootstrap 的网格系统或 Flexbox 可以控制容器的大小，从而间接调整列表项的大小。

bootstrap怎么布局 Apr 07, 2025 pm 02:24 PM

使用 Bootstrap 布局网站，需要使用网格系统，将页面划分为容器、行和列。首先添加容器，然后在其中添加行，并在行内添加列，最后在列中添加内容。Bootstrap 的响应式布局功能根据断点（xs、sm、md、lg、xl）自动调整布局，通过使用响应式类可以实现不同屏幕尺寸下的不同布局。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

See all articles

关于css如何实现背景图片不规则的导航菜单的示例代码分享

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题