CSS-实战-梯形背景导航

简介: 1、实现效果梯形背景图导航,如下图。由于导航条文字多少不固定,因此面临的挑战是,当文字内容增加时,中间的背景宽度自动拉伸。CSS3的出现实现这样的效果相对变的容易,本文使用背景图定位的知识,加上CSS其他知识。

1、实现效果

梯形背景图导航,如下图。由于导航条文字多少不固定,因此面临的挑战是,当文字内容增加时,中间的背景宽度自动拉伸。CSS3的出现实现这样的效果相对变的容易,本文使用背景图定位的知识,加上CSS其他知识。介绍CSS2实现这样效果的一种思路。


梯形背景导航

2、总体实现思路

(1)准备背景图
注意图片,一定是透明背景格式的,可以另存为下图。


透明背景图

(2)创建A标签嵌套B标签的导航菜单

<a href="javascript:void(0);" class="menu">
    <b>测试</b>
</a>

(3)设置A标签的左边距,背景图从左向右显示。
A标签红色区域的背景显示出来,其他区域背景让B标签的背景将其覆盖。


A标签显示区域

(4)设置B标签的右边距,背景图从右向左显示。
B标签,通过文字的宽度让盒子变宽,同时设置B的右边距,背景图从右向左显示。


B标签显示区域

(5)说明:A标签背景图主要显示左边部分,B标签背景图主要是显示右边和中间部分,AB两个标签的背景图合并,可以显示最终理想效果。

3、细节代码实现步骤

第一步: 设置A的属性
(1):将A标签为浮动标签,A标签的高度为25px.
(2):将A标签的坐边距设置为25px,可以容纳背景图的弧度.
(3):将背景图从左边定位,上下不做偏移.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梯形导航-第一步</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .header{
        width: 80%;
        height: 50px;
        background-color: #ccc;
        overflow:hidden;
        margin: 0px auto;
        border: 1px solid #ccc;
    }
    .dhbar{
        width: 70%;
        margin-top: 25px;
        margin-right:25px;
        float: right;
        background: white;

    }
    .dhbar a {
        float: left;
        cursor:pointer;
        height: 25px;
        padding: 0px 0px 0px 25px;
        margin: 0px 10px;
        font-size: 13px;
        text-decoration: none;
        color: black; 
        background:url(dh.png) no-repeat left 0px;
        border: 1px solid red;
    }

    .dhbar b{
        border: 1px solid blue;
    }
   
    </style>
</head>
<body>
    <div class="header">
        <div class="dhbar">
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>多个文字测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
        </div>
    </div>
</body>
</html>
设置A元素后的样式

第二步: 设置B的基本属性
(1):设置B为块级元素.
(2):设置B元素的高度
(3):设置B元素的文字垂直居中显示,line-height与高度一样
(4):设置B元素的右边距为25px.

  .dhbar b{
        border: 1px solid blue;
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
    }
设置B元素后的样式

第三步:添加B元素背景图

    .dhbar b{
        border: 1px solid blue;
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
        background:url(dh.png) no-repeat right 0px;
    }
B元素添加背景图

第四步:去掉边框样式


最终效果

源代码 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梯形导航</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .header{
        width: 80%;
        height: 50px;
        background-color: #ccc;
        overflow:hidden;
        margin: 0px auto;
        border: 1px solid #ccc;
    }
    .dhbar{
        width: 70%;
        margin-top: 25px;
        margin-right:25px;
        float: right;
        background: white;

    }
    .dhbar a {
        float: left;
        cursor:pointer;
        height: 25px;
        padding: 0px 0px 0px 25px;
        margin: 0px 10px;
        font-size: 13px;
        text-decoration: none;
        color: black; 
        background:url(dh.png) no-repeat left 0px;
         
    }

    .dhbar b{
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
        background:url(dh.png) no-repeat right 0px;
    }
     
    
    
    </style>
</head>
<body>
    <div class="header">
        <div class="dhbar">
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>多个文字测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
        </div>
    </div>
</body>
</html>

4、添加鼠标移动后效果

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梯形导航</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .header{
        width: 80%;
        height: 50px;
        background-color: #ccc;
        overflow:hidden;
        margin: 0px auto;
        border: 1px solid #ccc;
    }
    .dhbar{
        width: 70%;
        margin-top: 25px;
        margin-right:25px;
        float: right;
        background: white;

    }
    .dhbar a {
        float: left;
        cursor:pointer;
        height: 25px;
        padding: 0px 0px 0px 25px;
        margin: 0px 10px;
        font-size: 13px;
        text-decoration: none;
        color: black; 
         
    }

    .dhbar b{
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
    }
     
    .dhbar a:hover{
        background:url(dh.png) no-repeat left 0px;
    }
    
    .dhbar a:hover b{
        color :red;
        background:url(dh.png) no-repeat right 0px;
    }
    
    </style>
</head>
<body>
    <div class="header">
        <div class="dhbar">
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>多个文字测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
        </div>
    </div>
</body>
</html>

运行效果:

image.png

5、挑战实现如下效果

(1)可以用本文的思路(浏览器支持CSS3后,本文的思路基本淘汰)。
(2) 使用CSS3的新特性实现。


image.png
image.png
image.png

素材图片


dh.png
相关文章
|
4月前
|
前端开发
导航新风尚:CSS梯形设计,让网站菜单不再单调!
导航新风尚:CSS梯形设计,让网站菜单不再单调!
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
|
4月前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
61 4
|
4月前
|
前端开发
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
|
4月前
|
前端开发
一键复制:期末大作业常用的CSS动画导航效果!
一键复制:期末大作业常用的CSS动画导航效果!
|
4月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
56 0
|
4月前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
174 0
|
4月前
|
前端开发
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
|
5月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
5月前
|
前端开发
css 巧用 ::after 和 ::before 实现竖排分类导航
css 巧用 ::after 和 ::before 实现竖排分类导航
49 1