小米商城侧边栏【显示向右箭头】

一、方法1：添加图片

显示效果：

向右箭头我图片是来自：iconfont-阿里巴巴矢量图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米商城导航侧边栏</title><style>#nav {background-color: #9e9c9d;width: 250px;height: 430px;/*距离上个盒子的上边有10px*/padding-top: 10px;/*距离上个盒子的底部有10px*/padding-bottom: 10px;}a {display: block;background-color: #9e9c9d;width: 250px;height: 42px;color: #edeeee;text-decoration: none;/* 单行文字垂直居中 */line-height: 42px;text-indent: 2em;background-image: url(arrow-right.png);/*背景图片位置*/background-position: center right;/*背景图片是否平铺*/background-repeat: no-repeat;/*背景图片大小*/background-size: 16px;/*背景图片x轴的距离*/background-position-x: 210px;}a:hover {background-color: #ff6700;}</style>
</head><body><div id="lyx"><div id="nav"><a href="#">手机</a><a href="#">电脑 </a><a href="#">笔记本 平板</a><a href="#">家电 </a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">电源 配件 </a><a href="#">健康 儿童</a><a href="#">耳机 音箱 </a><a href="#">生活 箱包 </a></div></div>
</body></html>

二、方法2：直接添加“❯”符号的编码\276F，利用伪类选择器

显示效果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css"><style>a {display: block;text-decoration: none;width: 250px;height: 42px;background-color: rgb(133, 128, 128);color: rgb(253, 247, 247);line-height: 42px;text-indent: 2em;}a:hover {background-color: rgb(223, 115, 27);}.nav::after {content: '\276F';font-size: 20px;float: right;padding-right: 40px;}</style>
</head><body><div><a href="#">手机<span class="nav"></span></a><a href="#">电脑 笔记本<span class="nav"></span></a><a href="#">家电 洗衣机<span class="nav"></span></a></div></body></html>

小米商城侧边栏【显示向右箭头】相关推荐

GoLand：显示向左向右箭头
GoLand:显示向左向右箭头 View->Tool 最终效果: 此外,向左向右箭头可以使用快捷键实现: 参考: 1.https://blog.csdn.net/mqdxiaoxiao/arti ...
css整理 -- 右箭头，上下箭头，三角形
右箭头 .right-arrow {display :inline-block;position: relative;width: 36rpx;height: 36rpx;margin-right: ...
ionic开发中的ion-list设置item右侧的向右箭头
1.添加向右箭头的方法:<i class="icon ion-ios-arrow-forward"></i> 在ion-item中添加上述代码,例: < ...
html右侧箭头是什么控件,html实现右箭头
右箭头符号荆轲刺秦王在制作网页的时候,我们可能会有这样的需求:比如我们需要做一个小箭头,最简单的办法就是直接用数学符号:">",但是这样做的缺点就是没有办法调节符号的大 ...
html标按钮往左移,按右箭头按钮,往左移
上图中,点击"右箭头"按钮,缩略图列表应该往左移还是往右移? 稍做尝试我们便会发现,点击"右箭头"按钮,列表向左移动是更"习惯"的,也是比较 ...
如何在UITableViewCell的中添加向右箭头和箭头前的文本
如何在UITableViewCell的中添加向右箭头和箭头前的文本 2014-10-01 20:12:26来源:CSDN作者:u01362386710391人点击 1.首先说的是添加向右的箭头,这个很 ...
Keil进入仿真，窗口不显示程序运行箭头
Keil进入仿真后,程序窗口中不显示程序运行箭头.点"Run",程序也会运行,就是不显示程序运行指示箭头. 可能是"Debug Infomation"选项没有勾 ...
lambda表达式的使用 || Lambda Express 口诀：拷贝小括号，写死右箭头，落地大括号||default || @FunctionalInterface||静态方法实现
package com.dym.juc;import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.Reentr ...
BUG解决记录--iOS13中iPhoneX系统右箭头出现黑框
更新了iOS13系统后,通过以下方法添加的系统右箭头,会在iPhoneX等设备出现一个黑框,原因不明. let cell = UITableViewCell() cell.accessoryType ...

小米商城侧边栏【显示向右箭头】

一、方法1：添加图片

二、方法2：直接添加“❯”符号的编码\276F，利用伪类选择器

小米商城侧边栏【显示向右箭头】相关推荐

最新文章

热门文章