CSS-实战-梯形背景导航

最新推荐文章于 2023-11-01 21:34:57 发布
最新推荐文章于 2023-11-01 21:34:57 发布
阅读量1.2k 收藏 1
点赞数
文章标签： 前端 javascript ViewUI
原文链接：https://yq.aliyun.com/articles/605552
版权

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
weixin_33749131
关注
css制作 平行四边形和梯形导航条
qq_35679291的博客
09-19 2311
1.平行四边形 导航条 这个效果看起来不错吧!其实实现起来很简单平行四边形的制作运用了CSS 2D变形中的skew( ) 倾斜属性,因为我们只是在水平方向上倾斜 所以skew( x, y) 中的第二个参数指定为0,否则x,y 方向上都会发生倾斜 ul li{ position:relative; float:left; width:100
html和css画梯形背景,CSS-实战-梯形背景导航
weixin_36467048的博客
06-25 1191
1、实现效果梯形背景图导航，如下图。由于导航条文字多少不固定，因此面临的挑战是，当文字内容增加时，中间的背景宽度自动拉伸。CSS3的出现实现这样的效果相对变的容易，本文使用背景图定位的知识，加上CSS其他知识。介绍CSS2实现这样效果的一种思路。梯形背景导航2、总体实现思路(1)准备背景图注意图片，一定是透明背景格式的，可以另存为下图。透明背景图(2)创建A标签嵌套B标签的导航菜单测试(3)设置A...
CSS梯形导航菜单
那片枫叶~
06-20 954
CSS梯形导航菜单 写个大屏项目，结果没给图片，我真是****，搜了下别人写的梯形，部分不符合我的需求，我都是梯形菜单，并且点击高亮，下面是效果和代码，我用了定位方面，调试的时候花费的时间比较多 具体看个人需求，css基础很一般，写得不好的，大佬们自个调试下了 ，再次做个笔记而已！ vue项目，被我改成业务组件使用了，嫌弃父页面代码太多，看花眼了 <template> <div> <div class="nav_title_box"> &lt
CSS 技巧记录 - 平行四边形导航条、梯形导航条、毛玻璃效果
笨小孩
11-28 1841
一、平行四边导航条 效果图： 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .rhomboid li { list-style: none
html中的梯形的背景图片,如何用CSS做一个带网格背景的梯形？
weixin_31832681的博客
06-04 508
如果不能用楼上的clip-path，那换个思路，左右加个平行四边形的方式(用transform: skewX(15deg))做了整个顶部的demo，你试下(特殊边框自己再调哈)body{margin: auto;}.title-box {display: flex;justify-content: space-between;align-items: center;width: 100%;heig...
CSS3 圆角梯形导航菜单
weixin_52031970的博客
07-19 900
HTML <div id='cssmenu'> <ul> <li class='active'><a href='index.html'>Home</a> </li> <li><a href='#'>Products</a> </li> <li><a href='#'>...
css实现多边形和梯形盒阴影技巧
09-24
本文将深入探讨如何使用CSS来创建多边形和梯形盒阴影。通常，我们为四边形元素添加阴影非常简单，只需使用`box-shadow`属性即可。然而，面对特殊的需求，如创建带有阴影的梯形框，就需要采取一些不同的方法。 首先...
postcss-plugin-px2rem 移动端适配原理
qq_33715850的博客
07-06 6565
postcss-plugin-px2rem 移动端适配原理
webpack配置之postcss-loader和postcss-preset-env
浅听记忆的博客
05-20 4342
在我们打包css的时候难免会遇到css的兼容性问题 此时webpack提供了postcss-loader和对应插件postcss-preset-env 而这两个东西的使用在webpack4和webpack5有些许不同 rules: [{ test: /\.css$/, use: [ // 'style-loader', \ // 取代
mini-css-extract-plugin源码解析
vv_bug
08-19 3037
前言 前面我们写过几篇关于webpack的文章： webpack源码解析一 … webpack源码解析七（optimization） 然后结合之前babel、eslint知识搭了一个比较复杂的vue项目： webpack实战之（手把手教你从0开始搭建一个vue项目） 手把手教你从0开始搭建一个vue项目（完结） 在实战demo中我们有用到一个css的插件mini-css-extract-plugin,今天我们结合demo来分析一下源码。 简介 This plugin extracts CSS in
【CSS】实现梯形
流萤梦的博客
04-09 3132
简单说一下背景，就是需要实现一个展开收起的按钮。那我第一个想到的方法，可不就是border自己画嘛。
css实现梯形等图形
LLL_liuhui的博客
01-11 1383
 css &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; div{margin: 20px;float: left;} .box,.box1{width:
css绘制梯形图形，及显示矩形图片
YouZi_X的博客
06-26 9576
梯形 div+transform实现如上效果，直接拉到底部。 -webkit-mask-image加上梯形遮罩也可实现。 1.使用border实现。 等腰梯形1.1 .trapezoid1-1 { width: 100px; height: 0; border-bottom: 100px solid black; border-right: 50px...
用css画一个倒三角
aweo960421621的博客
09-04 1038
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
一个梯形的Tabbar导航栏
最新发布
小旋风nice
11-01 363
【代码】一个梯形的Tabbar导航栏。
纯css的梯形菜单
幸福有多远
01-10 346
前言： 选中后的z-index添加!important;设置成最高权限，覆盖生成的内联样式 <html> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .barbox{ margin: 20px; ...
css3制作梯形,CSS3 用TABLE表格做成的梯形动效
weixin_33623088的博客
08-04 267
CSS语言：CSSSCSS确定*,*::before,*::after {box-sizing: border-box;}body {font-family: 'Open Sans', sans-serif;margin: 0;padding: 0;background-color: #333;font-size: 66.5%;}@-moz-keyframes anim {0% {width: 1...
css3制作梯形,css3实现梯形三角
weixin_31089065的博客
08-04 902
近期移动端项目中，图片很多移动端尽量少图片，以便提升加载速度！这时候css3可以大放光芒比如梯形的背景图--------------------------------------------------------------------------------2个标签即可实现梯形背景----------------html----------------------标题------------...
html中的梯形的背景图片,将图像背景放到CSS三角形上
weixin_36469726的博客
06-09 204
我正在尝试将背景图像放在使用CSS边框创建三角形的div上.这是我目前的努力.它适用于纯色,但在图像方面我很茫然.HTMLCSS.wrapper {padding:50px 0px;height: 50px;position: relative;width: 300px;background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIB...
Web开发基础：Html-Css-Javascript实战解析
- 窗口控制：如指定新窗口打开链接，或者使用`window`对象进行页面导航。 4. 高级HTML特性： - 表格：用于组织数据，包括单元格合并、嵌套表格和背景设置。 - 框架：通过`<frameset>`和`<frame>`元素划分网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值